워드프레스 개발 메뉴 추가 | register_nav_menus() #1

윤정한 | 최근 수정일 : 23년 11월 18일

워드프레스에서 메뉴 추가하기

메뉴 추가하고 삭제하는 과정은 아주 중요합니다.
특히나 업체에 위탁을 받아 개발을 납품해야 할 때 플러그인과 테마 업데이트는 절대로 하면 안되는 행동이죠. 또한 속도를 느리게 할 필요도 없기 때문에 업데이트 체크 함수는 끄는 것이 좋습니다.

register_nav_menus

사용자가 원하는 위치에 메뉴를 표시할 수 있도록 register_nav_menus 함수를 제공합니다. 이를 통해 다양한 테마 위치에 사용자 정의 메뉴를 쉽게 추가할 수 있습니다.

기본 사용법

register_nav_menus 함수는 배열 형태로 메뉴 위치와 해당 메뉴의 레이블을 받아들입니다.

예제:

register_nav_menus(array('header_menu' => 'Header Menu'));

여기서 'header_menu'는 워드프레스 내부에서 사용되는 메뉴 위치의 식별자이며, 'Header Menu'는 관리자 대시보드에 표시되는 레이블입니다.

여러 메뉴 위치 등록하기

하나 이상의 메뉴 위치를 등록하려면 배열에 여러 항목을 추가하면 됩니다.

예제:

register_nav_menus( array(
    'primary_menu' => __( 'Primary Menu', 'text_domain' ),
    'footer_menu'  => __( 'Footer Menu', 'text_domain' ),
));

__( '보여지는 이름', '고유 식별자' ) 형식은 워드프레스에서 번역을 지원하는 함수입니다. 여러 언어로 사이트를 운영하는 경우 유용하게 사용될 수 있습니다.

코드 최적화 및 재사용 방지

만약 같은 함수가 이미 존재하는지 확인한 후 함수를 등록하고 싶다면, function_exists를 사용하여 함수의 존재 여부를 확인할 수 있습니다.

if ( !function_exists( 'mytheme_register_nav_menu' ) ) {

    function mytheme_register_nav_menu(){
        add_theme_support('menus');

        register_nav_menus( array(
            'primary_menu' => __( 'Primary Menu', 'text_domain' ),
            'footer_menu'  => __( 'Footer Menu', 'text_domain' ),
        ));
    }
    add_action( 'after_setup_theme', 'mytheme_register_nav_menu', 0 );
}

2. 워드프레스 코드로 커스텀 메뉴 생성 및 항목 추가

functions.php에 다음 코드를 추가하여 메뉴를 생성하고 메뉴 항목을 추가할 수 있습니다.

function create_custom_menu() {
    $menu_name = '커스텀 메뉴';  // 생성할 메뉴의 이름
    $menu_exists = wp_get_nav_menu_object($menu_name);

    // 메뉴가 아직 존재하지 않는 경우 메뉴를 생성하고 항목을 추가
    if(!$menu_exists) {
        $menu_id = wp_create_nav_menu($menu_name);

        // 메뉴 항목 추가
        wp_update_nav_menu_item($menu_id, 0, array(
            'menu-item-title' => '홈',
            'menu-item-url' => home_url('/'),
            'menu-item-status' => 'publish'
        ));

        // 필요한 경우 다른 메뉴 항목도 이곳에 추가
    }
}
add_action('init', 'create_custom_menu');

3. 커스텀 메뉴를 특정 페이지나 테마 위치에 표시

header.php나 원하는 템플릿 파일에 다음 코드를 추가하여 메뉴를 표시합니다.

wp_nav_menu(array(
    'theme_location' => 'header',  // 1단계에서 설정한 메뉴 위치의 식별자
    'container' => 'nav',         // 메뉴를 감싸는 HTML 요소의 태그 이름
    'container_class' => 'custom-nav' // 메뉴를 감싸는 HTML 요소의 클래스 이름
));

이제 워드프레스 사이트에 접속하면 커스텀 메뉴가 헤더 위치에 표시됩니다. 필요에 따라 메뉴의 스타일링을 CSS를 통해 조정하면 됩니다.

메뉴 숨기는 방법

메뉴는 remove_menu_page 함수를 통해 숨김처리를 할 수 있습니다.

추가 참조

더 자세한 정보와 사용 방법은 워드프레스 공식 개발자 리소스에서 확인하실 수 있습니다.

register_nav_menus() | 기능 | 워드 프레스 개발자 리소스