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

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

Почему важно использовать многоуровневое меню

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

Рассмотрим примеры создания меню с подменю на чистом PHP и WordPress API, а также как улучшить вывод с помощью популярных плагинов.

Создание меню с подменю через стандартный WordPress API

Начнём с базового варианта. В админке WordPress создайте меню через Внешний вид → Меню. Добавьте пункты и вложите их друг в друга с помощью drag&drop.

Для вывода меню в шаблоне используйте функцию wp_nav_menu(). Пример базового вызова:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
    'container' => 'nav',
    'container_class' => 'main-navigation'
));

Чтобы зарегистрировать местоположение меню, добавьте в файл functions.php следующий код:

function wptavern_register_menus() {
    register_nav_menus(array(
        'primary' => __('Основное меню', 'wptavern'),
    ));
}
add_action('init', 'wptavern_register_menus');

WordPress автоматически выводит вложенные списки в меню, используя теги <ul> и <li> с классом menu-item-has-children для пунктов с подменю.

Кастомизация вывода меню и подменю через Walker

Если нужно изменить HTML-структуру меню, например, добавить иконки или обернуть пункты в дополнительные контейнеры, стоит создать класс, наследующий Walker_Nav_Menu. Вот упрощённый пример:

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

    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $indent = ( $depth ) ? str_repeat("\t", $depth) : '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item';
        $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->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>' . $args->link_before . $title . $args->link_after . '</a>';
        $item_output .= $args->after;

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

    function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= "</li>\n";
    }
}

Замените стандартный вызов wp_nav_menu на:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new Wptavern_Walker_Nav_Menu(),
    'menu_class' => 'main-menu',
));

Так вы получите полный контроль над HTML и сможете добавить любые атрибуты и классы.

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

Для улучшения UX полезно визуально выделять пункты с подменю, например, добавляя стрелки. Можно сделать это через CSS, но для большей гибкости добавим иконку через Walker.

Измените метод start_el так, чтобы после названия пункта с подменю добавлялась стрелка:

if (in_array('menu-item-has-children', $classes)) {
    $item_output .= ' <span class="submenu-arrow">▸</span>';
}

Добавьте в CSS стили для .submenu-arrow, чтобы стрелка выглядела аккуратно и меняла направление при открытии подменю.

Использование плагинов для удобного управления многоуровневыми меню

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

• Max Mega Menu — позволяет создавать мегаменю с несколькими колонками, виджетами и анимациями.
• WP Responsive Menu — адаптивное меню с поддержкой многоуровневых пунктов для мобильных устройств.
• Clearfy Pro (ссылка: https://wpshop.ru/clearfy-pro/) — оптимизация и улучшение функционала WordPress, в том числе и меню.

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

Адаптивность многоуровневого меню: работа с CSS и JS

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

• Скрыть подменю по умолчанию и показывать их по клику или тапу.
• Добавить иконки для открытия подменю.
• Использовать CSS media queries для адаптации стиля меню.
• При необходимости добавить JS для управления открытием и закрытием подменю.

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

.main-menu ul.sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.main-menu li:hover > ul.sub-menu {
    display: block;
}

@media (max-width: 768px) {
    .main-menu ul.sub-menu {
        position: static;
        box-shadow: none;
        padding-left: 20px;
    }
}

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

document.querySelectorAll('.submenu-arrow').forEach(function(arrow) {
    arrow.addEventListener('click', function(e) {
        e.preventDefault();
        const submenu = this.parentElement.querySelector('ul.sub-menu');
        if (submenu) {
            submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
        }
    });
});

Вывод

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

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