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

Автор: Степан Панин | Опубликовано: 24.03.2026

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

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

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

Если вы создаете сайт с большим количеством курсов, категорий и подкатегорий (что актуально для wpfreecourses.ru), многоуровневая навигация становится необходимостью.

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

WordPress использует функцию wp_nav_menu() для вывода меню. Чтобы создать многоуровневое меню, нужно правильно зарегистрировать меню и оформить разметку для вложенных элементов.

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

function wpfreecourses_register_menus() {
    register_nav_menus([
        'primary-menu' => __('Primary Menu', 'wpfreecourses'),
    ]);
}
add_action('after_setup_theme', 'wpfreecourses_register_menus');

Эта функция регистрирует область меню с названием "Primary Menu".

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

wp_nav_menu([
    'theme_location' => 'primary-menu',
    'menu_class' => 'wpfreecourses-menu',
    'container' => 'nav',
    'container_class' => 'wpfreecourses-nav',
    'depth' => 3, // количество уровней вложенности
]);

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

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

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

.wpfreecourses-menu ul {
    display: none;
    position: absolute;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
}

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

.wpfreecourses-menu li {
    position: relative;
    float: left;
    margin-right: 20px;
}

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

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

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

1. Max Mega Menu

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

Автоматически превращает стандартное меню WordPress в расширенное.
Поддержка виджетов внутри подменю.
Управление стилями без кода.

Установка и базовая настройка выполняется через админку, что удобно для новичков.

2. WP Mega Menu от Themeum

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

3. UberMenu

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

Пример интеграции Max Mega Menu

После установки плагина на сайте в разделе «Внешний вид - Меню» вы увидите опцию «Max Mega Menu Settings». Активируйте плагин для нужного меню.

Далее можно настроить внешний вид в разделе «Mega Menu» и задать количество уровней вложенности.

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

Как решить основные проблемы с многоуровневыми меню

Проблема 1: меню не раскрывается на мобильных устройствах

Часто стандартное CSS-решение с hover не работает на сенсорных экранах. Для этого нужно добавить обработку кликов через JavaScript. Например:

document.querySelectorAll('.wpfreecourses-menu li.menu-item-has-children > a').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        var submenu = anchor.nextElementSibling;
        if (submenu.style.display === 'block') {
            submenu.style.display = 'none';
        } else {
            submenu.style.display = 'block';
        }
    });
});

Проблема 2: слишком глубокая вложенность ломает дизайн

Рекомендуется ограничить глубину меню 2-3 уровнями. Если нужно больше, стоит пересмотреть структуру сайта и сделать менее вложенную логику.

Проблема 3: медленная загрузка из-за большого количества пунктов в меню

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

Заключение

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

Если хотите попробовать готовые решения с расширенным функционалом, рекомендуем Max Mega Menu и Clearfy Pro.