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

Автор: Людмила Николаева | Опубликовано: 01.11.2025

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

Регистрация меню в WordPress: функция wplessons_register_menu

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

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

После добавления этого кода в файл functions.php вашей темы, вы увидите новые локации меню в админке WordPress в разделе «Внешний вид» -> «Меню».

Вывод меню в шаблоне с помощью wp_nav_menu

Чтобы вывести меню в нужном месте шаблона (например, в файле header.php для главного меню), используйте функцию wp_nav_menu. Она принимает массив параметров, где ключевой — 'theme_location', указывающий на зарегистрированную локацию.

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

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

Настройка CSS классов и структуры меню

Параметры container_class и menu_class позволяют задать свои классы для обёртки и списка. В дальнейшем их можно использовать для стилизации в CSS.

Кроме того, вы можете использовать параметр items_wrap для изменения обёртки списка меню. По умолчанию это <ul id="%1$s" class="%2$s">%3$s</ul>, где %1$s — id списка, %2$s — класс, а %3$s — пункты меню.

Кастомизация вывода меню через фильтры и Walker

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

class Wplessons_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth=0, $args=null, $id=0) {
        $icon = get_post_meta($item->ID, '_menu_item_icon', true);
        $icon_html = $icon ? '<i class="' . esc_attr($icon) . '"></i> ' : '';
        $output .= '<li><a href="' . esc_attr($item->url) . '">' . $icon_html . esc_html($item->title) . '</a>';
    }
    function end_el(&$output, $item, $depth=0, $args=null) {
        $output .= '</li>';
    }
}

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

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

Чтобы добавить иконки к пунктам меню, можно использовать дополнительное поле в админке с помощью плагина Advanced Custom Fields (ACF) или вручную через фильтр wp_nav_menu_item_custom_fields. Пример добавления метаполя выходит за рамки данной статьи, но это гибкий подход к кастомизации.

Примеры полезных плагинов для работы с меню

Если вы предпочитаете готовые решения, обратите внимание на следующие плагины:

Max Mega Menu — позволяет создавать мегаменю с расширенной структурой и стилями без кода.
WP Mega Menu — аналогичный плагин с визуальным конструктором.
Menu Icons by ThemeIsle — простой способ добавить иконки к пунктам меню.

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

Дополнительные советы по работе с меню в WordPress

Кэширование меню

Для ускорения загрузки сайта рекомендуем кэшировать меню, особенно если оно сложное. Можно использовать транзиенты WordPress или внешний кеш. Пример кода для кэширования меню с помощью транзиентов:

function wplessons_get_cached_menu($location) {
    $cache_key = 'wplessons_menu_' . $location;
    $menu = get_transient($cache_key);
    if (false === $menu) {
        ob_start();
        wp_nav_menu(['theme_location' => $location]);
        $menu = ob_get_clean();
        set_transient($cache_key, $menu, HOUR_IN_SECONDS);
    }
    return $menu;
}

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

Работа с адаптивным меню и мобильными версиями

Создание адаптивного меню — отдельная тема, но важно отметить, что при кастомизации меню через wp_nav_menu стоит учитывать мобильные устройства. Часто используют JavaScript и CSS для реализации выпадающих и бургер-меню. Важно правильно структурировать HTML, чтобы обеспечить доступность и удобство.

Например, добавьте кнопку для открытия меню с aria-атрибутами и переключайте классы через JS:

<button aria-expanded="false" aria-controls="primary-menu" id="menu-toggle">Меню</button>
<nav id="site-navigation" class="main-navigation">
    <?php wp_nav_menu(['theme_location' => 'header-menu', 'menu_id' => 'primary-menu']); ?>
</nav>

И через JavaScript меняйте aria-expanded и видимость меню.

Итог

Создание и кастомизация меню в WordPress — задача, требующая понимания функций API, хуков и возможностей темы. Использование функций register_nav_menus и wp_nav_menu, а также наследование от Walker_Nav_Menu позволяет создавать уникальные и удобные меню без лишнего кода или плагинов. Плагины помогут ускорить разработку, но знание основ всегда полезно для гибкой настройки.

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