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

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

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

В WordPress многоуровневое меню обычно реализуется с помощью стандартного механизма «Меню» в админке, однако для создания полностью кастомных и гибких решений часто требуется писать собственный код или использовать плагины.

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

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

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

WordPress автоматически распознаёт такую структуру и при выводе меню с помощью wp_nav_menu создаст вложенные <ul> списки.

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

Пример: базовое подключение меню в файле темы

<?php
wp_nav_menu(array(
    'theme_location' => 'primary',
    'menu_class' => 'wpunit-multilevel-menu',
    'container' => 'nav',
    'container_class' => 'wpunit-menu-container'
));
?>

Здесь 'theme_location' должен быть зарегистрирован в functions.php вашей темы.

Регистрация области меню в файле functions.php

Чтобы меню отображалось, нужно зарегистрировать область. Добавьте следующий код в functions.php вашей темы:

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

После этого в админке появится возможность назначить меню на локацию «Основное меню».

Кастомизация вывода многоуровневого меню: Walker Nav Menu

Стандартный wp_nav_menu выводит меню с классами и структурой, но иногда требуется изменить HTML, например, добавить иконки, дополнительные атрибуты или классы для уровней.

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

class WPUnit_Custom_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 wpunit-submenu-depth-' . ($depth + 1) : '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[] = 'wpunit-menu-item';
        if ($depth === 1) {
            $classes[] = 'wpunit-second-level-item';
        }
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
        $output .= $indent . '<li' . $id . $class_names . '>';
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) . '"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) . '"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) . '"' : '';
        $attributes .= ! empty( $item->url )        ? ' 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 будет выглядеть так:

wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new WPUnit_Custom_Walker_Nav_Menu(),
    'menu_class' => 'wpunit-multilevel-menu'
));

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

Чтобы меню корректно отображалось, добавим базовые стили:

.wpunit-multilevel-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.wpunit-multilevel-menu li {
    position: relative;
    margin-right: 20px;
}
.wpunit-multilevel-menu li a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    color: #333;
}
.wpunit-multilevel-menu li:hover > ul {
    display: block;
}
.wpunit-submenu-depth-1, .wpunit-submenu-depth-2, .wpunit-submenu-depth-3 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f9f9f9;
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 180px;
}
.wpunit-submenu-depth-1 li, .wpunit-submenu-depth-2 li, .wpunit-submenu-depth-3 li {
    margin: 0;
}
.wpunit-submenu-depth-1 li a, .wpunit-submenu-depth-2 li a {
    padding: 8px 20px;
    white-space: nowrap;
}
.wpunit-submenu-depth-1 li:hover > ul {
    display: block;
    left: 100%;
    top: 0;
}

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

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

Например, плагин WP Mega Menu позволяет делать красивые выпадающие многоуровневые меню с иконками, виджетами и адаптивностью.

Также популярны решения, интегрируемые с темами из магазина WPSHOP, которые предлагают расширенную поддержку кастомных меню и визуальных эффектов.

Резюме: советы по созданию многоуровневого меню в WordPress

• Всегда регистрируйте меню через register_nav_menus и выводите с помощью wp_nav_menu.
• Для кастомных HTML-структур используйте наследование от Walker_Nav_Menu.
• Обязательно добавляйте CSS-стили для корректного отображения вложенных списков.
• Если нужны сложные эффекты и удобный интерфейс — рассмотрите плагины типа WP Mega Menu.
• Проверяйте работу меню на мобильных устройствах и в разных браузерах.

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