Как использовать WP REST API для создания комплексных фильтров в WordPress

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

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

Под комплексными фильтрами понимаются системы поиска и отбора записей, которые учитывают несколько параметров одновременно: категории, таксономии, мета-поля, даты и другие пользовательские критерии. Такие фильтры особенно полезны для сайтов с большим количеством контента — новостных порталов, каталогов, интернет-магазинов.

Стандартные возможности WordPress и даже многие популярные плагины часто ограничены по части гибкости. Использование WP REST API позволяет реализовать полностью кастомные фильтры с динамической подгрузкой результатов без перезагрузки страницы.

Создание кастомного эндпоинта WP REST API для фильтрации

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

add_action('rest_api_init', function () {
  register_rest_route('wptemp/v1', '/filter-posts', array(
    'methods' => 'GET',
    'callback' => 'wptemp_filter_posts_callback',
    'permission_callback' => '__return_true',
  ));
});

function wptemp_filter_posts_callback(WP_REST_Request $request) {
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 10,
    'paged' => $request->get_param('page') ?: 1,
  );

  // Фильтрация по категории
  if ($category = $request->get_param('category')) {
    $args['category_name'] = sanitize_text_field($category);
  }

  // Фильтрация по мета-полям
  $meta_query = array();
  if ($color = $request->get_param('color')) {
    $meta_query[] = array(
      'key' => 'color',
      'value' => sanitize_text_field($color),
      'compare' => '=',
    );
  }
  if ($price_min = $request->get_param('price_min')) {
    $meta_query[] = array(
      'key' => 'price',
      'value' => floatval($price_min),
      'compare' => '>=',
      'type' => 'NUMERIC',
    );
  }
  if ($price_max = $request->get_param('price_max')) {
    $meta_query[] = array(
      'key' => 'price',
      'value' => floatval($price_max),
      'compare' => '<=',
      'type' => 'NUMERIC',
    );
  }
  if (!empty($meta_query)) {
    $args['meta_query'] = $meta_query;
  }

  $query = new WP_Query($args);
  $posts = array();
  foreach ($query->posts as $post) {
    $posts[] = array(
      'id' => $post->ID,
      'title' => get_the_title($post),
      'link' => get_permalink($post),
      'excerpt' => get_the_excerpt($post),
    );
  }

  return [
    'posts' => $posts,
    'found_posts' => $query->found_posts,
    'max_num_pages' => $query->max_num_pages,
  ];
}

В этом примере мы создали REST API маршрут /wp-json/wptemp/v1/filter-posts, который принимает параметры category, color, price_min, price_max и возвращает список постов, удовлетворяющих этим условиям.

Пример AJAX-запроса для динамической подгрузки фильтрованных данных

Для интерактивности на фронтенде используйте JavaScript (например, fetch API) для отправки запросов к нашему эндпоинту и обновления контента без перезагрузки страницы. Вот пример базового кода:

document.getElementById('filter-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const category = document.getElementById('category').value;
  const color = document.getElementById('color').value;
  const priceMin = document.getElementById('price-min').value;
  const priceMax = document.getElementById('price-max').value;

  const params = new URLSearchParams({
    category: category,
    color: color,
    price_min: priceMin,
    price_max: priceMax
  });

  fetch(`/wp-json/wptemp/v1/filter-posts?${params.toString()}`)
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('posts-container');
      container.innerHTML = '';
      data.posts.forEach(post => {
        const div = document.createElement('div');
        div.innerHTML = `<h3><a href="${post.link}">${post.title}</a></h3><p>${post.excerpt}</p>`;
        container.appendChild(div);
      });
    });
});

Для этого на странице должен быть HTML с формой и контейнером для результатов:

<form id="filter-form">
  <select id="category" name="category">
    <option value="">Все категории</option>
    <option value="news">Новости</option>
    <option value="reviews">Обзоры</option>
  </select>
  <input type="text" id="color" name="color" placeholder="Цвет" />
  <input type="number" id="price-min" name="price_min" placeholder="Мин. цена" />
  <input type="number" id="price-max" name="price_max" placeholder="Макс. цена" />
  <button type="submit">Фильтровать</button>
</form>

<div id="posts-container"></div>

Использование плагинов для расширения возможностей фильтрации

Если хочется облегчить себе задачу, можно использовать плагины, которые расширяют REST API или упрощают построение фильтров. Например:

• Clearfy Pro — оптимизация и расширение функционала WordPress, в том числе по части REST API.
• WPRemark — если нужно подключать отзывы и рейтинги, которые можно фильтровать через API.

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

Как отлаживать и тестировать свой REST API фильтр

Для тестирования REST API удобно использовать инструменты вроде Postman или расширения для браузера. Просто отправляйте GET-запросы к вашему эндпоинту с разными параметрами и смотрите, что возвращается. Также можно включить логирование запросов и ошибок в WordPress, чтобы быстрее находить проблемы.

Важно проверять правильность санитизации и валидации входящих данных, чтобы избежать SQL-инъекций и других уязвимостей.

Заключение по теме комплексных фильтров через WP REST API

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

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