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

Автор: Тимур Савельев | Опубликовано: 27.12.2025

Каскадные меню (выпадающие меню) — один из ключевых элементов навигации на сайте. В WordPress их реализация кажется простой, но часто возникает много вопросов: как сделать многоуровневое меню, как кастомизировать вывод, как добавить динамическое поведение с помощью JavaScript и CSS, а также какие плагины помогут упростить процесс. В этой статье подробно разберём, как создавать и настраивать каскадные меню в WordPress с помощью кода и плагинов.

Что такое каскадные меню и почему они важны для WordPress-сайта

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

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

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

Создание и вывод многоуровневого меню с помощью кода в WordPress

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

Сначала необходимо зарегистрировать меню в файле functions.php вашей темы. Например, добавим основное меню:

function wplink_register_menus() {
    register_nav_menus([
        'primary' => 'Основное меню',
    ]);
}
add_action('after_setup_theme', 'wplink_register_menus');

Теперь вы сможете задать структуру меню в админке WordPress в разделе «Внешний вид» -> «Меню».

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

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

class Wplink_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-sub-menu' : ' sub-menu';
        $output .= "\n$indent<ul class='dropdown-menu$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';
        if (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'dropdown';
        }
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

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

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        if (in_array('menu-item-has-children', $classes)) {
            $atts['class'] = 'dropdown-toggle';
            $atts['data-toggle'] = 'dropdown';
            $atts['aria-haspopup'] = 'true';
        }

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $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 );
    }
}

Подключите меню в нужном месте шаблона (например, в header.php):

wp_nav_menu([
    'theme_location' => 'primary',
    'menu_class' => 'nav navbar-nav',
    'container' => false,
    'walker' => new Wplink_Walker_Nav_Menu()
]);

Так вы получите многоуровневое меню с разметкой для стилизации и JS-поддержки.

Настройка стилей и поведения каскадных меню

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

.nav ul.sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    padding: 10px 0;
    min-width: 180px;
    z-index: 9999;
}

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

.nav ul.sub-menu li {
    position: relative;
}

.nav ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%;
}

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

jQuery(document).ready(function($) {
    $('.menu-item-has-children > a').on('click', function(e) {
        var submenu = $(this).next('.sub-menu');
        if (submenu.length && !submenu.is(':visible')) {
            e.preventDefault();
            submenu.slideToggle();
        }
    });
});

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

Лучшие плагины для каскадных меню в WordPress

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

1. Max Mega Menu

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

Особенности:

Поддержка drag-and-drop в настройках меню
Адаптивное поведение для мобильных устройств
Возможность создавать мегаменю с колонками и виджетами

Установить можно через админку или по ссылке: https://ru.wordpress.org/plugins/megamenu/

2. WP Responsive Menu

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

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

3. UberMenu

Премиум-плагин с расширенными возможностями для мегаменю, многоуровневых меню, интеграции с WooCommerce и кастомными постами.

Если проект крупный и нужна максимальная гибкость, UberMenu — отличный выбор.

Пример интеграции плагина Max Mega Menu с темой Reboot от WPSHOP

Для тех, кто использует тему Reboot от WPSHOP, плагин Max Mega Menu отлично вписывается. После установки и активации:

Перейдите в «Внешний вид» -> «Меню» и выберите меню для редактирования.
Включите Max Mega Menu для нужного меню, отметив чекбокс «Enable» рядом с меню.
Настройте стили и поведение через пункт «Mega Menu» в админке.

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

Как сделать кастомное динамическое каскадное меню с использованием WP_Query

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

Пример функции wplink_dynamic_category_menu(), которая выводит категории и их дочерние категории в виде каскадного меню:

function wplink_dynamic_category_menu( $taxonomy = 'category', $parent = 0 ) {
    $terms = get_terms([
        'taxonomy' => $taxonomy,
        'parent' => $parent,
        'hide_empty' => false,
    ]);

    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
        echo '<ul class="sub-menu">';
        foreach ( $terms as $term ) {
            $has_children = get_terms([
                'taxonomy' => $taxonomy,
                'parent' => $term->term_id,
                'hide_empty' => false
            ]);
            $class = ! empty( $has_children ) ? 'menu-item-has-children' : '';
            echo '<li class="' . esc_attr( $class ) . '">';
            echo '<a href="' . esc_url( get_term_link( $term ) ) . '">' . esc_html( $term->name ) . '</a>';
            if ( ! empty( $has_children ) ) {
                wplink_dynamic_category_menu( $taxonomy, $term->term_id );
            }
            echo '</li>';
        }
        echo '</ul>';
    }
}

Выводите меню в шаблоне так:

echo '<nav class="nav"><ul class="nav-menu">';

wplink_dynamic_category_menu();

echo '</ul></nav>';

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