워드프레스를 통해 커스텀 테마를 만들 때 헤더 내비게이션에 들어가는 메뉴 제작 방법을 살펴보겠습니다. 코드에 대한 자세한 내용은 워드프레스 공식 가이드를 통해 확인하기 바랍니다.

헤더에 커스텀 메뉴 만들기

functions.php 파일에 메뉴 등록

function 테마명_theme_menus(){
   //관리자 페이지에 메뉴 넣기
   add_theme_support('menus');
   //테마에서 사용할 메뉴 프레임 만들기
    add_theme_support('menus');(
      array (
         'main_nav'=> __('Main', '테마명'),
         'second_nav'=> __('Second', '테마명')
      )
   );
}
add_action('after_setup_theme', '테마명_theme_menus');

위의 add_theme_support('menus') 코드를 functions.php 파일에 삽입하면 관리자 페이지 > 외모에 메뉴가 생성됩니다. 여기서 'main_nav', 'second_nav' 는 헤더에 출력할 때 불러오는 id와 같은 역할을 합니다. 이를 클릭하여 화면을 이동하면 위와 같이 Main과 Second 메뉴 프레임이 생성된 것을 확인할 수 있습니다. 이는 PC용 메뉴, 모바일용 메뉴, off canvas용 메뉴 등을 만들어 위치별, 메뉴 콘텐츠별로 다르게 구성하여 활용할 수 있습니다.

메뉴 구조 구성 및 위치 관리

관리자 페이지로 돌아가 외모 > 메뉴 화면에서 메뉴별 페이지를 구성합니다. 자세한 내용은 워드프레스 메뉴 만들기를 참고하세요.

위치 관리 탭을 선택 후 메뉴 프레임별 만든 메뉴를 지정해줍니다.

header.php에 메뉴 출력 코드 삽입

<?php 
        wp_nav_menu(
            array(
                'theme_location'=>'main_nav', //functions.php 코드의 메뉴 이름
                'container'=>'div',
                'container_class'=>'my-navbar'  //css를 위한 class 값
            )
            );
    ?>

헤더에서 메뉴를 출력하기 위해 header.php 파일에서 wp_nav_menu() 함수 코드를 입력합니다. theme_location에 functions.php에서 입력한 메뉴 이름을 넣어주고, container_class에는 style.css 파일에 사용할 클래스명을 넣어줍니다.

사이트를 새로고침하여 헤더 내비게이션에 메뉴가 출력되었음을 확인합니다. 추가적으로 style.css 파일에서 스타일 코드를 이용해 디자인을 변경하면 완성됩니다.

📚 함께 읽으면 좋은 글

워드프레스 메뉴 만들기
워드프레스 폰트 추가 방법