워드프레스 내비게이션 메뉴에 특정 기능의 메뉴 아이템 추가하기

by Jinn

워드프레스의 메뉴 시스템은 기본으로 테마 정의에 의존하는 것으로, 테마에서 정의한 ‘메뉴 위치(Menu Location)’를 기준으로 특정 테마 템플릿 파일에 함수를 사용하여 출력 위치를 정의하는 것이 일반적입니다. 이러한 테마의 사전 정의 기준이 있기에 관리페이지에서 ‘메뉴 이름(Menu Name)’과 ‘메뉴 아이템(Menu Item)’을 생성하고 특정 메뉴 위치 출력을 선택하면, 사이트에서 해당 메뉴 이름의 메뉴 아이템이 출력되는 것입니다.

워드프레스 관리페이지 메뉴 아이템 추가

워드프레스 메뉴 위치 정의와 메뉴 출력

앞의 그림은 관리페이지 메뉴 생성 페이지에서 메뉴 이름과 메뉴 아이템을 생성하고 메뉴 위치를 선택한 화면으로 테마 2016(twentysixteen)을 활성화한 것입니다. ‘메뉴 위치’라는 것은 프로그램적 명칭을 뜻하는 것으로 테마 템플릿 파일에 관리페이지에서 생성한 메뉴 이름의 메뉴 아이템을 출력하기 위한 것입니다. 메뉴 위치는 theme_location 이름의 파라미터에 지정하므로 표기에 관하여 약간 주의할 필요가 있습니다.

다음은 테마 2016 functions.php 파일에 있는 2개의 메뉴 위치 정의 코드로 primary, social 2개의 메뉴 위치를 등록한 것입니다.

// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'twentysixteen' ),
    'social'  => __( 'Social Links Menu', 'twentysixteen' ),
) );

다음은 2016 테마 header.php 파일의 메뉴 출력 관련 코드인데, wp_nav_menu 함수를 사용하여 primary 메뉴 위치를 출력하도록 정의한 것입니다.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
 ) );

앞의 그림에서 ‘main’ 메뉴 이름을 ‘Primary Menu’ 메뉴 위치와 연결하였는데, ‘Primary Menu’는 primary 메뉴 위치의 번역 텍스트이므로 primary 메뉴 위치에는 ‘main’ 메뉴 이름의 메뉴 아이템을 출력한다는 뜻이 됩니다. 따라서 위의 코드를 추가한 위치에 해당 메뉴 아이템이 출력됩니다.

관리페이지에서 생성한 메뉴 아이템의 사이트 출력

관리페이지에서 메뉴 이름과 메뉴 아이템 생성, 테마의 메뉴 위치 및 출력 함수 정의에 의한 사이트 출력 결과가 위의 그림입니다.

특정 기능을 위한 메뉴 아이템 추가

워드프레스 사이트에서 생성한 포스트(post, page 등), 분류(category 등), 사용자 정의 메뉴와 링크는 테마에서 정의한 메뉴 위치와 메뉴 이름에 속한 메뉴 아이템으로 쉽게 추가할 수 있습니다. 그러나, 특정 기능을 위한 메뉴 아이템은 관리페이지에서 추가할 수 없습니다. 특정 기능이라는 것은 워드프레스 메뉴에 프로그램 로직을 추가한다는 뜻으로, 그 수가 많고 사용자의 의도에 따라 다양하므로 하지만, 다음 2가지 범주만 이 포스트에서 알아봅니다.

  • 특정 기능(함수)을 정의한 함수 실행의 메뉴 아이템
  • 메뉴 클릭 시 모달(modal) 실행

위 목록을 위한 메뉴 아이템은 저장소 플러그인이 아니라면 코드를 직접 정의하여 구현할 수 있으며, 워드프레스는 이를 쉽게 구현하기 위한 wp_nav_menu_items 훅을 제공합니다. 물론, 특정 기능이 아니라 이미지 또는 단순 텍스트나 링크를 포함한 메뉴 아이템 등 무엇이든 가능합니다. 다음은 이 훅을 사용하여 메뉴 아이템을 추가하는 기본 예시입니다.

add_filter( 'wp_nav_menu_items', 'custom_add_menu_item', 10, 2 );
function custom_add_menu_item( $items, $args ) {
    if( $args->theme_location == '메뉴 위치' ){
        $items .= '<li class="menu-item"><a href="#">New Menu</a></li>';
    }
    return $items;
}

3번 줄 ‘메뉴 위치’ 글자를 원하는 메뉴 위치로 변경하면 되는데, 이 포스트 기준에서 primary로 변경하면 됩니다. 4번 줄에서 출력이나 원하는 기능의 코드를 정의하면 되며, 코드에서는 링크가 있는 보통의 메뉴를 추가한 예입니다.

로그인, 로그아웃 상태에 따른 메뉴 아이템

이 포스트는 워드프레스 기본 테마인 2016 테마를 사용합니다. 따라서 2016 테마 메뉴 위치의 하나인 primary에 ‘로그인 및 로그아웃 링크와 글자가 자동으로 변경되며 로그인 및 로그아웃 후 직전의 페이지로 이동’하는 메뉴 아이템을 추가한다면 다음과 같습니다.

add_filter( 'wp_nav_menu_items', 'custom_add_menu_item', 10, 2 );
function custom_add_menu_item( $items, $args ) {
    if( $args->theme_location == 'primary' ){
        $items .= '<li class="menu-item">' . wp_loginout( $_SERVER['REQUEST_URI'], false ) . '</li>';
    }
    return $items;
}

3번 줄의 primary, 4번 줄의 wp_loginout 함수를 확인하면 금방 이해할 수 있는데, 이때 4번 줄의 menu-item CSS 클래스는 테마의 스타일에 자연스럽게 어울려 추가 CSS 정의의 번거로움을 막기 위해 추가한 것입니다. 별도의 CSS 정의를 원한다면 Html 태그 및 CSS 클래스를 자유롭게 설정하면 됩니다.

로그인, 로그아웃 상태에 따른 메뉴 아이템

2016 테마의 functions.php 파일에 추가하면 결과를 확인할 수 있으며, 2016 테마가 아니어도 운영하는 워드프레스 사이트가 있다면 사용하는 테마의 functions.php 파일에 추가하면 확인할 수 있습니다. 또, functions.php 파일이 아닌 테마가 로드하는 특정 파일이나 간단한 플러그인 구성으로도 결과를 볼 수 있습니다. 이 포스트에서는 functions.php 파일을 기준으로 정합니다.

워드프레스 기본 검색 폼을 메뉴 아이템에 추가

다음은 get_search_form 함수를 사용하여 워드프레스 기본 검색 폼을 메뉴 아이템에 추가하는 코드입니다.

add_filter( 'wp_nav_menu_items', 'custom_add_menu_item', 10, 2 );
function custom_add_menu_item( $items, $args ) {
    if( $args->theme_location == 'primary' ){
        return $items . '<li class="menu-item">' . get_search_form( false ) . '</li>';
    }
    return $items;
}

4번 줄 코드가 앞의 로그인 관련 코드와 비교하여 어떤 것이 다른지 확인하세요.

워드프레스 기본 검색 폼을 메뉴 아이템에 추가

메뉴 아이템 클릭할 때 모달 실행

‘모달(modal)’ 출력을 위해 외부 소스를 사용하는 때도 있지만, 워드프레스는 수정한 jQuery ThickBox 라이브러리를 내장하고 있으므로 필요할 때 호출하여 쉽게 사용할 수 있습니다. 이에 관한 내용은 생략하며, 다음 그림처럼 ‘Modal’ 메뉴 아이템을 추가하고 해당 메뉴를 클릭하면 모달을 실행해봅니다.

메뉴 아이템 클릭할 때 모달 실행

다음은 위 그림의 결과를 위한 코드입니다.

add_filter( 'wp_nav_menu_items', 'custom_add_menu_item', 10, 2 );
function custom_add_menu_item( $items, $args ) {
    if( $args->theme_location == 'primary' ){
        add_thickbox(); ?>
        <div id="my-content-id" style="display:none;">
            <h1 style="padding-top: 30px;text-align:center">Nav Modal</h1>
            <p style="padding-top: 20px;text-align:center">This is my hidden content! It will appear in ThickBox when the menu item is clicked.</p>
        </div>
        <?php
        $items .= '<li class="menu-item"><a href="#TB_inline?width=300&height=300&inlineId=my-content-id" class="thickbox">Modal</a></li>';
    }
    return $items;
}

위의 코드는 ‘Modal’ 메뉴 아이템을 추가하고, 클릭 시 사이트 포스트 등의 콘텐츠가 아닌 독립 정보의 모달을 실행한 것입니다. 모달에 추가할 정보 또는 다른 기능도 역시 자유롭게 정의할 수 있음은 따로 안내하지 않아도 인지할 수 있을 것입니다.

4번 줄 add_thickbox 함수, 5번에서 8번 줄 모달 출력 마크업, 10번 줄의 메뉴 아이템 추가에서 모달 실행을 위한 링크는 워드프레스 ThickBox 정보를 코덱스에서 검색하면 바로 나오므로 이 포스트에서는 참고 내용으로 생각하세요.

포스트에서 알아본 몇 가지 메뉴 아이템을 기본으로 이해하여 다양한 메뉴 아이템을 추가해보세요.