Создайте пользовательское меню навигации в WordPress без использования плагинов

Независимо от того, какую тему WordPress вы используете, она почти наверняка предоставит хотя бы одно место в меню, где вы можете отобразить свое меню (обычно в заголовке вашего сайта). Меню можно легко создать в административной области и быстро добавить в эти заранее заданные места. Но что делать, если вам нужно другое меню для отображения в другом месте вашего сайта? В этом уроке мы рассмотрим, как создать собственное навигационное меню, которое будет отображаться в выбранном вами месте без использования плагина.

Давайте идти!

Зарегистрируйте новое местоположение пользовательского меню

Первое, что нам нужно сделать, это зарегистрировать местоположение вашего нового пользовательского меню. Для этого откройте файл functions.php вашей активной темы в выбранном текстовом редакторе (например, Sublime) и добавьте следующий код:

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

В этом фрагменте кода мы использовали хук add_action() для добавления функции обратного вызова my_custom_menu() . Это означает, что 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, который мы вставили ранее. В нашем случае: «мое пользовательское меню».

Теперь давайте создадим тестовое меню, чтобы проверить, работает ли оно. Для этого перейдите в «Внешний вид» > «Меню» и начните создавать новое меню.

Дайте меню название «Вторичное меню», выберите «Мое пользовательское меню» для местоположения, а затем нажмите кнопку «Создать меню».

Наконец, добавьте некоторые элементы в меню (например, пункт меню 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; }

Теперь результат будет намного аккуратнее и больше соответствует стилю нашего демо-сайта.

Дополнительная настройка меню

Функция wp_nav_menu(), которую WordPress предоставляет для отображения меню, имеет ряд опций, которые позволяют вам дополнительно настраивать ее.

' тема_местоположение '

Как мы описали выше, этот параметр соответствует ключам, переданным в функцию register_nav_menus() в functions.php.

 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.

'menu_id'

В отличие от опции класса, опция menu_id заменяет текущий идентификатор меню. Сгенерированный HTML для элемента <ul> будет примерно таким.

 <ul class="menu">

Если этот параметр не используется, идентификатором будет слаг меню, который будет увеличиваться при использовании нескольких экземпляров.

'контейнер'

Этот параметр определяет тип элемента, окружающего меню. По умолчанию используется «див». Если, например, вы используете этот код:

 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', ) );

Вы также можете вставлять содержимое до или после каждой ссылки на элемент меню, используя параметры «до» и «после». Это очень полезно, если вы хотите добавить тире или значок или обернуть элементы меню тегом span. Вы можете сами попробовать приведенный ниже пример, чтобы увидеть это в действии:

 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 помогает настраивать меню. Если вы не знаете, что такое класс Walker в WordPress, то следующее, вероятно, не будет иметь особого смысла. Мы рекомендуем сначала прочитать «Знакомство с классом WordPress Walker».

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

Чтобы продемонстрировать класс Walker, мы добавим в наше меню «Подпункт».

Мы переопределим класс Walker по умолчанию, который предоставляет WordPress. Он находится в файле 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.

Вывод

Меню на веб-сайтах очень важны! Возможность иметь полный контроль над размещением и выводом меню расширяет ваши возможности как разработчика темы и открывает ряд новых захватывающих возможностей при разработке веб-сайтов без необходимости полагаться на плагины, которые всегда здорово иметь возможность делать.