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

Автор: Екатерина Семенова | Опубликовано: 26.11.2025

Почему важна многоуровневая навигация в WordPress

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

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

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

Для начала рассмотрим базовый способ создания многоуровневой навигации стандартными средствами WordPress:

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

Так вы можете создавать вложенные пункты на несколько уровней. Однако для правильного отображения нужно, чтобы тема поддерживала многоуровневые меню и корректно выводила их HTML и CSS. Проверьте, что в вашей теме в файле header.php или другом шаблоне вызов функции wp_nav_menu() настроен правильно.

Пример базового вызова wp_nav_menu для многоуровневого меню

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
    'container' => false,
    'depth' => 3
));

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

Расширение функционала меню с помощью плагинов

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

Max Mega Menu — позволяет создавать многоуровневые меню с кастомным стилем, виджетами внутри подменю и адаптивностью.
WP Mega Menu — удобный визуальный конструктор меню с поддержкой иконок и произвольных блоков.
UberMenu (платный) — мощный инструмент с гибкой настройкой и множеством опций.

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

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

Для более тонкой настройки вывода меню в WordPress используют класс Walker_Nav_Menu. Это мощный инструмент, позволяющий изменить HTML структуру меню.

Создадим собственный класс для вывода меню с дополнительными CSS-классами и атрибутами для подменю.

class WPStudy_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $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 = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat("\t", $depth) : '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        if ($depth === 0) {
            $classes[] = 'top-level-item';
        } else {
            $classes[] = 'sub-level-item';
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item );
        $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        : '';

        $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',
    'walker' => new WPStudy_Walker_Nav_Menu(),
    'menu_class' => 'main-menu',
    'container' => false,
    'depth' => 3
));

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

Стилизация многоуровневого меню с помощью CSS и адаптивность

После того как структура меню готова, важно правильно оформить стили. Для многоуровневого меню обычно нужны выпадающие подменю и плавные эффекты.

Основные правила:

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

Пример базового CSS для многоуровневого меню:

.main-menu, .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-menu li {
    position: relative;
    float: left;
    background: #333;
}
.main-menu li a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
}
.main-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #444;
}
.main-menu li:hover > ul {
    display: block;
}
.main-menu li ul li {
    float: none;
    width: 200px;
}
.main-menu li ul li a {
    padding: 10px;
}
/* Для подменю второго уровня */
.main-menu li ul li ul {
    left: 100%;
    top: 0;
}

Для адаптивности меню можно использовать JavaScript или jQuery, чтобы переключать отображение подменю по клику, например, добавляя классы open и closed.

Пример простого скрипта для открытия подменю по клику

document.addEventListener('DOMContentLoaded', function() {
    var menuItems = document.querySelectorAll('.main-menu li.menu-item-has-children > a');
    menuItems.forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            var parentLi = this.parentNode;
            parentLi.classList.toggle('open');
        });
    });
});

Для этого в CSS добавьте правила отображения подменю при классе open:

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

Советы по оптимизации и поддержке многоуровневого меню

1. Проверяйте работу меню на разных устройствах и браузерах.

2. Используйте семантическую разметку и aria-атрибуты для доступности (accessibility).

3. Минимизируйте вложенность, чтобы не усложнять UX.

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

5. При использовании плагинов проверяйте их совместимость с вашей темой и версией WordPress.