Как создать фильтры для AJAX-запросов в WordPress с примерами кода

Автор: Лев Борисов | Опубликовано: 21.01.2026

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

Что такое AJAX-фильтры и зачем они нужны в WordPress

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

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

В основе лежит JavaScript, который отправляет запросы к серверу, а сервер, в свою очередь, возвращает отфильтрованные данные в формате JSON или HTML.

Создаем AJAX-фильтр: общий алгоритм работы

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

Добавление HTML-формы фильтра на страницу
Подключение JavaScript для отправки AJAX-запросов при изменении параметров фильтра
Обработка AJAX-запроса на стороне сервера через хуки WordPress
Формирование и возврат отфильтрованных данных
Обновление контента на странице без перезагрузки

Пример HTML-формы фильтра

Вставьте на нужную страницу простой фильтр по категориям:

<form id="wp5-ajax-filter">
  <select name="category" id="wp5-category-select">
    <option value="">Все категории</option>
    <option value="news">Новости</option>
    <option value="reviews">Обзоры</option>
  </select>
</form>
<div id="wp5-filter-results"></div>

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

Добавьте в тему или плагин следующий скрипт. Он будет реагировать на выбор категории и отправлять запрос:

jQuery(document).ready(function($) {
  $('#wp5-category-select').on('change', function() {
    var selectedCategory = $(this).val();
    $.ajax({
      url: wp5_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wp5_filter_posts',
        category: selectedCategory
      },
      success: function(response) {
        $('#wp5-filter-results').html(response);
      },
      error: function() {
        $('#wp5-filter-results').html('<p>Ошибка загрузки данных</p>');
      }
    });
  });
});

Обратите внимание, что wp5_ajax_object.ajax_url — это переменная, которую нужно зарегистрировать через wp_localize_script в PHP.

Обработка AJAX-запроса на сервере

Для обработки запроса добавьте в functions.php темы или в файл плагина следующий код:

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

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

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

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
      echo '<p>' . get_the_excerpt() . '</p>';
    }
  } else {
    echo '<p>Записей не найдено.</p>';
  }
  wp_reset_postdata();
  wp_die();
}
add_action('wp_ajax_wp5_filter_posts', 'wp5_ajax_filter_posts');
add_action('wp_ajax_nopriv_wp5_filter_posts', 'wp5_ajax_filter_posts');

// Регистрация переменной для AJAX URL
function wp5_enqueue_scripts() {
  wp_enqueue_script('wp5-ajax-filter', get_template_directory_uri() . '/js/wp5-ajax-filter.js', ['jquery'], null, true);
  wp_localize_script('wp5-ajax-filter', 'wp5_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php')
  ]);
}
add_action('wp_enqueue_scripts', 'wp5_enqueue_scripts');

Расширение фильтра: работа с пользовательскими полями и мета-запросами

Чтобы сделать фильтр более гибким, можно добавлять условия по мета-полям. Например, фильтрация товаров по цене или атрибутам.

Пример расширения аргументов WP_Query для фильтра по цене:

$meta_query = [];

if (!empty($_POST['min_price']) && !empty($_POST['max_price'])) {
  $meta_query[] = [
    'key' => 'price',
    'value' => [floatval($_POST['min_price']), floatval($_POST['max_price'])],
    'compare' => 'BETWEEN',
    'type' => 'NUMERIC'
  ];
}

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

В JavaScript добавьте соответствующие поля ввода для цен и передавайте их в AJAX-запрос.

Полезные плагины для AJAX-фильтрации

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

Clearfy Pro — оптимизация и расширение функционала, в том числе управление AJAX-запросами
WPRemark — инструмент для улучшения отзывов с AJAX-загрузкой

Эти решения помогут улучшить производительность и удобство фильтров на сайте.

Советы для оптимизации AJAX-фильтров в WordPress

Для эффективной работы фильтров не забывайте:

Кэшировать результаты, чтобы снизить нагрузку на базу данных
Использовать nonce-поля для безопасности AJAX-запросов
Минимизировать объем возвращаемых данных — отдавайте только нужный HTML или JSON
Тестировать работу фильтров на разных устройствах и браузерах
Следить за быстродействием, используя инструменты отладки и профилирования

Пример добавления nonce в AJAX-запрос:

function wp5_enqueue_scripts() {
  wp_enqueue_script('wp5-ajax-filter', get_template_directory_uri() . '/js/wp5-ajax-filter.js', ['jquery'], null, true);
  wp_localize_script('wp5-ajax-filter', 'wp5_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wp5_ajax_nonce')
  ]);
}

// В JS добавить nonce в data
$.ajax({
  data: {
    action: 'wp5_filter_posts',
    category: selectedCategory,
    security: wp5_ajax_object.nonce
  },
  ...
});

// Проверка nonce в обработчике
function wp5_ajax_filter_posts() {
  check_ajax_referer('wp5_ajax_nonce', 'security');
  // остальной код
}