Как создать динамический фильтр тем в WordPress с пагинацией и AJAX

Автор: Михаил Петров | Опубликовано: 15.04.2026

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

Почему динамический фильтр тем важен для сайта

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

Пагинация помогает разбить длинный список результатов на удобные части, что особенно важно для SEO и производительности.

В итоге вы получаете современный, отзывчивый интерфейс каталога тем, который значительно повысит вовлечённость пользователей.

Основные шаги реализации динамического фильтра тем

Реализация будет состоять из нескольких этапов:

Создание пользовательского запроса WP_Query с фильтрами;
Реализация AJAX-обработчика для динамической подгрузки;
Добавление пагинации с обновлением через AJAX;
Интеграция фильтров в интерфейс темы.

Рассмотрим каждый шаг подробно с примерами кода.

1. Создание пользовательского запроса с фильтрами

Предположим, что у вас есть кастомный тип записей wp_theme, который хранит темы, и у каждой темы есть таксономия theme_category для категорий.

Функция будет формировать WP_Query с учётом выбранных параметров фильтра.

function wp_themes_get_filtered_themes_query($category = '', $paged = 1) {
    $args = [
        'post_type' => 'wp_theme',
        'posts_per_page' => 10,
        'paged' => $paged
    ];

    if ($category) {
        $args['tax_query'] = [
            [
                'taxonomy' => 'theme_category',
                'field' => 'slug',
                'terms' => $category
            ]
        ];
    }

    return new WP_Query($args);
}

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

2. Реализация AJAX-обработчика

Чтобы фильтр работал динамически, нам нужен AJAX-запрос, который будет возвращать HTML с нужными темами.

Добавим обработчик в functions.php:

add_action('wp_ajax_wp_themes_filter', 'wp_themes_ajax_filter');
add_action('wp_ajax_nopriv_wp_themes_filter', 'wp_themes_ajax_filter');

function wp_themes_ajax_filter() {
    $category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;

    $query = wp_themes_get_filtered_themes_query($category, $paged);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            ?>
            <div class="theme-item">
                <h3><?php the_title(); ?></h3>
                <div><?php the_excerpt(); ?></div>
            </div>
            <?php
        }
        wp_reset_postdata();

        // Пагинация
        $total_pages = $query->max_num_pages;
        if ($total_pages > 1) {
            echo '<div class="wp-themes-pagination">';
            for ($i = 1; $i <= $total_pages; $i++) {
                echo '<button class="wp-themes-page-btn" data-page="' . $i . '">' . $i . '</button>';
            }
            echo '</div>';
        }

        $html = ob_get_clean();
        wp_send_json_success(['html' => $html]);
    } else {
        wp_send_json_success(['html' => '<p>Темы не найдены.</p>']);
    }
    wp_die();
}

Этот обработчик получает данные фильтра, выполняет запрос и возвращает HTML для обновления контента.

3. Добавление JavaScript для динамического обновления

Теперь напишем скрипт, который будет отправлять AJAX-запрос при выборе фильтра или смене страницы.

jQuery(document).ready(function($) {
    function wp_themes_load_themes(category, paged) {
        $.ajax({
            url: wp_themes_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wp_themes_filter',
                category: category,
                paged: paged
            },
            success: function(response) {
                if (response.success) {
                    $('#wp-themes-list').html(response.data.html);
                }
            }
        });
    }

    // Обработка выбора категории
    $('#wp-themes-filter').on('change', function() {
        const category = $(this).val();
        wp_themes_load_themes(category, 1);
    });

    // Обработка клика по пагинации
    $('#wp-themes-list').on('click', '.wp-themes-page-btn', function() {
        const page = $(this).data('page');
        const category = $('#wp-themes-filter').val();
        wp_themes_load_themes(category, page);
    });
});

Не забудьте локализовать скрипт, чтобы передать AJAX URL:

wp_enqueue_script('wp-themes-filter', get_template_directory_uri() . '/js/wp-themes-filter.js', ['jquery'], null, true);
wp_localize_script('wp-themes-filter', 'wp_themes_ajax_object', ['ajax_url' => admin_url('admin-ajax.php')]);

4. Верстка и HTML интерфейс фильтра

В шаблоне темы добавьте селект для фильтра и контейнер для вывода тем:

<select id="wp-themes-filter" name="theme_category">
    <option value="">Все категории</option>
    <?php
    $categories = get_terms(['taxonomy' => 'theme_category', 'hide_empty' => true]);
    foreach ($categories as $category) {
        echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
    }
    ?>
</select>

<div id="wp-themes-list">
    <?php
    // Выводим начальный список тем без фильтра
    $initial_query = wp_themes_get_filtered_themes_query();
    if ($initial_query->have_posts()) {
        while ($initial_query->have_posts()) {
            $initial_query->the_post();
            ?>
            <div class="theme-item">
                <h3><?php the_title(); ?></h3>
                <div><?php the_excerpt(); ?></div>
            </div>
            <?php
        }
        wp_reset_postdata();
    } else {
        echo '<p>Темы не найдены.</p>';
    }
    ?>
</div>

Итоги

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

Если вы хотите автоматизировать и ускорить разработку, обратите внимание на готовые плагины и инструменты из экосистемы WPSHOP, которые помогут создать функциональный и удобный каталог тем WordPress.