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

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

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

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

Кроме того, кастомное меню удобно интегрировать с современными темами, например, Reboot или Root, которые поддерживают кастомные walker-классы для меню, позволяя гибко управлять HTML-разметкой.

Создание функции для вывода многоуровневого меню в WordPress

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

function wpupgrade_custom_menu() {
    $menu_name = 'primary'; // Имя меню, зарегистрированного в теме
    if ( ($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
        $menu = wp_get_nav_menu_object($locations[$menu_name]);
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_tree = wpupgrade_build_tree($menu_items);
        echo '<ul class="wpupgrade-menu">';
        wpupgrade_menu_render($menu_tree);
        echo '</ul>';
    } else {
        echo 'Меню не найдено.';
    }
}

// Функция строит дерево меню из плоского массива
function wpupgrade_build_tree(array $elements, $parentId = 0) {
    $branch = [];
    foreach ($elements as $element) {
        if ((int)$element->menu_item_parent === $parentId) {
            $children = wpupgrade_build_tree($elements, $element->ID);
            if ($children) {
                $element->children = $children;
            } else {
                $element->children = [];
            }
            $branch[] = $element;
        }
    }
    return $branch;
}

// Функция рекурсивно выводит меню
function wpupgrade_menu_render($items) {
    foreach ($items as $item) {
        $has_children = !empty($item->children);
        $class = $has_children ? 'has-children' : '';
        echo '<li class="' . esc_attr($class) . '">';
        echo '<a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a>';
        if ($has_children) {
            echo '<ul class="sub-menu">';
            wpupgrade_menu_render($item->children);
            echo '</ul>';
        }
        echo '</li>';
    }
}

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

Регистрация меню и добавление вызова функции в тему WordPress

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

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

И в нужном месте шаблона (например, header.php) вызвать нашу функцию:

<?php wpupgrade_custom_menu(); ?>

Добавление стилей для многоуровневого меню

Для корректного отображения вложенных пунктов меню добавим CSS. Ниже пример базовой стилизации с выпадающими подменю при наведении:

.wpupgrade-menu, .wpupgrade-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wpupgrade-menu > li {
    display: inline-block;
    position: relative;
}

.wpupgrade-menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.wpupgrade-menu li.has-children > a::after {
    content: ' ▼';
    font-size: 0.7em;
}

.wpupgrade-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 999;
}

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

.wpupgrade-menu ul.sub-menu li {
    display: block;
}

.wpupgrade-menu ul.sub-menu li a {
    padding: 8px 12px;
    white-space: nowrap;
}

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

Добавление динамического поведения на JavaScript

Для мобильных устройств и более удобного управления меню добавим простой JavaScript, который позволит раскрывать подменю по клику:

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.wpupgrade-menu li.has-children > a');
    menuItems.forEach(function(item) {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const submenu = this.nextElementSibling;
            if (submenu.style.display === 'block') {
                submenu.style.display = 'none';
            } else {
                submenu.style.display = 'block';
            }
        });
    });
});

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

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

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

• Clearfy Pro — помогает оптимизировать и расширить меню, включая управление классами и атрибутами.
• WPCommunity — если нужно интегрировать форум и сложную навигацию.

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

Советы по оптимизации и безопасности кастомного меню

При работе с меню важно использовать функции экранирования esc_html, esc_url для вывода, чтобы избежать XSS-уязвимостей. Также не стоит забывать про кэширование — при больших меню можно закешировать результат функции wpupgrade_custom_menu с помощью Transients API для ускорения загрузки.

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

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