В современных проектах на WordPress часто возникает необходимость создавать удобные и быстрые фильтры для контента. Особенно актуально это для сайтов с большим количеством кастомных записей (Custom Post Types) и метаполей (post meta). В этой статье подробно разберем, как создать динамический фильтр по метаданным с использованием AJAX, чтобы пользователи могли быстро искать и сортировать записи без перезагрузки страницы.
Зачем нужен AJAX-фильтр по метаданным в WordPress
Фильтр по метаданным позволяет пользователям уточнять результаты поиска, выбирая, например, товары по цене, цвету, размеру, или статьи по дате публикации или автору. AJAX-фильтр обновляет результаты мгновенно, улучшая UX и снижая нагрузку на сервер за счет частичного обновления контента.
Без AJAX фильтр потребовал бы полной перезагрузки страницы при каждом изменении параметров, что неудобно и замедляет работу сайта.
Реализовать такой фильтр можно вручную с помощью PHP, JavaScript и WP_Query, либо использовать готовые плагины. В статье рассмотрим оба варианта.
Создание AJAX-фильтра вручную: пошаговое руководство
1. Регистрация скриптов и локализация AJAX URL
Для начала зарегистрируем JS-файл и передадим в него AJAX URL и nonce для безопасности.
function wpbegin_enqueue_filter_scripts() {
wp_enqueue_script('wpbegin-ajax-filter', get_template_directory_uri() . '/js/ajax-filter.js', array('jquery'), '1.0', true);
wp_localize_script('wpbegin-ajax-filter', 'wpbegin_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpbegin_ajax_nonce'),
));
}
add_action('wp_enqueue_scripts', 'wpbegin_enqueue_filter_scripts');2. HTML-разметка фильтра
Создаем форму фильтра в нужном шаблоне, например, для фильтрации по метаполю color (цвет):
<form id="wpbegin-filter">
<select name="color">
<option value="">Выберите цвет</option>
<option value="red">Красный</option>
<option value="blue">Синий</option>
<option value="green">Зеленый</option>
</select>
<button type="submit">Фильтровать</button>
</form>
<div id="wpbegin-filter-results"></div>3. JavaScript для AJAX-запроса
В файле ajax-filter.js добавим обработчик отправки формы, который отправит AJAX-запрос на сервер и обновит результаты:
jQuery(document).ready(function($) {
$('#wpbegin-filter').on('submit', function(e) {
e.preventDefault();
var color = $(this).find('select[name="color"]').val();
$.ajax({
url: wpbegin_ajax.ajax_url,
type: 'POST',
data: {
action: 'wpbegin_filter_posts',
nonce: wpbegin_ajax.nonce,
color: color
},
success: function(response) {
$('#wpbegin-filter-results').html(response);
},
error: function() {
$('#wpbegin-filter-results').html('<p>Произошла ошибка при загрузке данных.</p>');
}
});
});
});4. Обработка AJAX-запроса на сервере
Добавим PHP-функцию, которая примет запрос, проверит nonce, выполнит WP_Query с мета-запросом и вернет HTML с результатами:
function wpbegin_ajax_filter_posts() {
check_ajax_referer('wpbegin_ajax_nonce', 'nonce');
$color = isset($_POST['color']) ? sanitize_text_field($_POST['color']) : '';
$meta_query = array();
if (!empty($color)) {
$meta_query[] = array(
'key' => 'color',
'value' => $color,
'compare' => '=',
);
}
$args = array(
'post_type' => 'product', // замените на свой CPT
'posts_per_page' => 10,
'meta_query' => $meta_query,
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<div><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';
}
} else {
echo '<p>По вашему запросу ничего не найдено.</p>';
}
wp_reset_postdata();
wp_die();
}
add_action('wp_ajax_wpbegin_filter_posts', 'wpbegin_ajax_filter_posts');
add_action('wp_ajax_nopriv_wpbegin_filter_posts', 'wpbegin_ajax_filter_posts');Использование плагинов для создания AJAX-фильтра по метаданным
Если вы не хотите писать код вручную, можно использовать готовые решения. Вот несколько популярных плагинов, которые помогут создать мощные AJAX-фильтры без программирования:
- FacetWP — удобный плагин для фильтрации по метаданным, таксономиям и другим параметрам с поддержкой AJAX. Подходит для магазинов, каталогов и блогов.
- Filter Everything — бесплатный и простой плагин с возможностью создавать фильтры по произвольным полям и таксономиям.
- WPShop Clearfy Pro — в комплекте есть модули для управления запросами и оптимизации, которые можно использовать для фильтров.
Плюс таких плагинов в том, что они предоставляют визуальный интерфейс настройки, интеграцию с WooCommerce и адаптивность для мобильных устройств.
Оптимизация и важные нюансы при создании AJAX-фильтра
Кэширование результатов фильтра
При большом количестве записей и пользователей рекомендуется внедрять кэширование результатов AJAX-запросов. Можно использовать Transients API или сторонние кеширующие плагины, чтобы снизить нагрузку на базу данных.
Безопасность AJAX-запросов
Обязательно проверяйте nonce в обработчиках AJAX, чтобы предотвратить CSRF-атаки. Также фильтруйте и санитайзите все входящие данные.
Поддержка пагинации и нескольких параметров
Для реальных проектов фильтр должен поддерживать пагинацию, сортировки и множественные параметры. Для этого усложняйте WP_Query, добавляйте обработку GET или POST параметров, и обновляйте URL с помощью History API для удобства пользователей и SEO.
Заключение
Создание динамического фильтра по метаданным с помощью AJAX в WordPress — задача, которая значительно улучшает интерфейс сайта и повышает удобство пользователей. Вручную реализовать такой фильтр несложно, если знать базовые принципы работы с WP_Query и AJAX. При этом готовые плагины могут сэкономить время и предоставить более расширенный функционал.
Если хотите быстро внедрить фильтр с минимальными усилиями, рекомендую попробовать FacetWP или Filter Everything. Для кастомных решений — используйте описанный выше пример кода как основу и расширяйте под свои задачи.
Для удобства управления и оптимизации можно также рассмотреть плагины из набора Clearfy Pro.