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

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

Что такое многоуровневая навигация в WordPress и зачем она нужна

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

WordPress из коробки поддерживает создание вложенных меню через интерфейс Внешний вид → Меню. Однако простого создания пунктов недостаточно: нужно правильно оформить HTML и CSS, а иногда и добавить JavaScript для качественной работы выпадающих списков.

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

Для начала создадим базовое многоуровневое меню:

1. Перейдите в Внешний вид → Меню.
2. Создайте новое меню или выберите существующее.
3. Добавляйте страницы, категории или произвольные ссылки в меню.
4. Для создания вложенного пункта перетащите элемент чуть правее под родительский пункт — появится вложенность.
5. Сохраните меню и назначьте его в нужную локацию темы (обычно это основное меню в шапке).

Однако для корректного отображения и работы многоуровневого меню потребуется поддержка темы. Большинство современных тем, включая темы Reboot и Root от WPSHOP, поддерживают многоуровневые меню с выпадающими списками.

Пример кастомного вывода многоуровневого меню с помощью wp_nav_menu и Walker

Если стандартного вывода меню недостаточно, можно написать свой класс-наследник Walker_Nav_Menu для кастомизации HTML структуры и добавления дополнительных атрибутов.

Вот простой пример кастомного воркера, который добавляет иконку к пунктам с дочерними элементами:

class WPLesson_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $has_children = in_array('menu-item-has-children', $item->classes);
        $output .= '<li class="' . implode(' ', $item->classes) . '">';
        $output .= '<a href="' . esc_attr($item->url) . '">' . esc_html($item->title);
        if ($has_children) {
            $output .= ' <span class="submenu-icon">▾</span>';
        }
        $output .= '</a>';
    }
    function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= '</li>';
    }
}

Вывод меню с этим воркером:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new WPLesson_Walker_Nav_Menu()
));

Такой подход даёт полный контроль над разметкой и позволяет легко добавить дополнительные классы, иконки или атрибуты для лучшей стилизации и взаимодействия.

CSS и JavaScript для многоуровневого меню

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

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav li {
    position: relative;
    float: left;
    margin-right: 20px;
}
nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
nav li:hover > ul {
    display: block;
}
nav li ul li {
    float: none;
    margin: 0;
    padding: 0 20px;
}

Если нужно сделать меню адаптивным и добавить поддержку кликов на мобильных устройствах, можно использовать простой JavaScript или jQuery:

document.querySelectorAll('nav li.menu-item-has-children > a').forEach(function(link) {
    link.addEventListener('click', function(e) {
        if (window.innerWidth <= 768) {
            e.preventDefault();
            const submenu = this.nextElementSibling;
            if (submenu.style.display === 'block') {
                submenu.style.display = 'none';
            } else {
                submenu.style.display = 'block';
            }
        }
    });
});

Полезные плагины для расширения функционала меню в WordPress

Если хочется добавить дополнительные возможности без написания кода, рекомендуем обратить внимание на следующие плагины:

• Max Mega Menu — позволяет создавать мегаменю с визуальным конструктором, поддерживает многоуровневые меню, иконки, виджеты и адаптивность.
• WP Responsive Menu — простой плагин для создания адаптивного меню, который превращает стандартное меню в удобный для мобильных устройств формат.
• UberMenu (платный) — мощный плагин с огромным набором функций для кастомизации мегаменю, включая поддержку карт, форм и медиа.

Для интеграции с плагинами WPSHOP, например, тем Reboot и Root, меню создаётся стандартным способом, а дополнительные функции реализуются через кастомизацию воркера и CSS.

Советы по оптимизации многоуровневого меню

При создании многоуровневого меню важно учитывать:

• Не перегружайте меню большим количеством вложенных уровней — оптимально 2–3 уровня.
• Обеспечьте удобство навигации на мобильных устройствах, добавив поддержку кликов для открытия вложенных пунктов.
• Используйте семантическую разметку и атрибуты aria для доступности.
• Оптимизируйте CSS и скрипты, чтобы меню не замедляло загрузку сайта.

В итоге, правильно организованная многоуровневая навигация улучшит пользовательский опыт и поможет структуировать контент.