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

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

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

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

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

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

Первый шаг — зарегистрировать меню в файле functions.php вашей темы:

function wpcore_register_my_menus() {
    register_nav_menus([
        'header-menu' => 'Меню в header',
        'footer-menu' => 'Меню в footer'
    ]);
}
add_action('init', 'wpcore_register_my_menus');

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

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

Программное создание пунктов меню с вложенностью

Создадим функцию wpcore_add_custom_menu_items(), которая создаст меню и добавит в него пункты с вложенными элементами.

function wpcore_add_custom_menu_items() {
    // Проверяем, существует ли меню
    $menu_name = 'header-menu';
    $menu_exists = wp_get_nav_menu_object($menu_name);

    if (!$menu_exists) {
        $menu_id = wp_create_nav_menu($menu_name);

        // Добавляем корневой пункт
        $parent_item_id = wp_update_nav_menu_item($menu_id, 0, [
            'menu-item-title' => 'Главная',
            'menu-item-url' => home_url('/'),
            'menu-item-status' => 'publish'
        ]);

        // Добавляем пункт с вложениями
        $parent_cat_id = wp_update_nav_menu_item($menu_id, 0, [
            'menu-item-title' => 'Категории',
            'menu-item-url' => '#',
            'menu-item-status' => 'publish'
        ]);

        // Добавляем вложенный пункт
        wp_update_nav_menu_item($menu_id, 0, [
            'menu-item-title' => 'Новости',
            'menu-item-url' => site_url('/category/news/'),
            'menu-item-status' => 'publish',
            'menu-item-parent-id' => $parent_cat_id
        ]);

        // Ещё один вложенный пункт
        wp_update_nav_menu_item($menu_id, 0, [
            'menu-item-title' => 'Обзоры',
            'menu-item-url' => site_url('/category/reviews/'),
            'menu-item-status' => 'publish',
            'menu-item-parent-id' => $parent_cat_id
        ]);
    }
}
add_action('after_setup_theme', 'wpcore_add_custom_menu_items');

Код создает меню и добавляет пункты с вложенными элементами. Обратите внимание на параметр 'menu-item-parent-id', который указывает, что элемент вложен в родительский пункт.

Вывод меню в шаблоне с поддержкой вложенных пунктов

Для вывода меню используйте стандартную функцию wp_nav_menu(), которая автоматически построит многоуровневую структуру, если в вашей теме правильно подключены стили и скрипты.

wp_nav_menu([
    'theme_location' => 'header-menu',
    'container' => 'nav',
    'menu_class' => 'wpcore-multilevel-menu'
]);

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

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

class Wpcore_Multilevel_Walker extends Walker_Nav_Menu {
    function start_lvl( &&$output, $depth = 0, $args = null ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\">\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';

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

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

        $attributes  = ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = '<a' . $attributes . '>' . $title . '</a>';

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

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

Для использования класса передайте его в параметры:

wp_nav_menu([
    'theme_location' => 'header-menu',
    'walker' => new Wpcore_Multilevel_Walker()
]);

Используем плагины для расширенной работы с меню

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

• Clearfy Pro — оптимизация и управление меню, отключение ненужных элементов.
• WPCommunity — расширение для создания сложных меню и навигаций.

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

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

Многоуровневое меню часто требует дополнительной CSS стилизации для корректного отображения:

• Используйте position: relative у родительских элементов и position: absolute для подменю.
• Добавьте плавные переходы для появления подменю.
• Обеспечьте поддержку клика и наведения для мобильных и десктопных устройств.

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

.wpcore-multilevel-menu ul.sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-top: 0;
    padding: 0;
    list-style: none;
}

.wpcore-multilevel-menu li:hover > ul.sub-menu {
    display: block;
}

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