플러그인을 사용하지 않고 WordPress에서 사용자 정의 탐색 메뉴 만들기

사용 중인 WordPress 테마에 관계없이 메뉴를 표시할 수 있는 최소한 하나의 메뉴 위치(일반적으로 웹 사이트 헤더)를 거의 확실히 제공합니다. 메뉴는 관리 영역 내부에서 쉽게 생성할 수 있으며 이러한 사전 설정 위치에 빠르게 추가할 수 있습니다. 그러나 웹 사이트의 다른 곳에 표시할 다른 메뉴가 필요한 경우 어떻게 해야 합니까? 이 튜토리얼에서는 플러그인을 사용하지 않고도 원하는 위치에 표시할 수 있는 나만의 탐색 메뉴를 만드는 방법을 살펴보겠습니다.

가자!

새 사용자 정의 메뉴 위치 등록

가장 먼저 해야 할 일은 새 사용자 정의 메뉴의 위치를 ​​등록하는 것입니다. 이렇게 하려면 선택한 텍스트 편집기(예: Sublime)로 활성 테마의 functions.php 파일을 열고 다음 코드를 추가하세요.

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

이 코드에서 우리는 콜백 함수 my_custom_menu() 를 추가하기 위해 add_action() 후크를 사용했습니다. 이는 my_custom_menu() 함수가 init 액션이 호출될 때마다 실행되는 기본 핵심 함수와 함께 실행됨을 의미합니다. "내 사용자 정의 메뉴" 문자열은 관리자 페이지에서 볼 수 있는 읽을 수 있는 버전입니다.

함수 내에서 핵심 함수인 register_nav_menu는 테마에 대한 탐색 메뉴 위치를 등록하는 데 사용됩니다. 여러 메뉴를 등록하려면 register_nav_menus() 를 사용하고 다음과 같이 배열 내부에 메뉴 위치를 정의할 수 있습니다.

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

결과를 확인하려면 모양 > 메뉴 아래의 관리 영역으로 이동하십시오. 사용자 정의 메뉴 위치가 메뉴 설정에 포함되어 있음을 알 수 있습니다.

참고: 이 시점에서 이 위치를 선택하면 메뉴의 프런트엔드에 아무 것도 표시되지 않습니다.

사용자 정의 메뉴를 표시하는 방법

테마에 이미 있는 "데스크톱 가로 메뉴" 아래에 위치할 보조 가로 메뉴에 새 메뉴 위치를 사용하려고 한다고 가정해 보겠습니다.

이를 위해 메뉴를 표시할 테마의 템플릿에 일부 코드를 삽입합니다. 이 예에서는 Twenty Twenty 테마를 사용하고 header.php 파일을 편집하여 메뉴를 표시합니다. 이 파일은 테마 폴더 아래에 있습니다.

편집기를 사용하여 header.php 파일을 열고 33행 부근의 코드에서 이 요소를 찾으십시오.

 <header class="header-footer-group" role="banner">

이 섹션 바로 아래에 새로운 사용자 정의 메뉴 위치인 'my-custom-menu'를 표시하는 코드를 넣을 것입니다.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

theme_location 값은 이전에 붙여넣은 functions.php 코드에서 메뉴에 제공한 이름과 동일해야 합니다. 우리의 경우: 'my-custom-menu'.

이제 이것이 작동하는지 확인하기 위해 테스트 메뉴를 만들어 보겠습니다. 이렇게 하려면 모양 > 메뉴로 이동하여 새 메뉴 만들기를 시작합니다.

메뉴에 "Secondary Menu"라는 제목을 지정하고 위치에 대해 "My Custom Menu"를 선택한 다음 "Create Menu" 버튼을 누르십시오.

마지막으로 메뉴에 일부 항목(예: 메뉴 항목 1, 메뉴 항목 2, 메뉴 항목 3)을 추가한 다음 메뉴를 저장합니다.

이제 프론트엔드에 무엇이 있는지 봅시다.

새로운 메뉴를 보여주긴 했지만 꽤 지저분하지 않나요?

소스 코드를 보면 wp_nav_menu() 함수가 이 HTML 코드를 생성했음을 알 수 있습니다.

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

따라서 코드에 설명된 클래스를 사용하여 메뉴를 아름답게 할 수 있습니다. 이를 위해 일부 CSS를 사용할 것입니다. style.css를 찾은 다음(일반적으로 header.php 파일과 같은 위치에 있음) 편집기로 열어 다음 코드를 추가합니다.

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

결과는 지금 훨씬 더 깔끔해지고 데모 웹사이트의 스타일과 일치하게 될 것입니다.

추가 메뉴 사용자 정의

WordPress가 메뉴를 표시하기 위해 제공하는 wp_nav_menu() 함수에는 추가로 사용자 정의할 수 있는 다양한 옵션이 있습니다.

' 테마_위치 '

위에서 설명한 대로 이 매개변수는 functions.php의 register_nav_menus() 함수에 전달된 키에 해당합니다.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'메뉴_클래스'

메뉴에 대한 고유한 클래스를 지정할 수 있는 ' menu_class ' 옵션이 있습니다.

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

이미 눈치채셨겠지만 클래스는 다른 클래스를 대체하지 않고 대신 ul 요소에 추가됩니다.

'메뉴 아이디'

class 옵션과 달리 menu_id 옵션은 현재 메뉴 ID를 대체합니다. <ul> 요소에 대해 생성된 HTML은 다음과 같습니다.

 <ul class="menu">

이 옵션을 사용하지 않으면 id는 메뉴 슬러그가 되며 여러 인스턴스를 사용할 때 증가합니다.

'컨테이너'

이 매개변수는 메뉴를 둘러싸는 요소의 유형을 정의합니다. 기본값은 'div'입니다. 예를 들어 다음 코드를 사용하는 경우:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

다음과 같은 결과를 얻을 수 있습니다.

'컨테이너_클래스'

메뉴 부모 요소에 적용되는 클래스입니다.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

'before' 및 'after' 매개변수를 사용하여 각 메뉴 항목 링크 앞이나 뒤에 내용을 삽입할 수도 있습니다. 이것은 대시나 아이콘을 앞에 추가하거나 메뉴 항목을 범위 태그로 묶고자 할 때 매우 유용합니다. 아래 예제를 직접 시도하여 실제로 작동하는지 확인할 수 있습니다.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

메뉴 항목에 아이콘을 추가할 수도 있습니다. 예를 들어 Font Awesome 플러그인을 설치하여 아이콘 라이브러리를 포함하고 '이전' 메뉴 옵션을 사용하여 메뉴 항목에 멋진 글꼴 아이콘을 적용해 보십시오.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

플러그인의 아이콘 목록에서 각 아이콘에 대한 코드를 찾을 수 있습니다.

워커 매개변수

마지막으로 Walker 매개변수가 메뉴를 사용자 정의하는 데 도움이 되는 예를 제공합니다. 워드프레스 워커 클래스가 무엇인지 모른다면 다음은 아마도 이해가 되지 않을 것입니다. 먼저 'WordPress Walker 클래스에 익숙해지기'를 읽는 것이 좋습니다.

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Walker 클래스를 보여주기 위해 메뉴에 "하위 항목"을 추가합니다.

WordPress가 제공하는 기본 Walker 클래스를 재정의합니다. 이것은 wp-includes/class-walker-nav-menu.php 파일에 있습니다. 이를 달성하려면 function.php 파일로 이동하여 아래 코드를 삽입하십시오.

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

이제 headers.php에서 메뉴 코드를 다음 코드로 바꿉니다(결과를 비교하기 위해 의도적으로 두 메뉴 버전을 모두 출력합니다).

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

이 코드를 원래 Walker_Nav_Menu 클래스와 비교하면 $tree_type 및 $db_fields 는 그대로 유지되고 나머지는 변경되었음을 알 수 있습니다. 시간을 내서 동일한 메뉴의 이 두 버전에서 코드와 HTML 출력을 모두 비교하고 My_Nav_Menu_Walker 클래스를 가지고 놀면서 자신을 실험해 보십시오.

결론

웹사이트의 메뉴는 분명히 꽤 중요합니다! 메뉴의 배치 및 출력을 완전히 제어할 수 있다는 것은 테마 개발자로서의 능력을 확장하고 항상 할 수 있는 훌륭한 플러그인에 의존하지 않고도 웹사이트를 디자인할 때 흥미롭고 새로운 가능성의 범위를 열어줍니다.