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

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

Почему динамическая фильтрация таксономий важна для сайта на WordPress

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

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

Для реализации динамической фильтрации нам понадобится использовать AJAX, а также написать PHP-функции, которые будут обрабатывать запросы и возвращать отфильтрованные записи.

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

Для начала необходимо понять, какие таксономии мы хотим фильтровать. Допустим, у нас есть пользовательская таксономия product_type и стандартная категория category.

Основные шаги реализации:

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

Для удобства используем стандартные хуки WordPress для AJAX-запросов: wp_ajax_ и wp_ajax_nopriv_.

Пример HTML для фильтра

Для примера создадим простой фильтр с чекбоксами для таксономии product_type:

<div id="wpteam-filter">
  <h3>Фильтр по типу продукта</h3>
  <form id="wpteam-filter-form">
    <label><input type="checkbox" name="product_type[]" value="book"> Книги</label><br>
    <label><input type="checkbox" name="product_type[]" value="video"> Видео</label><br>
    <label><input type="checkbox" name="product_type[]" value="software"> Софт</label><br>
    <button type="submit">Применить фильтр</button>
  </form>
</div>

<div id="wpteam-filter-results">
  <!-- Здесь будут отображаться отфильтрованные записи -->
</div>

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

Подключим скрипт, который будет собирать выбранные значения и отправлять их на сервер:

jQuery(document).ready(function($) {
  $('#wpteam-filter-form').on('submit', function(e) {
    e.preventDefault();

    var productTypes = [];
    $('input[name="product_type[]"]:checked').each(function() {
      productTypes.push($(this).val());
    });

    $.ajax({
      url: wpteam_ajax_object.ajax_url,
      method: 'POST',
      data: {
        action: 'wpteam_filter_products',
        product_type: productTypes
      },
      success: function(response) {
        $('#wpteam-filter-results').html(response);
      },
      error: function() {
        $('#wpteam-filter-results').html('<p>Ошибка загрузки данных.</p>');
      }
    });
  });
});

Этот код предполагает, что в wp_localize_script передана переменная wpteam_ajax_object с параметром ajax_url.

PHP: обработка AJAX-запроса и формирование результата

Добавим в functions.php или в свой плагин следующий код:

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

add_action('wp_ajax_wpteam_filter_products', 'wpteam_filter_products_callback');
add_action('wp_ajax_nopriv_wpteam_filter_products', 'wpteam_filter_products_callback');

function wpteam_filter_products_callback() {
  $product_types = isset($_POST['product_type']) ? array_map('sanitize_text_field', (array) $_POST['product_type']) : array();

  $tax_query = array('relation' => 'AND');
  if (!empty($product_types)) {
    $tax_query[] = array(
      'taxonomy' => 'product_type',
      'field' => 'slug',
      'terms' => $product_types,
      'operator' => 'IN'
    );
  }

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

  $query = new WP_Query($args);

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

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

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

Динамическая фильтрация может нагрузить сервер при большом количестве запросов. Чтобы этого избежать:

Добавьте кеширование результатов с помощью Transients API.
Используйте пагинацию для больших выборок.
Минимизируйте объем возвращаемого HTML, можно использовать JSON и строить шаблоны на JS.
Добавьте индексы для пользовательских таксономий в базе данных.

Также можно интегрировать этот фильтр с плагинами, например, с Clearfy Pro, который оптимизирует запросы и кэш.

Выводы

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