Как создать комплексный фильтрованный список на WordPress

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

Почему важны фильтры и как они улучшают пользовательский опыт

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

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

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

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

Плагин WPSmartFilters

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

Основные возможности:

• Фильтрация по нескольким параметрам одновременно
• Настраиваемый внешний вид
• Поддержка пользовательских типов записей и полей
• Интеграция с WooCommerce и другими плагинами

Подробнее на WPSmartFilters на wpshop.ru

FacetWP

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

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

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

Шаг 1. Создаём форму фильтра

Добавим на страницу форму с выбором категории и мета-поля. Например, фильтр по типу записи и цене (метаполе price):

<form id="wplancer_filter_form">
  <select name="category">
    <option value="">Все категории</option>
    <?php
    $categories = get_categories();
    foreach ( $categories as $cat ) {
        echo '<option value="' . esc_attr( $cat->term_id ) . '">' . esc_html( $cat->name ) . '</option>';
    }
    ?>
  </select>

  <input type="number" name="min_price" placeholder="Мин. цена" />
  <input type="number" name="max_price" placeholder="Макс. цена" />

  <button type="submit">Фильтровать</button>
</form>

<div id="wplancer_filter_results"></div>

Шаг 2. Обработка AJAX запроса в functions.php

Добавим обработчик, который будет получать параметры фильтра, формировать WP_Query и возвращать отфильтрованные записи.

function wplancer_ajax_filter() {
    $category = isset($_POST['category']) ? intval($_POST['category']) : 0;
    $min_price = isset($_POST['min_price']) ? floatval($_POST['min_price']) : 0;
    $max_price = isset($_POST['max_price']) ? floatval($_POST['max_price']) : 0;

    $tax_query = [];
    if ( $category ) {
        $tax_query[] = [
            'taxonomy' => 'category',
            'field'    => 'term_id',
            'terms'    => $category,
        ];
    }

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

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

    if ( $tax_query ) {
        $args['tax_query'] = $tax_query;
    }
    if ( count($meta_query) > 1 ) {
        $args['meta_query'] = $meta_query;
    }

    $query = new WP_Query($args);

    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_die();
}
add_action('wp_ajax_wplancer_filter', 'wplancer_ajax_filter');
add_action('wp_ajax_nopriv_wplancer_filter', 'wplancer_ajax_filter');

Шаг 3. Скрипт AJAX на стороне клиента

Добавим JavaScript, который отправит данные формы и обновит список без перезагрузки:

document.getElementById('wplancer_filter_form').addEventListener('submit', function(e) {
    e.preventDefault();

    var formData = new FormData(this);
    formData.append('action', 'wplancer_filter');

    fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('wplancer_filter_results').innerHTML = html;
    });
});

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

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

Поиск по заголовкам

Добавим в форму текстовое поле для поиска:

<input type="text" name="search" placeholder="Поиск по названию" />

И в обработчике добавим параметр s для WP_Query:

$search = isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '';
if ( $search ) {
    $args['s'] = $search;
}

Сортировка записей

В форму добавим селектор сортировки:

<select name="orderby">
  <option value="date">По дате</option>
  <option value="title">По названию</option>
  <option value="price">По цене</option>
</select>

<select name="order">
  <option value="ASC">По возрастанию</option>
  <option value="DESC">По убыванию</option>
</select>

В аргументах запроса добавим обработку сортировки:

$orderby = in_array($_POST['orderby'], ['date','title','price']) ? $_POST['orderby'] : 'date';
$order = in_array($_POST['order'], ['ASC','DESC']) ? $_POST['order'] : 'DESC';

if ( $orderby === 'price' ) {
    $args['meta_key'] = 'price';
    $args['orderby'] = 'meta_value_num';
} else {
    $args['orderby'] = $orderby;
}
$args['order'] = $order;

Подводим итоги и рекомендации

Комплексный фильтр на WordPress можно создать как с помощью готовых плагинов (WPSmartFilters, FacetWP), так и самостоятельно, управляя запросами WP_Query и AJAX. Важно грамотно продумать UI, чтобы фильтр был интуитивно понятен, а данные обрабатывались быстро и без перезагрузки.

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

Если хотите попробовать готовое комплексное решение, посмотрите WPSmartFilters – этот плагин отлично подходит для проектов на WordPress с любым уровнем сложности.