Как добавить динамические фильтры в темы WordPress: практические решения

Автор: Дмитрий Попов | Опубликовано: 30.03.2026

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

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

Динамические фильтры — это интерфейсные элементы, которые позволяют пользователям выбирать параметры (категории, теги, мета-поля, произвольные таксономии и др.) для быстрого отображения релевантных записей. В отличие от статичных фильтров, динамические подстраиваются под содержимое сайта и меняются в зависимости от доступных значений в базе данных.

Основные задачи динамических фильтров:

Улучшить навигацию и опыт пользователя;
Ускорить поиск нужного контента;
Снизить нагрузку на сервер за счёт более целевых запросов;
Повысить конверсию, если сайт коммерческий.

Реализовать такие фильтры можно вручную с помощью WP Query и AJAX или использовать готовые решения.

Реализация динамических фильтров в теме WordPress на примере кода

Для примера создадим фильтр по произвольной таксономии product_cat и мета-полю price для пользовательского типа записи product. Фильтр будет работать через AJAX, чтобы не перезагружать страницу.

1. Регистрация таксономии и мета-поля

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

function wptem_register_product_taxonomy() {
  register_taxonomy('product_cat', 'product', [
    'label' => 'Категории продуктов',
    'hierarchical' => true,
    'public' => true,
  ]);
}
add_action('init', 'wptem_register_product_taxonomy');

function wptem_add_price_meta() {
  register_post_meta('product', 'price', [
    'type' => 'number',
    'single' => true,
    'show_in_rest' => true,
  ]);
}
add_action('init', 'wptem_add_price_meta');

2. Вывод формы фильтра на фронтенде

Добавим в шаблон темы следующий HTML с динамическими значениями:

function wptem_show_product_filter() {
  $terms = get_terms(['taxonomy' => 'product_cat', 'hide_empty' => true]);
  
  echo '<form id="wptem-product-filter">';
  echo '<select name="product_cat"><option value="">Все категории</option>';
  foreach ($terms as $term) {
    echo '<option value="' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</option>';
  }
  echo '</select>';
  
  echo '<input type="number" name="min_price" placeholder="Мин. цена" />';
  echo '<input type="number" name="max_price" placeholder="Макс. цена" />';
  
  echo '<button type="submit">Фильтровать</button>';
  echo '</form>';
}
add_action('wp_footer', 'wptem_show_product_filter');

3. Обработка AJAX-запроса фильтрации

Зарегистрируем AJAX-обработчик и создадим WP_Query с параметрами фильтрации:

function wptem_filter_products_ajax() {
  $cat = isset($_POST['product_cat']) ? sanitize_text_field($_POST['product_cat']) : '';
  $min_price = isset($_POST['min_price']) ? floatval($_POST['min_price']) : 0;
  $max_price = isset($_POST['max_price']) ? floatval($_POST['max_price']) : 0;

  $meta_query = ['relation' => 'AND'];
  if ($min_price) {
    $meta_query[] = [
      'key' => 'price',
      'value' => $min_price,
      'compare' => '>=',
      'type' => 'NUMERIC',
    ];
  }
  if ($max_price) {
    $meta_query[] = [
      'key' => 'price',
      'value' => $max_price,
      'compare' => '<=',
      'type' => 'NUMERIC',
    ];
  }

  $tax_query = [];
  if ($cat) {
    $tax_query[] = [
      'taxonomy' => 'product_cat',
      'field' => 'slug',
      'terms' => $cat,
    ];
  }

  $args = [
    'post_type' => 'product',
    'posts_per_page' => 10,
    'meta_query' => $meta_query,
    'tax_query' => $tax_query,
  ];

  $query = new WP_Query($args);
  ob_start();
  if ($query->have_posts()) {
    echo '<ul>';
    while ($query->have_posts()) {
      $query->the_post();
      echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> — Цена: ' . get_post_meta(get_the_ID(), 'price', true) . '</li>';
    }
    echo '</ul>';
  } else {
    echo '<p>Товары не найдены.</p>';
  }
  wp_reset_postdata();
  $html = ob_get_clean();
  wp_send_json_success($html);
}
add_action('wp_ajax_wptem_filter_products', 'wptem_filter_products_ajax');
add_action('wp_ajax_nopriv_wptem_filter_products', 'wptem_filter_products_ajax');

4. JavaScript для отправки формы AJAX и вывода результата

Вставьте скрипт в футер или подключите отдельным файлом:

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wptem-product-filter');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const data = new FormData(form);
    data.append('action', 'wptem_filter_products');
    fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
      method: 'POST',
      body: data
    })
    .then(response => response.json())
    .then(result => {
      if (result.success) {
        let container = document.getElementById('wptem-filter-results');
        if (!container) {
          container = document.createElement('div');
          container.id = 'wptem-filter-results';
          form.parentNode.insertBefore(container, form.nextSibling);
        }
        container.innerHTML = result.data;
      }
    });
  });
});

Использование плагинов для динамических фильтров в WordPress

Если не хочется писать код, можно воспользоваться проверенными плагинами с поддержкой AJAX и динамического построения фильтров.

1. FacetWP

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

Подробнее: FacetWP на WPSHOP.RU

2. Filter Everything

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

Подробнее: Filter Everything на WPSHOP.RU

3. WPGPT для расширенной фильтрации

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

Подробнее: WPGPT на WPSHOP.RU

Оптимизация производительности динамических фильтров в WordPress

Фильтрация по мета-полям и таксономиям может создавать нагрузку на базу данных, особенно при большом объёме данных. Вот несколько советов, как избежать проблем:

Используйте индексы в базе данных — для часто используемых мета-полей (например, price) создайте индексы через SQL, чтобы ускорить запросы.
Кэширование результатов фильтрации — можно использовать transient API или плагины кэширования, чтобы не выполнять WP_Query при каждом запросе.
Лимитируйте количество выводимых записей — не показывайте все результаты сразу, используйте пагинацию или кнопку «Показать ещё».
Оптимизируйте фронтенд — минимизируйте и объединяйте JS, используйте асинхронные запросы.

Заключение по внедрению динамических фильтров

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

Если хотите автоматизировать сбор отзывов или анализ контента с помощью AI для умной фильтрации, обратите внимание на плагин WPGPT.