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

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

Почему стоит использовать динамическое меню в WordPress

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

WordPress из коробки поддерживает динамические меню через систему wp_nav_menu() и регистрацию меню в теме. Но часто требуется более тонкая настройка — вывод меню с дополнительной логикой или с динамическим формированием элементов.

Регистрация меню с помощью wp7_register_dynamic_menu()

Начнем с регистрации меню в файле functions.php. Создадим функцию wp7_register_dynamic_menu(), чтобы зарегистрировать меню с уникальным идентификатором:

function wp7_register_dynamic_menu() {
    register_nav_menu('wp7-dynamic-menu', __('WP7 Динамическое меню'));
}
add_action('after_setup_theme', 'wp7_register_dynamic_menu');

Эта функция добавит в админке WordPress пункт меню с названием «WP7 Динамическое меню», которое можно будет редактировать.

Создание кастомной функции для вывода меню с динамическими элементами

Стандартный вызов wp_nav_menu() выводит предопределённые пункты, но мы можем гибко управлять элементами меню с помощью фильтров и кастомного вывода.

Пример функции wp7_get_dynamic_menu_items() формирует элементы меню на основе категорий и последних публикаций:

function wp7_get_dynamic_menu_items() {
    $items = [];

    // Добавляем пункт Главная
    $items[] = [
        'title' => 'Главная',
        'url' => home_url('/'),
        'id' => 'home'
    ];

    // Получаем категории
    $categories = get_categories(['hide_empty' => true]);
    foreach ($categories as $cat) {
        $items[] = [
            'title' => $cat->name,
            'url' => get_category_link($cat->term_id),
            'id' => 'cat-' . $cat->term_id
        ];
    }

    // Добавляем последние 3 поста
    $recent_posts = wp_get_recent_posts(['numberposts' => 3]);
    foreach ($recent_posts as $post) {
        $items[] = [
            'title' => $post['post_title'],
            'url' => get_permalink($post['ID']),
            'id' => 'post-' . $post['ID']
        ];
    }

    return $items;
}

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

Выводим динамическое меню в шаблоне

Создадим функцию wp7_render_dynamic_menu(), которая принимает массив элементов и выводит их в виде HTML-меню:

function wp7_render_dynamic_menu() {
    $items = wp7_get_dynamic_menu_items();
    if (empty($items)) {
        echo '<!-- меню пусто -->';
        return;
    }

    echo '<ul class="wp7-dynamic-menu">';
    foreach ($items as $item) {
        $title = esc_html($item['title']);
        $url = esc_url($item['url']);
        echo "<li id=\"menu-item-{$item['id']}\"><a href=\"$url\">$title</a></li>";
    }
    echo '</ul>';
}

В шаблоне темы (например, в header.php) можно вызвать wp7_render_dynamic_menu() для вывода меню.

Интеграция с плагином WPStories для добавления интерактивных пунктов меню

Плагин WPStories позволяет создавать сторис и интерактивный контент. Мы можем добавить в меню ссылки на активные сторис, чтобы повысить вовлечённость пользователей.

Для этого расширим функцию wp7_get_dynamic_menu_items() следующим кодом:

function wp7_get_dynamic_menu_items() {
    $items = [];

    // ... предыдущие пункты меню ...

    // Добавляем активные сторис из WPStories
    if (function_exists('wpstories_get_active_stories')) {
        $stories = wpstories_get_active_stories();
        foreach ($stories as $story) {
            $items[] = [
                'title' => 'Сторис: ' . $story->title,
                'url' => get_permalink($story->ID),
                'id' => 'story-' . $story->ID
            ];
        }
    }

    return $items;
}

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

Стилизация и адаптивность меню

Для корректного отображения добавим базовые CSS стили. Например, в style.css темы:

.wp7-dynamic-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}
.wp7-dynamic-menu li a {
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    display: block;
}
.wp7-dynamic-menu li a:hover {
    background-color: #eee;
    border-radius: 4px;
}

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

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

Динамическое меню, созданное с помощью функций wp7_register_dynamic_menu(), wp7_get_dynamic_menu_items() и wp7_render_dynamic_menu(), позволяет гибко управлять навигацией сайта и автоматически обновлять её в зависимости от контента.

Интеграция с плагином WPStories добавляет интерактивность и современный UX.

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