워드프레스 테마 만들기 | 메뉴와 사이드바 > 사이드바 만들기

위젯을 넣을 수 있는 사이드바를 만들려면 functions.php에 다음의 코드를 추가합니다.

// Sidebar
register_sidebar( array(
  'name' => __( 'Right Sidebar' ),
));

더 많은 사이드바가 필요하다면 반복하여 생성하면 됩니다.

// Sidebar
register_sidebar( array(
  'name' => __( 'Right Sidebar' ),
));
register_sidebar( array(
  'name' => __( 'Left Sidebar' ),
));

Right Sidebar 하나만 만든 후 워드프레스 관리자 [외모 - 위젯]으로 가면 다음과 같이 Right Sidebar라는 영역이 생긴 걸 볼 수 있습니다.

최근 글 목록 위젯을 추가해놓도록 하겠습니다.

index.php의 메뉴 코드 밑에 다음의 코드를 추가합니다.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Right Sidebar") ) : ?>
<?php endif; ?>

이제 사이트로 가면 다음가 같이 최근 글 목록이 출력됩니다.

그런데, 위젯 제목에 점이 있습니다. 이유는 위젯을 li 태그로 감싸는 게 기본값이기 때문입니다. 이를 div 태그로 바꾸기 위해서는 functions.php를 수정해야 합니다.

// Sidebar
register_sidebar( array(
  'name' => __( 'Right Sidebar' ),
  'before_widget' => '<div class="jb-widget">',
  'after_widget' => '</div>',
));

before_widget은 위젯 앞에, after_widget은 위젯 뒤에 붙일 태그입니다. div 태그로 바꾸고 jb-widget이라는 class를 추가해보았습니다.

이제 사이트로 가면 제대로 나옵니다.

이외에도 다양한 옵션이 있습니다. register_sidebar에 대한 자세한 정보는 다음의 링크에 있습니다.

Source Code Download : making-wordpress-theme-v1-chapter-3-3.zip

Created on 2014-01-17 18:48 | Updated on 2017-04-19 16:19

Book navigation