Вложенные меню — неотъемлемая часть структуры любого сайта на WordPress, особенно если у вас сложная навигация с несколькими уровнями подменю. В этой статье мы подробно рассмотрим, как создавать, настраивать и расширять вложенные меню в WordPress, используя стандартные возможности, а также с помощью плагинов из пакета WP Premium. Вы узнаете, как сделать меню удобным для пользователей и адаптивным для мобильных устройств, а также как добавить кастомные функции для улучшения UX.
Что такое вложенное меню и зачем оно нужно в WordPress
Вложенное меню — это меню, в котором один пункт содержит подменю, а у подменю, в свою очередь, могут быть собственные подпункты. Такая структура помогает логично распределить контент сайта и сделать навигацию более понятной. Например, если у вас есть раздел «Услуги», под которым находятся «Веб-дизайн» и «Разработка», а у «Разработки» — подкатегории «WP-сайты», «Магазины» и т.д.
WordPress из коробки поддерживает многоуровневые меню через административный интерфейс Внешний вид → Меню. Однако для сложных структур и кастомных функций часто требуются расширения и небольшие доработки.
Основные задачи вложенных меню:
- Удобное расположение большого количества пунктов;
- Логическая группировка контента;
- Поддержка адаптивности и UX;
- Возможность кастомизации внешнего вида и поведения подменю.
Создание многоуровневого меню в WordPress стандартными средствами
Для начала создадим вложенное меню стандартными средствами WordPress. Перейдите в админку: Внешний вид → Меню. Создайте новое меню или выберите существующее. Чтобы добавить подменю, просто перетащите пункт немного вправо под нужным родительским элементом — WordPress автоматически создаст вложенность.
Обратите внимание, что в теме оформления должна быть поддержка многоуровневого меню — обычно это реализовано через функцию wp_nav_menu() с параметром 'theme_location' и правильным HTML-маркированием.
Пример базового вызова меню в файле header.php вашей темы:
<?php wp_nav_menu(array( 'theme_location' => 'primary', 'menu_class' => 'main-menu' )); ?>При этом вложенные пункты выводятся внутри <ul> внутри родительского <li>. Важно, чтобы стили CSS корректно отображали подменю, например, при наведении показывали выпадающий список.
Настройка CSS для вложенного меню
Для отображения вложенного меню добавим простые стили:
.main-menu li { position: relative; } .main-menu ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; } .main-menu li:hover > ul { display: block; }Так подменю будет появляться при наведении мыши. Для мобильных устройств стоит добавить JavaScript или использовать готовые решения, чтобы меню открывалось по клику.
Использование плагинов WP Premium для расширения возможностей вложенных меню
В пакете WP Premium есть несколько плагинов, которые значительно упрощают работу с вложенными меню и расширяют их функциональность.
1. WP Premium Mega Menu
Данный плагин позволяет создавать мегаменю — большие выпадающие панели с несколькими колонками, иконками, изображениями и виджетами. Это удобно для сайтов с большим каталогом разделов.
Основные возможности:
- Перетаскивание пунктов меню;
- Добавление виджетов в меню;
- Многоуровневая структура с кастомным дизайном;
- Поддержка адаптивности и сенсорного управления.
После установки и активации плагина в настройках меню появится новая вкладка для настройки мегаменю на каждом пункте.
2. WP Premium Menu Icons
Этот плагин позволяет добавлять иконки к пунктам меню, что улучшает визуальное восприятие и помогает быстрее ориентироваться.
Для добавления иконки достаточно выбрать её в настройках пункта меню в админке. Плагин поддерживает популярные библиотеки иконок, например FontAwesome.
Реализация кастомного функционала вложенного меню с помощью кода
Иногда стандартных возможностей недостаточно, и нужно добавить уникальные функции. Рассмотрим пример, как с помощью функции wppremium_add_menu_description() добавить описание к каждому пункту меню, которое будет отображаться под названием.
Добавьте следующий код в файл functions.php вашей темы:
function wppremium_add_menu_description( $item_output, $item, $depth, $args ) { if ( !empty( $item->description ) ) { $item_output = str_replace( $args->link_after, '<span class="menu-description">' . esc_html( $item->description ) . '</span>' . $args->link_after, $item_output ); } return $item_output; } add_filter( 'walker_nav_menu_start_el', 'wppremium_add_menu_description', 10, 4 );Теперь в админке у каждого пункта меню можно заполнить поле "Описание" и оно отобразится в меню под заголовком пункта. Для стилизации добавьте в CSS:
.menu-description { display: block; font-size: 12px; color: #666; margin-top: 4px; }Кастомный Walker для сложных меню
Если нужна более глубокая кастомизация HTML структуры меню, можно создать собственный класс Walker, наследуемый от Walker_Nav_Menu. Например, чтобы добавить кастомные атрибуты к подменю:
class WPPremium_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-sub-menu' : 'sub-menu'; $output .= "\n$indent<ul class=\"$submenu_class\">\n"; } }И вызвать меню так:
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-menu', 'walker' => new WPPremium_Walker_Nav_Menu() ));Это позволит контролировать HTML структуру и стили подменю.
Советы по улучшению UX вложенных меню
Для удобства посетителей сайта стоит учитывать следующие моменты при работе с вложенными меню:
- Поддержка клавиатурной навигации для доступности;
- Анимация появления подменю для плавности;
- Хорошая адаптивность — на мобильных устройствах меню должно удобно раскрываться по нажатию;
- Минимизация количества уровней вложенности — слишком глубокие меню усложняют навигацию;
- Использование иконок и описаний для улучшения восприятия.
Для реализации адаптивного меню можно использовать плагин WP Premium Responsive Menu, который переключает меню в удобный мобильный вид с бургер-иконкой и раскрывающимися пунктами.
Заключение
Вложенные меню в WordPress — мощный инструмент организации навигации. Используя стандартные средства вместе с плагинами из WP Premium и кастомным кодом, вы можете создать удобное, красивое и функциональное многоуровневое меню, которое улучшит пользовательский опыт на вашем сайте. Практические примеры из статьи помогут реализовать эти задачи быстро и эффективно.