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

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

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

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

Стандартная функция WordPress wp_nav_menu() поддерживает вложенные меню, но для кастомных тем и уникального дизайна часто требуется писать собственный walker-класс.

Создание многоуровневого меню с кастомным walker-классом

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

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

class WPAll_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $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 = array(), $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-level-1';
        } else {
            $classes[] = 'menu-item-level-2';
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names . '>';

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $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',
    'walker' => new WPAll_Walker_Nav_Menu(),
));

В этом примере мы добавляем классы по уровням вложенности, что удобно для стилизации.

Регистрация меню в functions.php

Перед использованием меню обязательно зарегистрируйте его в файле functions.php вашей темы, если этого ещё не сделано:

function wpall_register_menus() {
    register_nav_menus( array(
        'primary' => 'Главное меню',
    ) );
}
add_action( 'after_setup_theme', 'wpall_register_menus' );

После регистрации меню вы сможете создавать и управлять пунктами в админке WordPress в разделе Внешний вид → Меню.

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

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

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

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

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

Для корректной работы многоуровневого меню нужно правильно оформить CSS. Основные моменты:

• Используйте position: relative для родительских элементов <li> и position: absolute для вложенных <ul>;
• Добавляйте плавное появление выпадающих списков с помощью transition и opacity;
• Обеспечьте удобство для мобильных устройств — меню должно быть адаптивным и простым в навигации;
• Добавьте визуальные индикаторы наличия подменю, например стрелочки или иконки.

Пример базового CSS для второго уровня меню:

.menu-item-level-1 { position: relative; }
.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
}
.menu-item-level-1:hover > .sub-menu {
    display: block;
}

Итог

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

Если вы хотите расширить функционал меню, рекомендую посмотреть плагины Max Mega Menu и WP Responsive Menu, которые помогут быстро получить профессиональное меню без глубокой доработки кода.