Динамический фильтр по таксономии в WordPress — это удобный инструмент для пользователей, который позволяет быстро сортировать и находить нужный контент по категориям, меткам или кастомным таксономиям без перезагрузки страницы. В этой статье мы подробно разберём, как создать такой фильтр своими руками с использованием AJAX и PHP, а также рассмотрим популярные плагины, которые помогут реализовать эту задачу.
Что такое динамический фильтр по таксономии в WordPress и зачем он нужен?
Таксономии в WordPress — это способ группировки постов по определённым признакам: категориям, меткам или собственным наборам терминов. Когда на сайте много записей, удобный фильтр позволяет пользователям быстро найти нужные материалы, не переходя на множество страниц.
Динамический фильтр — это интерфейс, который обновляет список записей без перезагрузки страницы, используя AJAX-запросы. Это значительно улучшает UX и повышает скорость работы сайта.
Реализовать такой фильтр можно как с помощью готовых плагинов, так и самостоятельно, что даёт больше гибкости и контроля.
Популярные плагины для динамической фильтрации по таксономиям
1. FacetWP
FacetWP — мощный плагин для создания фильтров по таксономиям, метаполям, датам и другим параметрам. Он отлично подходит для магазинов и сайтов с большим количеством контента.
Плюсы:
- Простая настройка через админку;
- Поддержка AJAX;
- Интеграция с популярными плагинами;
- Удобный UI для пользователей.
Минусы — платный продукт, но есть демо-версия.
2. WP Ajax Filter and Search
Бесплатный плагин, который позволяет создавать AJAX-фильтры по таксономиям, пользовательским полям и поиску.
Плюсы:
- Лёгкость установки;
- Базовые настройки фильтров;
- Поддержка shortcode для вставки фильтров в любые места.
Создаем динамический фильтр по таксономии своими руками
Если вы хотите сделать гибкий и легковесный фильтр, лучше написать собственный код. Ниже пошаговая инструкция.
Шаг 1. Выводим фильтр в шаблоне
Допустим, у нас есть кастомная таксономия wp8_category. Нужно вывести список терминов в виде чекбоксов для выбора.
function wp8_display_taxonomy_filter() {
$terms = get_terms(array(
'taxonomy' => 'wp8_category',
'hide_empty' => false,
));
if (!empty($terms) && !is_wp_error($terms)) {
echo '<form id="wp8-filter-form">';
foreach ($terms as $term) {
echo '<label>';
echo '<input type="checkbox" name="wp8_filter_terms[]" value="' . esc_attr($term->slug) . '"> ' . esc_html($term->name);
echo '</label><br>';
}
echo '<button type="submit">Фильтровать</button>';
echo '</form>';
echo '<div id="wp8-filter-results"></div>';
}
}Этот код выводит форму с чекбоксами и контейнер для результатов.
Шаг 2. Добавляем AJAX-запрос
Подключаем JavaScript, который будет отправлять выбранные термины на сервер и получать отфильтрованные посты.
function wp8_enqueue_scripts() {
wp_enqueue_script('wp8-filter', get_template_directory_uri() . '/js/wp8-filter.js', array('jquery'), null, true);
wp_localize_script('wp8-filter', 'wp8_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wp8_filter_nonce'),
));
}
add_action('wp_enqueue_scripts', 'wp8_enqueue_scripts');Создаем файл wp8-filter.js в папке темы /js/:
jQuery(document).ready(function($) {
$('#wp8-filter-form').on('submit', function(e) {
e.preventDefault();
var terms = [];
$('input[name="wp8_filter_terms[]"]:checked').each(function() {
terms.push($(this).val());
});
$.ajax({
url: wp8_ajax.ajax_url,
method: 'POST',
data: {
action: 'wp8_filter_posts',
security: wp8_ajax.nonce,
terms: terms
},
success: function(response) {
$('#wp8-filter-results').html(response);
},
error: function() {
$('#wp8-filter-results').html('Ошибка запроса');
}
});
});
});Шаг 3. Обрабатываем AJAX запрос на сервере
Добавляем PHP-функцию для вывода постов по выбранным терминам:
function wp8_handle_filter_posts() {
check_ajax_referer('wp8_filter_nonce', 'security');
$terms = isset($_POST['terms']) ? array_map('sanitize_text_field', (array) $_POST['terms']) : array();
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
);
if (!empty($terms)) {
$args['tax_query'] = array(
array(
'taxonomy' => 'wp8_category',
'field' => 'slug',
'terms' => $terms,
),
);
}
$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></li>';
}
echo '</ul>';
} else {
echo 'По вашему запросу ничего не найдено.';
}
wp_reset_postdata();
wp_die();
}
add_action('wp_ajax_wp8_filter_posts', 'wp8_handle_filter_posts');
add_action('wp_ajax_nopriv_wp8_filter_posts', 'wp8_handle_filter_posts');Дополнительные советы по улучшению фильтра
Оптимизация запросов и кэширование
Если на сайте много постов, AJAX-запросы могут замедлять работу. Добавьте кэширование результатов с помощью Transients API, чтобы снизить нагрузку на базу данных.
Также ограничивайте количество выводимых записей и используйте пагинацию или подгрузку «показать ещё».
Улучшение интерфейса
Добавьте индикацию загрузки, чтобы пользователь видел, что происходит обработка запроса.
Можно использовать чекбоксы, радиокнопки или селекты с поддержкой мультивыбора, в зависимости от задачи.
Расширение функционала
Добавляйте фильтрацию по нескольким таксономиям одновременно, метаполям, датам публикации и другим критериям.
Для этого расширяйте AJAX-обработчик, добавляя соответствующие параметры в WP_Query.
Использование плагина Clearfy Pro для упрощения фильтров
Плагин Clearfy Pro содержит инструменты для оптимизации и управления WordPress, включая расширенные возможности работы с таксономиями и AJAX-запросами.
Он может помочь убрать лишние запросы, улучшить безопасность и повысить производительность фильтров, особенно на крупных сайтах.