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

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

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

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

Чтобы создать подменю (вложенный пункт), просто перетащите пункт меню немного вправо под родительский элемент. WordPress автоматически сформирует структуру многоуровневого меню.

Максимальное количество уровней вложенности зависит от темы и стилей, но обычно 2-3 уровня работают без проблем.

Регистрация и вывод многоуровневого меню через функции темы

Для вывода меню в шаблоне нужно зарегистрировать его в файле functions.php. Добавим функцию с префиксом wpstuff_ для удобства:

function wpstuff_register_main_menu() {
    register_nav_menu('primary', __('Основное меню'));
}
add_action('after_setup_theme', 'wpstuff_register_main_menu');

Теперь в шаблоне выведите меню с помощью wp_nav_menu:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
    'container' => 'nav',
    'container_class' => 'main-navigation',
    'depth' => 3, // Максимум 3 уровня вложенности
));

Параметр depth ограничивает количество уровней вложенности, которые будут отображаться. Если нужна кастомная разметка, можно использовать параметр walker с собственным классом.

Создание собственного Walker класса для кастомной многоуровневой навигации

Иногда нужно вывести меню с уникальной HTML-разметкой, например, с дополнительными классами или атрибутами. Для этого создадим свой класс, наследующийся от Walker_Nav_Menu.

Пример кастомного Walker для 3-уровневого меню с поддержкой Bootstrap 5:

class WPStuff_Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $submenu_class = ($depth >= 0) ? 'dropdown-menu' : '';
        $output .= "\n$indent<ul class=\"$submenu_class\">\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $li_classes = array('nav-item');
        $link_classes = array('nav-link');

        if (in_array('menu-item-has-children', $item->classes)) {
            $li_classes[] = 'dropdown';
            if ($depth === 0) {
                $link_classes[] = 'dropdown-toggle';
            }
        }

        $li_class_names = implode(' ', $li_classes);
        $link_class_names = implode(' ', $link_classes);

        $output .= "$indent<li class=\"$li_class_names\">";

        $attributes = '';
        $attributes .= ' href="' . esc_attr($item->url) . '"';
        if (in_array('menu-item-has-children', $item->classes) && $depth === 0) {
            $attributes .= ' data-bs-toggle="dropdown" role="button" aria-expanded="false"';
        }
        $attributes .= ' class="' . $link_class_names . '"';

        $title = apply_filters('the_title', $item->title, $item->ID);

        $output .= "<a$attributes>$title</a>";
    }

    function end_el( &$output, $item, $depth = 0, $args = null ) {
        $output .= "</li>\n";
    }
}

Выводим меню с нашим Walker:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0',
    'container' => 'div',
    'container_class' => 'collapse navbar-collapse',
    'walker' => new WPStuff_Bootstrap_Walker_Nav_Menu(),
    'depth' => 3,
));

Использование плагинов для расширения многоуровневой навигации

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

• Max Mega Menu — позволяет создавать красивые мегаменю с несколькими колонками, иконками и виджетами.
• WP Responsive Menu — адаптивное меню с поддержкой многоуровневых пунктов.
• Clearfy Pro — плагин для оптимизации и улучшения навигации, в том числе с возможностью тонкой настройки меню. Подробнее о нем — wpshop.ru.

Эти инструменты помогут быстро реализовать сложную навигацию с минимумом настроек.

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

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

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

@media (max-width: 768px) {
    .main-menu ul ul {
        display: none;
        position: static;
    }
    .main-menu li.menu-item-has-children > a:after {
        content: '\25BC';
        float: right;
        margin-left: 5px;
    }
    .main-menu li.menu-item-has-children.open > ul {
        display: block;
    }
}

Для управления открытием подменю добавьте небольшой скрипт:

document.querySelectorAll('.main-menu li.menu-item-has-children > a').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
        if(window.innerWidth <= 768) {
            e.preventDefault();
            const parentLi = this.parentElement;
            parentLi.classList.toggle('open');
        }
    });
});

Вывод

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