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

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

Почему стоит использовать AJAX для фильтрового поиска в WordPress

AJAX (Asynchronous JavaScript and XML) позволяет обмениваться данными с сервером и обновлять содержимое страницы без её полной перезагрузки. Это значительно улучшает пользовательский опыт, ускоряет взаимодействие и снижает нагрузку на сервер.

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

При правильной реализации AJAX-фильтрация помогает создать интерфейс, похожий на крупные маркетплейсы и каталоги, при этом не требуя установки громоздких плагинов.

Подготовка: создание кастомного шаблона и подключение скриптов

Для начала создадим кастомный шаблон страницы, где будет размещён фильтр и блок с результатами.

<?php
/*
Template Name: Ajax Filter Search
*/
get_header(); ?>

<div id="wpsource-filter">
    <select id="wpsource-category-filter">
        <option value="">Все категории</option>
        <?php
        $categories = get_categories();
        foreach ($categories as $cat) {
            echo '<option value="' . $cat->term_id . '">' . esc_html($cat->name) . '</option>';
        }
        ?>
    </select>
</div>

<div id="wpsource-search-results">
    <!-- Здесь будут результаты поиска -->
</div>

<?php get_footer(); ?>

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

function wpsource_enqueue_filter_scripts() {
    if (is_page_template('template-ajax-filter-search.php')) {
        wp_enqueue_script('wpsource-ajax-filter', get_template_directory_uri() . '/js/wpsource-ajax-filter.js', array('jquery'), '1.0', true);
        wp_localize_script('wpsource-ajax-filter', 'wpsource_ajax_obj', array(
            'ajaxurl' => admin_url('admin-ajax.php')
        ));
    }
}
add_action('wp_enqueue_scripts', 'wpsource_enqueue_filter_scripts');

Создание обработчика AJAX-запроса в WordPress

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

function wpsource_ajax_filter_search() {
    $category = isset($_POST['category']) ? intval($_POST['category']) : 0;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 10,
    );

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

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="wpsource-post-item">';
            echo '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
            echo '<p>' . get_the_excerpt() . '</p>';
            echo '</div>';
        }
    } else {
        echo '<p>Результаты не найдены.</p>';
    }

    wp_die();
}
add_action('wp_ajax_wpsource_filter_search', 'wpsource_ajax_filter_search');
add_action('wp_ajax_nopriv_wpsource_filter_search', 'wpsource_ajax_filter_search');

JavaScript для обработки событий и отправки AJAX-запроса

Создаём файл wpsource-ajax-filter.js в папке /js/ темы со следующим содержимым:

jQuery(document).ready(function($) {
    $('#wpsource-category-filter').on('change', function() {
        var category = $(this).val();

        $.ajax({
            url: wpsource_ajax_obj.ajaxurl,
            type: 'POST',
            data: {
                action: 'wpsource_filter_search',
                category: category
            },
            beforeSend: function() {
                $('#wpsource-search-results').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('#wpsource-search-results').html(response);
            },
            error: function() {
                $('#wpsource-search-results').html('<p>Произошла ошибка. Попробуйте позже.</p>');
            }
        });
    });

    // Инициируем первый запрос при загрузке страницы
    $('#wpsource-category-filter').trigger('change');
});

Расширение фильтра: добавление произвольных полей и таксономий

Часто требуется фильтровать не только по категории, но и по произвольным полям (мета-полям) или дополнительным таксономиям. Рассмотрим, как добавить, например, фильтр по мета-полю price.

Добавим в шаблон новый селект для выбора диапазона цены:

<select id="wpsource-price-filter">
    <option value="">Любая цена</option>
    <option value="0-1000">До 1000</option>
    <option value="1000-5000">От 1000 до 5000</option>
    <option value="5000-">Более 5000</option>
</select>

Обновим JavaScript для передачи значения ценового фильтра:

var price = $('#wpsource-price-filter').val();

// Добавить в data:
price: price

В PHP-функции нужно добавить обработку мета-запроса:

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

if ($price) {
    $price_parts = explode('-', $price);
    $meta_query = array('relation' => 'AND');

    if ($price_parts[0] !== '') {
        $meta_query[] = array(
            'key' => 'price',
            'value' => intval($price_parts[0]),
            'compare' => '>=',
            'type' => 'NUMERIC'
        );
    }
    if (isset($price_parts[1]) && $price_parts[1] !== '') {
        $meta_query[] = array(
            'key' => 'price',
            'value' => intval($price_parts[1]),
            'compare' => '<=',
            'type' => 'NUMERIC'
        );
    }

    $args['meta_query'] = $meta_query;
}

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

Использование плагинов для создания AJAX фильтров

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

• WPGPT с функцией создания кастомных AJAX фильтров (подробнее на wpshop.ru).
• Clearfy Pro — оптимизационный плагин, который улучшает производительность AJAX запросов.
• ABC Pagination для удобной подгрузки постраничных данных через AJAX.

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

Советы по оптимизации и безопасности AJAX фильтров

AJAX-запросы могут стать узким местом в производительности сайта, если не оптимизировать запросы и не ограничивать нагрузку. Вот несколько рекомендаций:

• Используйте posts_per_page с ограничением, чтобы не возвращать слишком много данных за один запрос.
• Кешируйте результаты запросов, например, с помощью Transients API или Redis (см. статью на wpsource.ru).
• Обязательно проверяйте и фильтруйте входящие данные для предотвращения SQL-инъекций и XSS.
• Если AJAX обрабатывает сложные фильтры, рассмотрите использование WP REST API с авторизацией и пагинацией.

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