Как создать многоуровневую навигацию в WordPress: пошаговое руководство

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

Основы создания многоуровневого меню в WordPress

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

Чтобы создать подменю, достаточно перетащить пункт меню чуть правее под родительский элемент. На фронтенде тема выводит это вложенное меню с помощью функции wp_nav_menu(), которая автоматически формирует вложенные списки <ul><li>.

Пример базового кода для вывода меню:

<?php wp_nav_menu(array('theme_location' => 'primary')); ?>

Однако для правильного отображения многоуровневого меню нужно, чтобы тема поддерживала необходимые стили и скрипты для раскрытия подменю.

Регистрация меню в functions.php

Для начала зарегистрируем меню в файле functions.php вашей темы, если это не сделано:

function wp0_register_menus() {
    register_nav_menus(array(
        'primary' => __('Основное меню', 'wp0'),
    ));
}
add_action('after_setup_theme', 'wp0_register_menus');

Теперь в админке появится возможность создавать меню в локации «Основное меню».

Настройка многоуровневого меню с кастомным walker-объектом

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

Для этого создается класс-обертка, наследующий Walker_Nav_Menu. Ниже пример простого кастомного walker для добавления класса к субменю:

class WP0_Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $submenu_class = ($depth === 0) ? 'sub-menu-level-1' : 'sub-menu-level-2';
        $output .= "\n$indent<ul class=\"$submenu_class\">\n";
    }
}

Использование кастомного walker:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new WP0_Custom_Walker_Nav_Menu()
));

Таким образом, можно контролировать разметку каждого уровня меню.

Плагины для создания и управления многоуровневой навигацией

Если вы хотите расширенные возможности и удобный UI для создания сложных меню, обратите внимание на эти плагины:

• Max Mega Menu — позволяет создавать многоуровневые меню с выпадающими панелями, поддерживает виджеты внутри меню. Очень гибкий и популярный.
• WP Mega Menu — визуальный конструктор меню с drag-n-drop, поддерживает иконки, колонки и кастомные стили.
• UberMenu — премиум плагин с продвинутым функционалом для создания профессиональных многоуровневых меню с адаптивностью.

Все они интегрируются с WordPress меню и позволяют быстро создавать сложную навигацию без кодинга.

Пример кастомного фильтра для добавления иконок к пунктам меню

Часто в многоуровневых меню хочется добавить иконки к пунктам. Для этого можно использовать фильтр nav_menu_item_title:

function wp0_add_menu_icons($title, $item, $args, $depth) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $title .= ' <span class="submenu-arrow">▼</span>';
    }
    return $title;
}
add_filter('nav_menu_item_title', 'wp0_add_menu_icons', 10, 4);

Этот код добавляет стрелку к пунктам, у которых есть подменю, улучшая UX.

Советы по адаптивности и UX многоуровневого меню

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

2. Добавьте плавные анимации раскрытия, чтобы переходы были приятными.

3. Обязательно тестируйте меню на разных устройствах и браузерах.

4. Используйте aria-атрибуты для улучшения доступности меню для пользователей с ограниченными возможностями.

Заключение

Создание многоуровневой навигации в WordPress — задача, решаемая как с помощью стандартных инструментов, так и с помощью кастомных решений и плагинов. Важно понимать, как работает меню на уровне кода, чтобы при необходимости быстро адаптировать и расширять функциональность.

Для быстрого старта рекомендуем использовать плагины Max Mega Menu или WP Mega Menu, а для тонкой настройки — писать собственные walker-объекты и фильтры.

Больше полезных плагинов и инструментов для WordPress ищите на WPSHOP.RU.