Многоуровневая навигация — важный элемент современного сайта на 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.