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

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

Что такое динамическое меню и зачем оно нужно

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

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

Создание и регистрация меню в WordPress

Первый шаг — зарегистрировать меню в теме или плагине. Сделаем это с помощью функции wpma_register_menus:

function wpma_register_menus() {
    register_nav_menus([
        'primary_menu' => __('Основное меню', 'wpma'),
        'footer_menu'  => __('Меню в подвале', 'wpma')
    ]);
}
add_action('after_setup_theme', 'wpma_register_menus');

Теперь в админке WordPress в разделе "Внешний вид - Меню" появятся два новых местоположения для меню. Но мы пойдём дальше и создадим меню программно, чтобы оно обновлялось автоматически.

Пример: создание динамического меню из категорий

Допустим, нам нужно вывести меню, в котором пункты — это все категории блога. Для этого напишем функцию wpma_get_dynamic_category_menu, которая вернёт HTML списка меню:

function wpma_get_dynamic_category_menu() {
    $categories = get_categories(['hide_empty' => false]);
    if (empty($categories)) {
        return '<p>Категории не найдены</p>';
    }

    $menu = '<ul class="wpma-menu">';
    foreach ($categories as $category) {
        $url = esc_url(get_category_link($category->term_id));
        $name = esc_html($category->name);
        $menu .= "<li><a href=\"{$url}\">{$name}</a></li>";
    }
    $menu .= '</ul>';

    return $menu;
}

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

echo wpma_get_dynamic_category_menu();

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

Динамическое меню из пользовательских типов записей (Custom Post Types)

Если на сайте используются кастомные типы записей, можно создать меню из их архивов. Например, для типа записей portfolio:

function wpma_get_cpt_archive_menu($post_type = 'portfolio') {
    $post_type_obj = get_post_type_object($post_type);
    if (!$post_type_obj || !$post_type_obj->has_archive) {
        return '<p>Архив типа записей не найден или не поддерживается.</p>';
    }

    $items = get_posts([
        'post_type'      => $post_type,
        'posts_per_page' => -1,
        'post_status'    => 'publish'
    ]);

    if (empty($items)) {
        return '<p>Записи не найдены</p>';
    }

    $menu = '<ul class="wpma-menu wpma-cpt-menu">';
    $archive_link = get_post_type_archive_link($post_type);
    $menu .= "<li><a href=\"{$archive_link}\">Все {$post_type_obj->labels->name}</a></li>";

    foreach ($items as $item) {
        $url = get_permalink($item->ID);
        $title = esc_html($item->post_title);
        $menu .= "<li><a href=\"{$url}\">{$title}</a></li>";
    }
    $menu .= '</ul>';

    return $menu;
}

Вывести меню можно так:

echo wpma_get_cpt_archive_menu('portfolio');

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

Динамическое меню с использованием фильтрации и AJAX

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

Регистрация AJAX обработчика

add_action('wp_ajax_wpma_filter_menu', 'wpma_filter_menu_callback');
add_action('wp_ajax_nopriv_wpma_filter_menu', 'wpma_filter_menu_callback');

function wpma_filter_menu_callback() {
    $tag = sanitize_text_field($_POST['tag'] ?? '');

    $args = [
        'post_type' => 'post',
        'posts_per_page' => -1
    ];

    if ($tag) {
        $args['tag'] = $tag;
    }

    $posts = get_posts($args);
    if (empty($posts)) {
        wp_send_json_error('Записи не найдены');
    }

    $menu = '<ul>';
    foreach ($posts as $post) {
        $menu .= '<li><a href="' . get_permalink($post->ID) . '">' . esc_html($post->post_title) . '</a></li>';
    }
    $menu .= '</ul>';

    wp_send_json_success($menu);
}

Подключение скрипта с AJAX-запросом

Добавьте следующий JavaScript в тему или плагин:

jQuery(document).ready(function($) {
    $('#wpma-tag-filter').on('change', function() {
        var tag = $(this).val();
        $.post(wpma_ajax_object.ajax_url, {
            action: 'wpma_filter_menu',
            tag: tag
        }, function(response) {
            if (response.success) {
                $('#wpma-dynamic-menu').html(response.data);
            } else {
                $('#wpma-dynamic-menu').html('<p>' + response.data + '</p>');
            }
        });
    });
});

Не забудьте локализовать скрипт и передать ajax_url в PHP:

function wpma_enqueue_scripts() {
    wp_enqueue_script('wpma-ajax', get_template_directory_uri() . '/js/wpma-ajax.js', ['jquery'], null, true);
    wp_localize_script('wpma-ajax', 'wpma_ajax_object', ['ajax_url' => admin_url('admin-ajax.php')]);
}
add_action('wp_enqueue_scripts', 'wpma_enqueue_scripts');

HTML для фильтра

Добавьте в шаблон форму фильтра:

<select id="wpma-tag-filter">
    <option value="">Все теги</option>
    <option value="novosti">Новости</option>
    <option value="obzory">Обзоры</option>
</select>
<div id="wpma-dynamic-menu"></div>

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

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

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

Также полезен плагин WPRemark, который позволяет гибко формировать списки и меню с использованием кастомных правил и фильтров.

Заключение

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