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

Автор: Виктор Орлов | Опубликовано: 18.12.2025

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

Создание и подключение динамического меню в WordPress

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

function wpgenerate_register_menus() {
    register_nav_menus([
        'header-menu' => 'Меню в шапке',
        'footer-menu' => 'Меню в подвале'
    ]);
}
add_action('after_setup_theme', 'wpgenerate_register_menus');

После этого в админке WordPress появится раздел «Внешний вид» → «Меню», где можно создать меню и привязать его к локациям header-menu или footer-menu.

Чтобы вывести меню в шаблоне, используйте вызов:

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

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

Расширение меню с помощью кастомного класса Walker_Nav_Menu

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

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

class WPGGenerate_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $icon_html = '<span class="menu-item-icon">🔹</span>';
        $item_output = $args->before;
        $item_output .= '<a href="' . esc_attr($item->url) . '">';
        $item_output .= $icon_html . apply_filters('the_title', $item->title, $item->ID);
        $item_output .= '</a>';
        $item_output .= $args->after;

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

Чтобы применить этот класс, передайте его в аргументах wp_nav_menu:

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

Добавление кастомных атрибутов к пунктам меню

Допустим, нужно добавить data-атрибут data-tracking с уникальным значением для аналитики. В нашем классе можно переопределить метод start_el и добавить атрибут:

class WPGGenerate_Walker_Nav_Menu_Tracking extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $tracking_id = 'menu-item-' . $item->ID;
        $attributes = ' href="' . esc_attr($item->url) . '" data-tracking="' . esc_attr($tracking_id) . '"';

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>' . apply_filters('the_title', $item->title, $item->ID) . '</a>';
        $item_output .= $args->after;

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

Такой подход позволяет интегрировать меню с внешними сервисами аналитики или кастомной логикой.

Динамическое добавление пунктов меню через фильтр wp_nav_menu_items

Иногда нужно в меню добавить пункты программно, которые не создаются в админке. Например, добавить ссылку «Мой профиль» для авторизованных пользователей.

Для этого удобно использовать фильтр wp_nav_menu_items:

function wpgenerate_add_profile_link_to_menu($items, $args) {
    if ($args->theme_location == 'header-menu' && is_user_logged_in()) {
        $profile_url = get_edit_profile_url(get_current_user_id());
        $items .= '<li class="menu-item"><a href="' . esc_url($profile_url) . '">Мой профиль</a></li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'wpgenerate_add_profile_link_to_menu', 10, 2);

Этот код добавит пункт меню с ссылкой на страницу редактирования профиля текущего пользователя в меню с локацией header-menu.

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

Всегда используйте функции esc_url() и esc_attr() для безопасного вывода ссылок и атрибутов.
Кэшируйте вывод меню, если структура меню не меняется часто, чтобы ускорить загрузку страниц.
Используйте атрибуты aria для улучшения доступности меню для пользователей с особыми потребностями.

Заключение

Динамическое меню в WordPress — это мощный инструмент, если использовать его гибко и с расширениями. Регистрация меню, вывод через wp_nav_menu, создание кастомных walker-классов и фильтрация пунктов позволяют создавать навигацию под любые задачи. На практике это помогает улучшать UX, интегрировать меню с внешними сервисами и поддерживать удобство управления в админке.

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