Как создать уникальный фильтр для постов в WordPress с AJAX

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

Основы создания AJAX-фильтра в WordPress

AJAX (Asynchronous JavaScript and XML) позволяет обновлять части страницы без перезагрузки. В WordPress для работы с AJAX нужно зарегистрировать обработчики запросов через хуки wp_ajax_{action} и wp_ajax_nopriv_{action}, если запросы будут выполнять неавторизованные пользователи.

Для фильтрации постов AJAX-запрос отправляет параметры фильтра на сервер, где WP_Query возвращает подходящие записи, а затем результат возвращается в JS и выводится на страницу.

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

Регистрация AJAX-обработчика в functions.php

Добавьте в файл functions.php вашей темы следующий код:

function wpexperts_ajax_filter_posts() {
    $category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
    $tag = isset($_POST['tag']) ? sanitize_text_field($_POST['tag']) : '';

    $args = [
        'post_type' => 'post',
        'posts_per_page' => 5,
        'post_status' => 'publish',
    ];

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

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

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<article><h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
            echo '<div>' . get_the_excerpt() . '</div></article>';
        }
    } else {
        echo '<p>Посты не найдены по заданным параметрам.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wpexperts_filter_posts', 'wpexperts_ajax_filter_posts');
add_action('wp_ajax_nopriv_wpexperts_filter_posts', 'wpexperts_ajax_filter_posts');

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

Подключение скрипта и локализация AJAX URL

Чтобы отправлять AJAX-запросы, нужно подключить JS и передать в него URL обработчика:

function wpexperts_enqueue_scripts() {
    wp_enqueue_script('wpexperts-filter', get_template_directory_uri() . '/js/filter.js', ['jquery'], null, true);
    wp_localize_script('wpexperts-filter', 'wpexperts_ajax', [
        'ajaxurl' => admin_url('admin-ajax.php'),
    ]);
}
add_action('wp_enqueue_scripts', 'wpexperts_enqueue_scripts');

Скрипт filter.js будет содержать логику отправки запроса и вывода результата.

Пример JS-кода для AJAX-фильтра

jQuery(document).ready(function($) {
    $('#wpexperts-filter-form').on('submit', function(e) {
        e.preventDefault();
        let category = $('#filter-category').val();
        let tag = $('#filter-tag').val();

        $.ajax({
            url: wpexperts_ajax.ajaxurl,
            method: 'POST',
            data: {
                action: 'wpexperts_filter_posts',
                category: category,
                tag: tag
            },
            beforeSend: function() {
                $('#wpexperts-posts-container').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('#wpexperts-posts-container').html(response);
            },
            error: function() {
                $('#wpexperts-posts-container').html('<p>Ошибка загрузки данных.</p>');
            }
        });
    });
});

Создание HTML-формы фильтра

В нужном месте темы добавьте следующий HTML для фильтра:

<form id="wpexperts-filter-form">
    <label for="filter-category">Категория:</label>
    <select id="filter-category" name="category">
        <option value="">Все</option>
        <?php
        $categories = get_categories();
        foreach ($categories as $cat) {
            echo '<option value="' . esc_attr($cat->slug) . '">' . esc_html($cat->name) . '</option>';
        }
        ?>
    </select>

    <label for="filter-tag">Тег:</label>
    <select id="filter-tag" name="tag">
        <option value="">Все</option>
        <?php
        $tags = get_tags();
        foreach ($tags as $tag) {
            echo '<option value="' . esc_attr($tag->slug) . '">' . esc_html($tag->name) . '</option>';
        }
        ?>
    </select>

    <button type="submit">Фильтровать</button>
</form>

<div id="wpexperts-posts-container"></div>

Такой фильтр позволяет выбрать категорию и тег, нажать кнопку «Фильтровать» и получить список постов без перезагрузки страницы.

Дополнительные советы для улучшения фильтра

• Добавьте пагинацию, подгружая посты по частям.
• Можете расширить фильтр по дате, автору, метаполям.
• Для более сложных фильтров рекомендую посмотреть плагины Clearfy Pro — он умеет оптимизировать запросы и добавлять полезные настройки по фильтрации Подробнее на WPSHOP.

Заключение

Создание собственного AJAX-фильтра — отличный способ повысить интерактивность сайта и улучшить опыт пользователей. Приведённый пример легко адаптируется под любые типы записей и условия. Используйте правильную санитизацию данных и не забывайте про безопасность.

Если хотите готовое решение с расширенными возможностями, советую обратить внимание на плагины из WPShop, например WPRemark для отзывов и рейтингов с AJAX-подгрузкой.