В этой статье мы подробно разберём, как создать многоуровневую навигацию в WordPress. Многие разработчики и владельцы сайтов сталкиваются с задачей сделать удобное, логичное и кастомное меню, которое позволит посетителям быстро ориентироваться по сайту. Мы рассмотрим как использовать стандартные возможности WordPress, так и примеры плагинов, а также напишем собственные функции для вывода меню с несколькими уровнями вложенности.
Почему важно многоуровневое меню в WordPress
Навигация — это ключевой элемент любого сайта. Особенно это актуально для порталов с большим количеством категорий, товаров или статей. Многоуровневое меню позволяет сгруппировать страницы по смыслу, сделать интерфейс чище и понятнее. Без грамотной структуры пользователи могут запутаться и быстро уйти с сайта.
Стандартный функционал WordPress уже умеет работать с многоуровневыми меню, но часто нужно кастомизировать вывод, например, добавить иконки, кастомные классы или специфическое поведение для мобильных устройств.
Создание многоуровневого меню через стандартный функционал WordPress
WordPress предоставляет встроенный механизм для меню через панель администратора: Внешний вид > Меню. Там можно добавлять страницы, категории и произвольные ссылки, а также менять порядок и создавать вложенность простым перетаскиванием.
Для вывода меню в шаблоне используется функция wp_nav_menu(). Она принимает массив параметров, которые позволяют задать класс контейнера, обертку для ссылок, глубину меню и многое другое.
wp_nav_menu(array(
'theme_location' => 'primary', // зарегистрированное место меню
'container' => 'nav',
'container_class' => 'main-navigation',
'menu_class' => 'menu',
'depth' => 3, // количество уровней вложенности
));Параметр depth отвечает за количество уровней вложенности меню, которые будут показаны. Если установить 0 — будут показаны все уровни.
Регистрация мест для меню
Для начала нужно зарегистрировать в файле functions.php темы новые места для меню, если они ещё не зарегистрированы:
function wpcodes_register_menus() {
register_nav_menus(array(
'primary' => 'Основное меню',
'footer' => 'Меню в подвале',
));
}
add_action('after_setup_theme', 'wpcodes_register_menus');После этого в админке появится возможность назначать меню для этих областей.
Кастомизация вывода многоуровневого меню через Walker_Nav_Menu
Если стандартного вывода недостаточно, можно написать класс-наследник Walker_Nav_Menu, который позволяет гибко управлять HTML-структурой меню.
Вот простой пример класса, который добавляет кастомный класс к элементам с подменю и меняет разметку:
class WPCodes_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = null ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu level-$depth\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
if (in_array('menu-item-has-children', $classes)) {
$classes[] = 'has-submenu';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$output .= "<li" . $class_names . ">";
$attributes = '';
if (!empty($item->url)) {
$attributes .= ' href="' . esc_attr($item->url) . '"';
}
$title = apply_filters('the_title', $item->title, $item->ID);
$item_output = "<a" . $attributes . ">" . $title . "</a>";
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
}Чтобы использовать этот класс, передайте его в параметры wp_nav_menu():
wp_nav_menu(array(
'theme_location' => 'primary',
'walker' => new WPCodes_Walker_Nav_Menu(),
'depth' => 3,
));Примеры плагинов для многоуровневого меню в WordPress
Если не хочется писать код, можно воспользоваться готовыми плагинами, которые расширяют функционал меню:
- Max Mega Menu — позволяет создавать красивые многоуровневые меню с поддержкой виджетов, иконок, кастомных стилей.
- WP Mega Menu — простой в использовании плагин с drag&drop конструктором и адаптивной версткой.
- UberMenu — премиум-решение с огромными возможностями кастомизации и интеграцией с WooCommerce.
Эти плагины полезны, если нужно быстро получить сложное меню с минимальными усилиями, но иногда лучше написать своё, чтобы не нагружать сайт лишним кодом.
Как добавить иконки к пунктам многоуровневого меню
Часто в многоуровневом меню полезно показывать иконки для категорий или важных страниц. Для этого можно использовать поля меню, например, через фильтр nav_menu_item_title.
Пример добавления иконки FontAwesome к пункту меню с CSS классом menu-item-has-icon:
function wpcodes_add_menu_icons($title, $item, $args, $depth) {
if (in_array('menu-item-has-icon', $item->classes)) {
$icon_html = '<i class="fas fa-star"></i> ';
return $icon_html . $title;
}
return $title;
}
add_filter('nav_menu_item_title', 'wpcodes_add_menu_icons', 10, 4);Для этого в админке меню нужно добавить пунктам класс menu-item-has-icon. Так можно гибко менять внешний вид без изменения шаблона.
Оптимизация многоуровневого меню для мобильных устройств
Важно, чтобы меню оставалось удобным на смартфонах и планшетах. Для этого обычно используют скрытие подменю в гамбургер-меню и раскрытие по нажатию.
Можно добавить простую jQuery-логику для открытия вложенных пунктов:
jQuery(document).ready(function($){
$('.menu-item-has-children > a').on('click', function(e){
if ($(window).width() <= 768) {
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle();
}
});
});Так посетители смогут удобно раскрывать подменю на мобильных устройствах без перехода по ссылке родителя.
Вывод
Создание многоуровневого меню в WordPress — задача решаемая с помощью стандартного функционала, кастомных классов Walker и готовых плагинов. Главное — понимать структуру меню, правильно регистрировать места и учитывать мобильную адаптивность. Используйте примеры из статьи, чтобы сделать навигацию удобной и понятной для пользователей.