Многоуровневая навигация — важный элемент удобного пользовательского интерфейса на сайте WordPress. Правильно организованное меню помогает посетителям быстро ориентироваться и находить нужную информацию. В этой статье разберём, как создать и настроить многоуровневое меню в WordPress, используя стандартные средства CMS, а также расширить функционал с помощью плагинов. Приведём практические примеры кода и советы по оптимизации.
Что такое hierarchical menu и зачем оно нужно
Hierarchical menu — это меню с вложенными пунктами, где один пункт может содержать подменю, а те, в свою очередь, — свои подменю и так далее. Такая структура особенно полезна для крупных сайтов с большим количеством разделов и подразделов. Она помогает:
- Сократить количество пунктов верхнего уровня, улучшая визуальное восприятие;
- Группировать связанные страницы и записи;
- Улучшить SEO за счёт правильной иерархии ссылок;
- Сделать навигацию более логичной и удобной для пользователей.
WordPress из коробки поддерживает создание таких меню через панель «Внешний вид» -> «Меню», но для сложных решений часто требуется доработка шаблона или подключение дополнительных плагинов.
Создание многоуровневого меню через админку WordPress
Для начала создадим базовую структуру. Перейдите в «Внешний вид» -> «Меню». Создайте новое меню и добавьте пункты:
- Добавьте основные страницы или категории в меню.
- Чтобы сделать пункт вложенным, просто перетащите его чуть правее под нужный родительский элемент.
- Сохраните меню и назначьте его на локацию темы (например, Primary Menu).
После этого в шаблоне обычно подключается меню функцией wp_nav_menu(), которая автоматически выводит вложенные пункты, если поддержка многоуровневости предусмотрена в CSS и JavaScript темы.
Пример базового вызова меню в файле header.php вашей темы:
<?php wp_nav_menu(array( 'theme_location' => 'primary', 'menu_class' => 'main-menu' )); ?>Важно, чтобы в файле стилей темы были прописаны правила для отображения подменю, а также возможно понадобится скрипт для раскрытия выпадающих элементов по клику или наведению.
Добавление поддержки многоуровневого меню в тему WordPress
Если в вашей теме меню не отображается корректно, возможно, нужно подключить поддержку многоуровневой навигации. Для этого в functions.php добавьте регистрацию меню и поддержку:
function wpkeys_register_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu', 'wpkeys')
));
}
add_action('after_setup_theme', 'wpkeys_register_menus');Также проверьте, что в CSS есть стили для подменю. Пример базового CSS для раскрытия подменю при наведении:
.main-menu {
list-style: none;
margin: 0;
padding: 0;
}
.main-menu > li {
position: relative;
display: inline-block;
}
.main-menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
list-style: none;
background: #fff;
padding: 0;
margin: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.main-menu li:hover > ul {
display: block;
}
.main-menu li ul li {
display: block;
width: 200px;
}Если вы хотите, чтобы раскрытие меню было по клику, а не по наведению, добавьте JavaScript:
document.querySelectorAll('.main-menu li.menu-item-has-children > a').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const submenu = anchor.nextElementSibling;
if (submenu.style.display === 'block') {
submenu.style.display = 'none';
} else {
submenu.style.display = 'block';
}
});
});Использование плагинов для расширения возможностей меню
Если стандартных возможностей недостаточно, можно воспользоваться плагинами с расширенными функциями:
- Max Mega Menu — позволяет создавать красивые многоуровневые мегаменю с поддержкой виджетов и кастомных стилей. Отлично подходит для сложных сайтов.
- WP Mega Menu — ещё один популярный плагин с drag&drop конструктором и удобным интерфейсом.
- UberMenu (платный) — мощный плагин с широкими возможностями настройки и адаптивным дизайном.
Например, чтобы подключить Max Mega Menu, установите и активируйте плагин, затем в настройках меню выберите пункт «Enable» для нужного меню. Плагин автоматически добавит стили и скрипты для многоуровневого меню.
Программное создание и вывод многоуровневого меню с WPKeys_add_hierarchical_menu()
Для автоматизации и встраивания кастомных меню можно написать свою функцию. Например, функция wpkeys_add_hierarchical_menu() создаст меню программно и выведет его.
function wpkeys_add_hierarchical_menu($menu_name) {
$locations = get_nav_menu_locations();
if (!isset($locations[$menu_name])) {
return 'Меню не найдено';
}
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_tree = array();
foreach ($menu_items as $item) {
if (!$item->menu_item_parent) {
$menu_tree[$item->ID] = array('item' => $item, 'children' => array());
}
}
foreach ($menu_items as $item) {
if ($item->menu_item_parent) {
$menu_tree[$item->menu_item_parent]['children'][] = $item;
}
}
echo '<ul class="wpkeys-menu">';
foreach ($menu_tree as $node) {
echo '<li><a href="' . esc_url($node['item']->url) . '">' . esc_html($node['item']->title) . '</a>';
if (!empty($node['children'])) {
echo '<ul class="sub-menu">';
foreach ($node['children'] as $child) {
echo '<li><a href="' . esc_url($child->url) . '">' . esc_html($child->title) . '</a></li>';
}
echo '</ul>';
}
echo '</li>';
}
echo '</ul>';
}Вызвать функцию можно в любом шаблоне, передав имя зарегистрированного меню:
<?php wpkeys_add_hierarchical_menu('primary'); ?>Этот пример показывает базовый вывод двух уровней вложенности. Для глубже вложенных меню нужно рекурсивно обходить элементы, что можно реализовать при необходимости.
Оптимизация и рекомендации по многоуровневым меню в WordPress
При создании многоуровневых меню стоит учитывать следующие моменты:
- Не перегружайте меню — слишком глубокая вложенность ухудшает юзабилити и SEO.
- Используйте адаптивный дизайн — меню должно корректно работать на мобильных устройствах, для чего часто применяют «гамбургер»-меню.
- Тестируйте производительность — сложные меню с большим количеством пунктов могут замедлять загрузку страницы.
- Используйте кеширование — для статичных меню можно применять кеширование HTML.
Если вы хотите автоматизировать создание меню с кастомными типами записей, обратите внимание на плагин Clearfy Pro, который расширяет возможности WordPress по управлению меню и оптимизации.