WordPress: как создать динамическое меню с подменю через код

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

Почему стоит создавать динамическое меню вручную?

Хотя WordPress уже предлагает удобный интерфейс для управления меню через Appearance > Menus, иногда нужно вывести меню в нестандартном виде, с кастомной разметкой или логикой. Например, для темы, где меню должно содержать специальные иконки, дополнительные классы или даже подгружать данные динамически через AJAX.

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

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

Основные шаги для создания динамического меню с подменю

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

1. Создаём меню и добавляем пункты в админке

Перейдите в Внешний вид > Меню, создайте новое меню, например «Основное меню». Добавьте в него страницы, категории или произвольные ссылки, а также создайте вложенные пункты, чтобы были подменю.

2. Регистрируем меню в functions.php

Чтобы WordPress знал о нашем меню и мог его использовать, добавим регистрацию меню в файл functions.php вашей темы или в плагин:

function wpcodex_register_menus() {
    register_nav_menus([
        'wpcodex_main_menu' => 'Основное меню'
    ]);
}
add_action('init', 'wpcodex_register_menus');

Это позволит назначить меню с названием wpcodex_main_menu в админке.

3. Создаём функцию вывода меню с поддержкой подменю

Далее напишем функцию, которая получит структуру меню и выведет её с вложенными списками для подменю.

Для этого используем функцию wp_get_nav_menu_items() и построим дерево элементов.

function wpcodex_get_menu_tree($menu_name) {
    $locations = get_nav_menu_locations();
    if (!isset($locations[$menu_name])) {
        return [];
    }
    $menu = wp_get_nav_menu_object($locations[$menu_name]);
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    
    $menu_tree = [];
    $items_by_parent = [];

    foreach ($menu_items as $item) {
        $items_by_parent[$item->menu_item_parent][] = $item;
    }

    $build_tree = function($parent_id) use (&$build_tree, $items_by_parent) {
        $branch = [];
        if (isset($items_by_parent[$parent_id])) {
            foreach ($items_by_parent[$parent_id] as $item) {
                $item->children = $build_tree($item->ID);
                $branch[] = $item;
            }
        }
        return $branch;
    };

    $menu_tree = $build_tree(0);
    return $menu_tree;
}

В этой функции мы сначала группируем все элементы по родительскому ID, а затем рекурсивно строим дерево. В итоге получаем массив объектов с вложенными свойствами children.

Выводим меню в HTML с вложенными подменю

Теперь создадим функцию для отображения меню в виде вложенного списка <ul></ul>, где подменю — это вложенные списки.

function wpcodex_render_menu($menu_tree) {
    if (empty($menu_tree)) {
        return;
    }
    echo '<ul class="wpcodex-menu">';
    foreach ($menu_tree as $item) {
        $has_children = !empty($item->children);
        $class = $has_children ? 'has-children' : '';
        echo '<li class="' . $class . '">';
        echo '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
        if ($has_children) {
            wpcodex_render_menu($item->children);
        }
        echo '</li>';
    }
    echo '</ul>';
}

Эта функция выводит список, добавляет класс has-children к элементам, у которых есть подменю, что удобно для стилизации.

Пример использования функций в шаблоне

В нужном месте вашей темы (например, в header.php) вызовите:

$menu_tree = wpcodex_get_menu_tree('wpcodex_main_menu');
wpcodex_render_menu($menu_tree);

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

Дополнительные советы по кастомизации и расширению меню

Добавление иконок к пунктам меню

Если нужно добавить иконки, можно использовать поле CSS-класса пункта меню в админке и выводить соответствующие иконки через CSS или добавить дополнительное поле с помощью плагинов ACF или Nav Menu Roles.

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

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

Использование плагина Clearfy Pro для оптимизации

Плагин Clearfy Pro поможет отключить лишние стили и скрипты, связанные с меню, улучшая скорость загрузки сайта при использовании кастомных меню.

Заключение

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