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

Автор: Константин Титов | Опубликовано: 27.11.2025

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

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

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

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

Плагин WP Mega Menu

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

Основные преимущества WP Mega Menu:

Интуитивно понятный визуальный конструктор меню.
Поддержка drag-and-drop.
Возможность добавлять различные типы контента в пункты меню.
Гибкие настройки стилей и анимаций.

Как начать работу с WP Mega Menu:

Установите и активируйте плагин через админ-панель WordPress.
Перейдите в раздел «Внешний вид» > «Меню».
Создайте стандартное меню и отметьте опцию «Enable Mega Menu» для нужных пунктов.
Используйте визуальный редактор для добавления элементов и настройки вложенных уровней.

Плагин Max Mega Menu

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

Особенности Max Mega Menu:

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

Чтобы активировать Max Mega Menu:

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

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

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

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

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

function wp8_register_my_menu() {
    register_nav_menu('primary-menu', __('Primary Menu', 'wp8'));
}
add_action('after_setup_theme', 'wp8_register_my_menu');

Этот код регистрирует новое меню с идентификатором primary-menu, которое можно использовать в админке.

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

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

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

При этом в меню в админке можно создавать вложенные пункты с помощью drag-and-drop.

Кастомизация стилей для многоуровневого меню

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

.wp8-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.wp8-menu li {
    position: relative;
    margin-right: 20px;
}
.wp8-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 10px 0;
    list-style: none;
    min-width: 150px;
}
.wp8-menu li:hover > ul {
    display: block;
}
.wp8-menu li ul li {
    margin: 0;
    padding: 0 20px;
}
.wp8-menu li ul li:hover {
    background-color: #f5f5f5;
}

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

Кастомный walker для сложных меню

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

class WP8_Custom_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=\"$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->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 );
    }
}

И подключение этого воркера к меню:

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

Практические рекомендации и советы

При создании многоуровневого меню важно учитывать:

Не перегружайте меню большим количеством уровней — оптимально 2–3 уровня вложенности.
Проверяйте адаптивность меню на мобильных устройствах — используйте медиазапросы и тестируйте на разных экранах.
Для улучшения SEO используйте семантичную разметку и атрибуты ARIA.
Если используете плагины, следите за их обновлениями и совместимостью с вашей темой.

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

Оптимизация производительности меню

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

Используйте кэширование.
Минимизируйте и объединяйте CSS и JS файлы.
Подключайте только необходимые стили и скрипты.
Проверяйте меню с помощью инструментов производительности, например, Google PageSpeed Insights.