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

Автор: Игорь Титов | Опубликовано: 25.11.2025

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

Основы создания меню в WordPress: регистрация и вывод

Для начала нужно зарегистрировать меню в вашей теме. Это делается с помощью функции register_nav_menus(), которую обычно вызывают в файле functions.php. Например, для регистрации основного меню:

function wpco_register_menus() {
    register_nav_menus(array(
        'primary-menu' => __('Primary Menu', 'wpco'),
    ));
}
add_action('after_setup_theme', 'wpco_register_menus');

После регистрации в админке WordPress появится возможность назначить пункты меню для 'Primary Menu'.

Вывод меню в шаблоне делается функцией wp_nav_menu():

wp_nav_menu(array(
    'theme_location' => 'primary-menu',
    'menu_class' => 'wpco-menu',
    'container' => 'nav',
));

Однако по умолчанию WordPress сгенерирует меню с вложенностью, но оформление и поведение нужно настраивать отдельно.

Создание кастомного многоуровневого меню с помощью Walker

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

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

class Wpco_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 wpco-submenu\">\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[] = 'wpco-menu-item';
        if (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'wpco-has-children';
        }

        $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', 'wpco-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 );
    }
}

Для использования этого класса передайте его в параметр walker функции wp_nav_menu:

wp_nav_menu(array(
    'theme_location' => 'primary-menu',
    'menu_class' => 'wpco-menu',
    'container' => 'nav',
    'walker' => new Wpco_Walker_Nav_Menu(),
));

Стилизация многоуровневого меню: CSS и поведение

После вывода правильной HTML-структуры нужно написать CSS для отображения вложенных меню. Типичная задача: скрывать подменю и показывать их при наведении.

Пример базового CSS:

.wpco-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.wpco-menu-item {
    position: relative;
    margin-right: 20px;
}

.wpco-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    min-width: 150px;
    z-index: 1000;
}

.wpco-menu-item.wpco-has-children:hover > .wpco-submenu {
    display: block;
}

.wpco-submenu .wpco-menu-item {
    margin: 0;
    padding: 0 15px;
}

.wpco-submenu .wpco-menu-item a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
}

.wpco-submenu .wpco-menu-item a:hover {
    background-color: #f0f0f0;
}

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

Плагины для расширенного управления многоуровневыми меню

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

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

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

Как отлаживать и тестировать многоуровневое меню в WordPress

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

Используйте инструменты разработчика браузера для проверки правильности HTML и CSS.
Проверьте, что пункты меню с детьми имеют класс menu-item-has-children — это позволяет стилизовать их отдельно.
Тестируйте взаимодействие с клавиатурой — можно добавить поддержку открытия подменю по клавише Enter или пробел.
На мобильных устройствах стоит проверить удобство открытия подменю и отсутствие конфликтов с тач-событиями.

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

Заключение: почему стоит создавать меню вручную

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

Рассмотренный пример — отличный старт для реализации сложных навигаций, которые не ограничиваются стандартными возможностями WordPress.