Как добавить nestable (вложенные) меню в тему WordPress

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

Почему важны вложенные меню в теме WordPress

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

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

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

Регистрация меню в функции темы

Первый шаг — зарегистрировать меню в файле functions.php вашей темы. Это стандартная практика для добавления кастомных меню.

function wp_theme_register_menus() {
    register_nav_menus([
        'primary' => 'Главное меню',
        'footer' => 'Меню в подвале'
    ]);
}
add_action('after_setup_theme', 'wp_theme_register_menus');

После регистрации меню в админке WordPress в разделе Внешний вид → Меню появятся новые места для привязки меню.

Вывод многоуровневого меню в теме

Для вывода меню с вложенными элементами используйте функцию wp_nav_menu() с правильными параметрами. Важный параметр — walker, который позволяет кастомизировать HTML разметку вложенных меню.

Без кастомного walker вложенность будет, но стилизация может быть неудобной. Мы создадим класс-обёртку для более точного контроля.

Создание кастомного Walker класса

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

class WPTheme_Nestable_Walker 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\">\n";
    }

    function start_el(  &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $indent = ( $depth ) ? str_repeat("\t", $depth) : '';
        $classes = empty( $item->classes ) ? [] : (array) $item->classes;
        $classes[] = 'menu-item';
        if ($depth === 0) {
            $classes[] = 'menu-item-top';
        } else {
            $classes[] = 'menu-item-nested';
        }
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $output .= $indent . '<li' . $class_names . '>';

        $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 . '>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

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

Вывод меню в теме с использованием кастомного Walker

В нужном месте темы (например, header.php) используйте следующий вызов:

wp_nav_menu([
    'theme_location' => 'primary',
    'container' => 'nav',
    'container_class' => 'main-navigation',
    'menu_class' => 'menu',
    'walker' => new WPTheme_Nestable_Walker()
]);

Так вы выведете меню с кастомной структурой и классовой системой для вложенных элементов.

Стилизация вложенного меню

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

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu > li {
    position: relative;
    display: inline-block;
}
.menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
.sub-menu, .sub-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 180px;
}
.menu li:hover > .sub-menu, .menu li:hover > .sub-sub-menu {
    display: block;
}
.sub-menu li {
    display: block;
}
.sub-menu li a {
    padding: 8px 12px;
}

Эти стили обеспечивают выпадающее меню с плавким появлением вложенных списков при наведении мыши.

Использование плагина Clearfy для оптимизации меню

Если вы используете плагин Clearfy, он может помочь оптимизировать вывод меню и очистить лишние элементы кода, повысив производительность:

• Удаление неиспользуемых скриптов и стилей в меню.
• Оптимизация HTML разметки.
• Кеширование меню для ускорения рендеринга.

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

Поддержка мобильных устройств и адаптивность меню

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

Пример простого скрипта для переключения вложенных меню:

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu li.menu-item-has-children > a');
    menuItems.forEach(function(menuLink) {
        menuLink.addEventListener('click', function(e) {
            e.preventDefault();
            const submenu = this.nextElementSibling;
            if (submenu) {
                submenu.style.display = (submenu.style.display === 'block') ? 'none' : 'block';
            }
        });
    });
});

Добавьте в класс меню menu-item-has-children для пунктов с дочерними элементами. WordPress добавляет этот класс автоматически, если в меню есть вложения.

Вывод

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

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

Если хотите более продвинутые эффекты или интеграцию с Gutenberg, рассмотрите современные темы, например, Root, которые поддерживают адаптивные и вложенные меню из коробки.