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

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

Что такое хук wp_nav_menu_items и где он используется

Хук wp_nav_menu_items — это фильтр, который позволяет изменить HTML-разметку меню, сгенерированного функцией wp_nav_menu(). По сути, он дает возможность добавить, удалить или изменить пункты меню перед выводом на страницу.

Он принимает два параметра: текущий HTML-код меню и объект аргументов меню. Используя этот фильтр, можно легко добавить свои ссылки или элементы в любое меню, не меняя напрямую исходный код темы.

Пример базового использования фильтра:

add_filter('wp_nav_menu_items', 'wponline_add_menu_item', 10, 2);
function wponline_add_menu_item($items, $args) {
    if($args->theme_location == 'primary') {
        $items .= '<li><a href="https://wponline.ru">Наш сайт WPOnline</a></li>';
    }
    return $items;
}

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

Как добавить динамические пункты меню с пользовательскими данными

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

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

add_filter('wp_nav_menu_items', 'wponline_add_recent_posts_to_menu', 10, 2);
function wponline_add_recent_posts_to_menu($items, $args) {
    if($args->theme_location == 'primary') {
        $recent_posts = wp_get_recent_posts(array(
            'numberposts' => 3,
            'post_status' => 'publish'
        ));
        foreach($recent_posts as $post) {
            $items .= '<li><a href="' . get_permalink($post['ID']) . '">' . esc_html($post['post_title']) . '</a></li>';
        }
    }
    return $items;
}

Таким образом, меню автоматически обновляется при появлении новых записей.

Если вам нужно добавить более сложные элементы, например иконки или классы, можно формировать HTML с учетом стилей темы.

Управление позиционированием и условным выводом пунктов меню

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

Один из методов — преобразовать строку $items в массив DOM-элементов, вставить нужный элемент в нужное место и вернуть обратно в строку. Но это сложно и ресурсоемко.

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

Пример вставки пункта в начало меню:

add_filter('wp_nav_menu_objects', 'wponline_prepend_menu_item', 10, 2);
function wponline_prepend_menu_item($items, $args) {
    if($args->theme_location == 'primary') {
        $new_item = (object) array(
            'ID' => 1000001,
            'title' => 'Главная',
            'url' => home_url('/'),
            'menu_item_parent' => 0,
            'type' => '',
            'object' => '',
            'object_id' => 0,
            'classes' => array('custom-home-link'),
            'target' => '',
            'attr_title' => '',
            'description' => '',
            'xfn' => '',
            'status' => '',
        );
        array_unshift($items, $new_item);
    }
    return $items;
}

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

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

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

• Max Mega Menu — позволяет создавать многоуровневые и визуально богатые меню с поддержкой виджетов и элементов HTML.
• Menu Icons — добавляет иконки к пунктам меню, что улучшает визуальное восприятие.
• Nav Menu Roles — позволяет показывать пункты меню только определенным ролям пользователей.

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

Практические советы и рекомендации по работе с меню через хуки

Работая с хуками меню, учитывайте следующие моменты:

• Всегда проверяйте $args->theme_location, чтобы не влиять на все меню сразу.
• Используйте функции WordPress для генерации URL и экранирования текста (esc_html, esc_url).
• Для сложных структур меню лучше работать с wp_nav_menu_objects, а не с HTML в wp_nav_menu_items.
• Тестируйте изменения на разных устройствах и разрешениях экрана, чтобы избежать проблем с адаптивностью.

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