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

테마에 메뉴를 사용할 수 있도록 하려면 functions.php에 다음의 코드를 추가합니다.

// Menus
register_nav_menus( array(
  'main_menu' => 'Main Menu',
));

main_menu는 고유 이름, Main Menu는 라벨로 이해하면 됩니다. 메뉴를 여러개 만들려면 다음과 같이 합니다.

// Menus
register_nav_menus( array(
  'main_menu' => 'Main Menu',
  'sidebar_menu' => 'Sidebar Menu',
));

Main Menu 하나만 만든다고 했을 때, 지금까지 만든 functions.php의 전체 코드는 다음과 같습니다.

<?php
  // Thumbnails
  add_theme_support( 'post-thumbnails' );
  // Menus
  register_nav_menus( array(
    'main_menu' => 'Main Menu',
  ));
?>

index.php의 <h2>Menu</h2> 아래에 다음의 코드를 넣습니다.

<?php
  wp_nav_menu( array(
    'theme_location' => 'main_menu',
  ));
?>

main_menu로 설정된 메뉴를 출력할 것이라는 뜻입니다. 이제 사이트로 가면 다음과 같이 메뉴 자리에 페이지 목록이 나옵니다.

페이지 목록이 나오는 이유는, 메뉴가 설정되지 않았을 때 페이지 목록이 나오는 것이 기본 설정이기 때문입니다. 만약 메뉴가 설정되지 않았을 때 아무것도 나오지 않게 할려면 다음과 같이 합니다.

<?php
  wp_nav_menu( array(
    'theme_location' => 'main_menu',
    'fallback_cb' => false,
  ));
?>

워드프레스 관리자 모드 [외모 - 메뉴]의 [위치 관리하기]로 가면 다음과 같이 Main Menu가 추가된 걸 볼 수 있습니다.

메뉴를 선택하고 사이트로 가면 그 메뉴가 순서 없는 목록(ul) 형식으로 나옵니다.

메뉴를 CSS로 꾸미려면 div 태그로 감싸거나 ul 등 각 요소에 class를 넣어야 합니다. 예를 들어 ul에 jb-menu라는 class를 넣으려면 다음과 같이 합니다.

<?php
  wp_nav_menu( array(
    'theme_location' => 'main_menu',
    'fallback_cb' => false,
    'menu_class' => 'jb-menu',
  ));
?>

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

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

Book navigation