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

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

Зачем нужно многоуровневое меню с подменю в WordPress

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

Кроме того, правильно сделанное многоуровневое меню повышает юзабилити и положительно влияет на SEO, так как облегчает индексацию сайта поисковыми системами.

WordPress из коробки поддерживает создание подменю, но для более гибкой настройки часто требуется доработка кода или установка плагинов.

Создание многоуровневого меню через админку WordPress

Самый простой способ — использовать стандартный интерфейс в разделе «Внешний вид» → «Меню».

Перейдите в админке WordPress в «Внешний вид» → «Меню».
Создайте новое меню или выберите существующее.
Добавьте необходимые страницы, категории или произвольные ссылки.
Для создания подменю просто перетащите пункт меню чуть правее — он станет дочерним по отношению к предыдущему.
Сохраните меню и назначьте его в нужную позицию темы (например, основное меню).

Этот способ подходит для большинства случаев, однако внешний вид подменю зависит от темы. Если нужно изменить стиль или поведение, понадобится кастомизация.

Кастомизация многоуровневого меню через код

Для тонкой настройки меню можно использовать фильтры и хуки WordPress, а также добавить свой CSS и JavaScript.

Пример создания кастомного walker класса для меню

Walker — это класс, который отвечает за вывод HTML меню. Создадим собственный класс с префиксом wpone_, чтобы лучше контролировать структуру меню и добавить нужные классы для подменю.

class WPONE_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 wpone-submenu' : 'sub-sub-menu wpone-subsubmenu';
        $output .= "\n$indent<ul class='" . $submenu_class . "'>\n";
    }
}

Чтобы использовать этот класс, при вызове wp_nav_menu добавьте параметр walker:

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

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

Добавление CSS для подменю

Пример базового CSS для многоуровневого меню, который сделает подменю выпадающими при наведении:

.wpone-submenu {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-top: 5px;
    z-index: 9999;
}

.menu-item-has-children:hover > .wpone-submenu {
    display: block;
}

.wpone-subsubmenu {
    left: 100%;
    top: 0;
    position: absolute;
    display: none;
}

.wpone-submenu .menu-item-has-children:hover > .wpone-subsubmenu {
    display: block;
}

Этот CSS работает для двухуровневых и трёхуровневых меню, делая подменю видимыми при наведении курсора мыши.

Плагины для расширенного управления многоуровневыми меню

Если необходимо быстро получить красивое и функциональное меню с множеством настроек, можно установить один из следующих плагинов:

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

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

Практическое решение с использованием плагина Max Mega Menu и кастомного кода

Рассмотрим пример, как совместить плагин Max Mega Menu с кастомным walker классом для расширенной кастомизации.

1. Установите и активируйте плагин Max Mega Menu.

2. В настройках меню активируйте Max Mega Menu для нужного меню.

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

4. Добавьте CSS и JS для нужного поведения подменю.

5. Если нужно вывести дополнительный HTML или виджеты в подменю, используйте функционал плагина.

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

function wpone_add_menu_item_custom_atts( $atts, $item, $args, $depth ) {
    if ( $depth > 0 ) {
        $atts['data-depth'] = $depth; // Добавляем атрибут data-depth для подменю
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'wpone_add_menu_item_custom_atts', 10, 4 );

Этот код помогает добавлять дополнительные атрибуты, с которыми можно работать в CSS или JS для более тонкой настройки поведения меню.

Советы по улучшению UX многоуровневого меню

Для удобства пользователей и корректной работы меню стоит учесть несколько важных моментов:

Адаптивность. На мобильных устройствах выпадающие меню должны корректно открываться по нажатию, т.к. hover там не работает.
Управление клавиатурой. Обеспечьте возможность навигации по меню с клавиатуры, чтобы сайт был доступен.
Скорость загрузки. Не перегружайте меню тяжелыми изображениями и скриптами.
SEO. Используйте семантическую разметку и правильное вложение списков.

Заключение

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

Если нужно быстро и просто — используйте стандартный редактор меню. Для более тонкой настройки — пишите собственные walker классы и добавляйте CSS/JS. А если хотите получить мощный инструмент без программирования — обратите внимание на плагины, например, Max Mega Menu.

Для скачивания плагинов с официального репозитория или ознакомления с дополнительными возможностями рекомендуем посетить wpshop.ru.