В этой статье мы рассмотрим, как организовать и создать многоуровневую навигацию (выпадающие меню) в WordPress. Такая навигация помогает сделать сайт удобным для пользователей, особенно если у вас много разделов и подразделов. Мы разберём, как работать с меню через административную панель, как кастомизировать вывод и стили, а также рассмотрим примеры кода и полезные плагины для расширения функционала.
Что такое многоуровневая навигация в WordPress и зачем она нужна
Навигационное меню — это один из ключевых элементов интерфейса сайта. Многоуровневая навигация позволяет создавать выпадающие списки с подменю, что существенно улучшает структуру и удобство пользования сайтом. Особенно это актуально для крупных проектов с большим количеством страниц и категорий.
В WordPress система меню реализована через кастомный тип таксономии, и меню можно создавать и редактировать через Внешний вид → Меню. Однако, чтобы сделать действительно удобное и стильное многоуровневое меню, часто требуется дополнительная кастомизация и подключение скриптов.
Создание многоуровневого меню через административную панель WordPress
Первый шаг — создание меню в админке WordPress:
- Перейдите в раздел Внешний вид → Меню.
- Создайте новое меню или выберите существующее.
- Добавьте нужные пункты меню: страницы, ссылки, категории и т.д.
- Для создания подменю просто перетащите пункт меню чуть правее под родительским пунктом — WordPress автоматически сделает его дочерним.
- Сохраните меню и назначьте его в нужную локацию (например, Primary Menu).
Это базовый способ, который подойдет для большинства сайтов. Однако, стандартные темы WordPress не всегда корректно выводят многоуровневые меню, особенно если уровней больше двух.
Кастомизация вывода многоуровневого меню: пример функции walker
Для точного контроля за HTML-разметкой меню можно создать свой Walker_Nav_Menu — класс, который отвечает за вывод структуры меню. Это полезно, если нужно добавить дополнительные CSS-классы, иконки, или изменить разметку под свои стили.
Вот пример простого кастомного класса для многоуровневого меню:
class WPLancer_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-menu' : 'sub-sub-menu';
$output .= "\n" . $indent . "<ul class='" . esc_attr($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';
if (in_array('menu-item-has-children', $classes)) {
$classes[] = 'has-submenu';
}
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$output .= $indent . '<li' . $class_names . '>';
$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_class' => 'main-menu',
'walker' => new WPLancer_Walker_Nav_Menu()
));Это позволит гибко управлять структурой и классами меню для дальнейшего оформления.
Стилизация многоуровневого меню: CSS и JavaScript
Для корректного отображения выпадающих подменю необходимо добавить CSS. Вот базовый пример стилей:
.main-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-menu li {
position: relative;
}
.main-menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
list-style: none;
padding: 0;
margin: 0;
}
.main-menu li:hover > ul {
display: block;
}
.main-menu li ul li {
width: 200px;
}
.main-menu a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
}
.main-menu a:hover {
background-color: #f0f0f0;
}Если меню имеет больше двух уровней, понадобится дополнительный JavaScript для корректного управления поведением подменю на мобильных устройствах и при наведении.
Пример простого jQuery-скрипта для управления кликом на подменю (подключите jQuery в теме):
jQuery(document).ready(function($) {
$('.menu-item-has-children > a').on('click', function(e) {
if($(window).width() < 768) {
e.preventDefault();
$(this).siblings('ul').slideToggle();
}
});
});Плагины для расширения функционала многоуровневого меню
Если не хочется создавать меню с нуля, можно использовать готовые плагины, которые значительно упрощают работу:
- Max Mega Menu — мощный плагин для создания мегаменю с поддержкой виджетов, кастомных стилей и эффектов.
- WP Mega Menu — удобный инструмент с drag&drop конструктором, подходит для сложных меню с несколькими уровнями.
- Clearfy Pro — помогает оптимизировать работу меню и ускорить загрузку, а также предлагает дополнительные настройки безопасности.
Эти плагины можно найти на wpshop.ru с удобной установкой и поддержкой.
Рекомендации по производительности и SEO для многоуровневых меню
Большие и сложные меню могут замедлять сайт, особенно если в них много скриптов и стилей. Чтобы избежать проблем:
- Минимизируйте CSS и JavaScript, используемые для меню.
- Кешируйте меню с помощью плагинов кеширования.
- Оптимизируйте количество уровней — не стоит делать слишком глубокие вложенности, это плохо для UX и SEO.
- Добавляйте атрибуты ARIA для улучшения доступности.
Кроме того, поисковые системы лучше индексируют логичную иерархию сайта, поэтому правильно структурированное меню — это плюс для SEO.
Заключение
Создание многоуровневой навигации в WordPress — задача, которая требует внимания к деталям и понимания работы темы и CMS. Стандартные возможности позволяют создавать базовые меню, но для действительно удобной и стильной навигации часто требуется кастомный walker, стилизация и дописание скриптов.
Использование готовых плагинов поможет быстро получить функционал мегаменю, а грамотная оптимизация гарантирует скорость и удобство для пользователей.
Если хотите подробнее изучить настройку темы для кастомных меню, рекомендуем обратить внимание на темы Reboot и Root — они отлично подходят для продвинутой кастомизации меню.