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

Автор: Ярослав Смирнов | Опубликовано: 13.03.2026

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

Стандартное создание многоуровневого меню в WordPress

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

Пошаговая инструкция:

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

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

Ограничения стандартного меню

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

Кастомизация многоуровневого меню с помощью PHP: создание собственного Walker класса

Чтобы получить полный контроль над HTML-разметкой меню, можно создать собственный класс-наследник Walker_Nav_Menu. Это позволит добавить, изменить или убрать обертки, классы и атрибуты, необходимые для вашего дизайна и функционала.

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

class Wpinc_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' : 'sub-sub-menu';
        $output .= "\n$indent<ul class=\"$submenu_class\" data-level=\"" . ($depth + 1) . "\">\n";
    }
}

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

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

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

Использование плагинов для расширения функционала многоуровневых меню

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

Пример настройки Max Mega Menu

После установки и активации плагина:

Перейдите в Внешний вид > Menus.
Выберите меню, в котором хотите включить мегаменю.
Отметьте чекбокс «Enable» рядом с нужными пунктами меню, чтобы активировать мегаменю.
Перейдите в Appearance > Max Mega Menu Settings для настройки стилей и поведения.

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

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

Часто требуется добавить к пунктам меню иконки и сделать меню удобным на мобильных устройствах. Рассмотрим пример, как это сделать с помощью кастомного Walker и CSS.

Добавление иконок к пунктам меню

Для начала добавим поле для иконок в пункты меню через фильтр wp_nav_menu_objects и пользовательское поле в админке меню.

Пример функции для вывода иконок (иконки можно хранить в мета-данных пункта меню):

add_filter('walker_nav_menu_start_el', 'wpinc_add_menu_icon', 10, 4);
function wpinc_add_menu_icon($item_output, $item, $depth, $args) {
    $icon_class = get_post_meta($item->ID, '_menu_icon_class', true);
    if ($icon_class) {
        $icon_html = '<i class="' . esc_attr($icon_class) . '"></i> ';
        $item_output = $icon_html . $item_output;
    }
    return $item_output;
}

Для добавления поля в админке меню можно использовать плагин WPCommunity или написать собственный метабокс.

Обеспечение адаптивности меню

Для мобильных устройств рекомендуется использовать кнопку-гамбургер, которая при клике будет показывать/скрывать меню и подменю. Пример простой реализации на jQuery:

jQuery(document).ready(function($){
    $('.menu-toggle').on('click', function(){
        $('.main-navigation ul.menu').slideToggle();
    });
    $('.menu-item-has-children > a').on('click', function(e){
        if($(window).width() <= 768) {
            e.preventDefault();
            $(this).siblings('.sub-menu').slideToggle();
        }
    });
});

Добавьте в шаблон кнопку с классом menu-toggle и стилизуйте меню через CSS для корректного отображения на всех устройствах.

Заключение по теме многоуровневых меню

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

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

Если нужно быстро и удобно управлять многоуровневыми меню, обратите внимание на плагин WPCommunity — он содержит расширенные функции для меню и других элементов WordPress.

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