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

Автор: Игорь Захаров | Опубликовано: 02.12.2025

Что такое многоуровневое меню в WordPress и зачем оно нужно

Многоуровневое меню (nestable menu) — это навигационный элемент, состоящий из пунктов, которые могут иметь вложенные подменю. Такой тип меню особенно полезен для сайтов с большим количеством разделов и контента, позволяя пользователям быстро ориентироваться и находить нужную информацию.

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

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

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

Для начала убедимся, что в теме объявлено место для меню. В файле functions.php вашей темы добавьте регистрацию меню:

function wplistru_register_menus() {
    register_nav_menus(array(
        'primary-menu' => __('Основное меню', 'wplistru')
    ));
}
add_action('after_setup_theme', 'wplistru_register_menus');

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

wp_nav_menu(array(
    'theme_location' => 'primary-menu',
    'container' => 'nav',
    'container_class' => 'wplistru-primary-menu',
    'menu_class' => 'wplistru-menu',
    'depth' => 3,
    'fallback_cb' => false
));

Параметр depth указывает, сколько уровней вложенности будет поддерживаться. Значение 3 позволяет создавать меню с тремя уровнями вложенности.

Важно понимать, что для отображения подменю меню в HTML должны использоваться вложенные списки <ul>. WordPress автоматически генерирует правильную структуру, если пункты меню организованы в админке — Внешний вид → Меню.

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

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

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

class Wplistru_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-' . $item->ID;
        if(in_array('menu-item-has-children', $classes)) {
            $classes[] = 'dropdown';
        }
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter( $classes ), $item, $args, $depth));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth);
        $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 );
    }
}

Чтобы использовать этот класс, вызовите меню так:

wp_nav_menu(array(
    'theme_location' => 'primary-menu',
    'walker' => new Wplistru_Walker_Nav_Menu(),
    'depth' => 3,
    'container' => 'nav',
    'menu_class' => 'wplistru-menu'
));

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

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

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

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

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

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

После активации Max Mega Menu перейдите в Внешний вид → Меню, включите опцию Max Mega Menu для вашего меню, затем перейдите в Mega Menu Settings. Здесь можно настроить колонки, добавить виджеты в подменю и применить стили.

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

Советы по оптимизации и стилям многоуровневого меню

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

Используйте CSS для плавного появления подменю через transition и opacity.
Добавьте стрелки или иконки у пунктов, которые имеют подменю, чтобы визуально обозначить вложенность.
Обеспечьте поддержку клавиатурной навигации и доступность для screen reader с помощью aria-атрибутов.
Минимизируйте количество вложенных уровней, чтобы не усложнять интерфейс.

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

.wplistru-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.wplistru-menu li {
    position: relative;
}
.wplistru-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 1000;
}
.wplistru-menu li:hover > ul {
    display: block;
}
.wplistru-menu li ul li {
    width: 180px;
}
.wplistru-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

Итог

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

Используйте советы и примеры из этой статьи, чтобы сделать навигацию вашего сайта удобной и современной.