Как создать выбор фильтра на AJAX в WordPress: подробное техническое руководство

Автор: Максим Захаров | Опубликовано: 09.01.2026

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

Почему стоит использовать AJAX-фильтрацию в WordPress

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

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

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

Для реализации AJAX-фильтра необходимо выполнить несколько ключевых шагов:

Создать форму фильтра с нужными полями (например, категории, метки, пользовательские таксономии).
Подключить JavaScript, который будет перехватывать отправку формы и отправлять AJAX-запрос.
Создать PHP-обработчик AJAX-запроса, который выполняет WP_Query с параметрами фильтра.
Вернуть отфильтрованные записи в формате HTML и обновить содержимое страницы.

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

Например, у нас есть записи с пользовательской таксономией "genre" (жанры). Создадим простой селект для выбора жанра:

<form id="wpbegin_filter" action="" method="post">
  <select name="genre" id="wpbegin_genre">
    <option value="">Все жанры</option>
    <?php
    $genres = get_terms( array(
      'taxonomy' => 'genre',
      'hide_empty' => true,
    ) );
    foreach( $genres as $genre ) {
      echo '<option value="' . esc_attr($genre->slug) . '">' . esc_html($genre->name) . '</option>';
    }
    ?>
  </select>
  <button type="submit">Фильтровать</button>
</form>
<div id="wpbegin_results"></div>

Здесь мы выводим выпадающий список с жанрами и кнопку для отправки формы. Результаты будут отображаться в блоке с id wpbegin_results.

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

Добавим скрипт, который будет отправлять AJAX-запрос при отправке формы и обновлять результаты без перезагрузки:

jQuery(document).ready(function($){
  $('#wpbegin_filter').on('submit', function(e) {
    e.preventDefault();
    var genre = $('#wpbegin_genre').val();
    $.ajax({
      url: wpbegin_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wpbegin_filter_posts',
        genre: genre,
      },
      beforeSend: function() {
        $('#wpbegin_results').html('<p>Загрузка...</p>');
      },
      success: function(response) {
        $('#wpbegin_results').html(response);
      },
      error: function() {
        $('#wpbegin_results').html('<p>Ошибка загрузки данных</p>');
      }
    });
  });
});

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

function wpbegin_enqueue_scripts() {
  wp_enqueue_script('wpbegin-ajax-filter', get_template_directory_uri() . '/js/ajax-filter.js', array('jquery'), null, true );
  wp_localize_script('wpbegin-ajax-filter', 'wpbegin_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
  ));
}
add_action('wp_enqueue_scripts', 'wpbegin_enqueue_scripts');

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

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

function wpbegin_filter_posts_ajax() {
  $genre = isset($_POST['genre']) ? sanitize_text_field($_POST['genre']) : '';

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

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

  $query = new WP_Query( $args );

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

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

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

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

FacetWP — мощный плагин для динамической фильтрации с поддержкой AJAX и кастомных таксономий.
Filter Everything — бесплатный плагин с возможностью фильтровать любые записи и таксономии.
WPGPT Filter (от WPSHOP) — интеграция с искусственным интеллектом для умной фильтрации и рекомендаций.

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

Пример расширенного AJAX-фильтра с несколькими параметрами

Допустим, вы хотите добавить фильтрацию по жанру и году публикации. Расширим форму:

<form id="wpbegin_filter" action="" method="post">
  <select name="genre" id="wpbegin_genre"> ... </select>
  <select name="year" id="wpbegin_year">
    <option value="">Все года</option>
    <?php
      $years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date) FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' ORDER BY post_date DESC");
      foreach ($years as $year) {
        echo '<option value="' . esc_attr($year) . '">' . esc_html($year) . '</option>';
      }
    ?>
  </select>
  <button type="submit">Фильтровать</button>
</form>

И в PHP-коде добавим условие для фильтра по году:

$year = isset($_POST['year']) ? intval($_POST['year']) : 0;
if ( $year ) {
  $args['date_query'] = array(
    array(
      'year' => $year,
    ),
  );
}

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

Как создать выбор фильтра на AJAX в WordPress