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

Зачем нужна многоуровневая навигация в WordPress

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

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

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

Настройка меню в админке

Для начала создадим меню в административной панели WordPress: перейдите в Внешний вид → Меню. Создайте новое меню и добавьте необходимые пункты. Для создания вложенных элементов просто перетащите пункт чуть правее под родительский элемент — WordPress автоматически создаст иерархию.

После сохранения меню его можно вывести в теме с помощью функции wp_nav_menu:

wpstandart_wp_nav_menu_custom(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
));

Зарегистрируйте локацию меню в functions.php вашей темы:

function wpstandart_register_menus() {
    register_nav_menus(array(
        'primary' => __('Основное меню', 'wpstandart')
    ));
}
add_action('after_setup_theme', 'wpstandart_register_menus');

Вывод многоуровневого меню с кастомным классом

По умолчанию WordPress выводит меню с вложенными списками <ul> внутри <li>. Чтобы добавить кастомные классы или изменить структуру, создадим кастомный Walker:

class WPStandart_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=\"$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 ($depth === 0) {
            $classes[] = 'menu-item-top';
        }
        $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->attr_title) and $attributes .= ' title="' . esc_attr($item->attr_title) . '"';
        !empty($item->target) and $attributes .= ' target="' . esc_attr($item->target) . '"';
        !empty($item->xfn) and $attributes .= ' rel="' . esc_attr($item->xfn) . '"';
        !empty($item->url) and $attributes .= ' 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);
    }
}

Теперь вызываем меню с нашим Walker:

wpstandart_wp_nav_menu_custom(array(
    'theme_location' => 'primary',
    'menu_class' => 'main-menu',
    'walker' => new WPStandart_Walker_Nav_Menu()
));

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

Плагин Max Mega Menu

Max Mega Menu — популярный плагин для создания выпадающих и многоуровневых меню с визуальным редактором. Он позволяет добавить виджеты в меню, настроить стили и анимации без написания кода.

Чтобы установить плагин, перейдите в Плагины → Добавить новый, введите «Max Mega Menu» и установите. После активации настройте меню через Внешний вид → Max Mega Menu.

Плагин отлично подойдет, если не хотите писать код, а хотите гибко управлять сложной навигацией.

Плагин UberMenu (платный)

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

Его можно приобрести на CodeCanyon и интегрировать в любую тему WordPress. Для разработчиков доступна документация и API для расширения функционала.

Практические советы по созданию удобной навигации

Оптимизация UX и SEO навигации

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

Используйте семантические теги и атрибуты ARIA для доступности. Например, добавьте aria-haspopup и aria-expanded к пунктам с подменю:

function wpstandart_add_aria_attributes($atts, $item, $args, $depth) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $atts['aria-haspopup'] = 'true';
        $atts['aria-expanded'] = 'false';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'wpstandart_add_aria_attributes', 10, 4);

Поддержка мобильных устройств

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

document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.menu-item-has-children > a');
    toggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            const parent = this.parentNode;
            parent.classList.toggle('open');
        });
    });
});

Такой скрипт позволит открывать и закрывать подменю при клике на мобильных устройствах.

Пример кастомного CSS для многоуровневого меню

Для стилизации можно добавить следующий CSS:

.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.main-menu > li {
    position: relative;
    margin-right: 20px;
}
.sub-menu, .sub-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    list-style: none;
    padding: 10px 0;
}
.menu-item.open > .sub-menu, .menu-item.open > .sub-sub-menu {
    display: block;
}
.sub-menu > li {
    padding: 5px 20px;
    white-space: nowrap;
}
.sub-menu > li:hover {
    background-color: #f0f0f0;
}
.main-menu a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    display: block;
}
.main-menu a:hover {
    color: #0073aa;
}
@media (max-width: 768px) {
    .main-menu {
        flex-direction: column;
    }
    .main-menu > li {
        margin-right: 0;
    }
}