Динамические фильтры — это мощный инструмент для улучшения навигации по сайту и повышения удобства пользователей. В этой статье мы подробно разберём, как добавить динамический фильтр записей в ваш шаблон WordPress, используя как чистый код, так и готовые плагины, а также рассмотрим практические советы по интеграции фильтра в тему.
Зачем нужен динамический фильтр в шаблоне WordPress
Фильтр записей позволяет посетителям быстро сортировать и находить контент по нужным параметрам, например по категориям, меткам, дате или любым пользовательским полям. В шаблоне WordPress динамический фильтр позволяет создавать удобные интерфейсы без перезагрузки страницы, что улучшает UX и снижает нагрузку на сервер.
С помощью динамического фильтра можно реализовать:
- Фильтрацию по категориям, меткам и типам записей;
- Сортировку по дате, популярности или произвольным параметрам;
- Интерактивный поиск с мгновенным обновлением списка записей.
Важный момент — фильтр должен работать корректно с вашим шаблоном и поддерживать SEO-оптимизацию.
Основные способы реализации динамического фильтра
1. Использование AJAX и WP_Query
Самый гибкий и популярный способ — написать кастомный PHP-код с использованием AJAX для динамического обновления списка записей без перезагрузки страницы. Основная идея:
- Создать HTML-форму с элементами фильтра (селекты, чекбоксы и т.д.) в шаблоне;
- При изменении фильтра отправлять AJAX-запрос на сервер;
- На сервере обрабатывать параметры фильтра и формировать новый WP_Query;
- Возвращать отфильтрованные записи в формате HTML или JSON;
- Обновлять контент на странице через JavaScript.
Пример базового AJAX-запроса с фильтром по категории и дате:
function wp_shablon_enqueue_scripts() {
wp_enqueue_script('wp-shablon-filter', get_template_directory_uri() . '/js/filter.js', array('jquery'), null, true);
wp_localize_script('wp-shablon-filter', 'wpShablon', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wp_shablon_filter_nonce')
));
}
add_action('wp_enqueue_scripts', 'wp_shablon_enqueue_scripts');
function wp_shablon_ajax_filter() {
check_ajax_referer('wp_shablon_filter_nonce', 'nonce');
$category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
$date = isset($_POST['date']) ? sanitize_text_field($_POST['date']) : '';
$args = array('post_type' => 'post', 'posts_per_page' => 10);
if ($category) {
$args['category_name'] = $category;
}
if ($date) {
$args['date_query'] = array(
array('year' => intval($date))
);
}
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
}
} else {
echo '<p>Записи не найдены.</p>';
}
wp_die();
}
add_action('wp_ajax_wp_shablon_filter', 'wp_shablon_ajax_filter');
add_action('wp_ajax_nopriv_wp_shablon_filter', 'wp_shablon_ajax_filter');JavaScript для отправки запроса:
jQuery(document).ready(function($) {
$('#filter-form select').on('change', function() {
var data = {
action: 'wp_shablon_filter',
nonce: wpShablon.nonce,
category: $('#filter-category').val(),
date: $('#filter-date').val()
};
$.post(wpShablon.ajaxurl, data, function(response) {
$('#filter-results').html(response);
});
});
});2. Использование готовых плагинов для фильтрации
Если вы не хотите писать код с нуля, можно использовать популярные плагины, которые интегрируются с шаблонами:
- Clearfy Pro — оптимизация и расширение функционала сайта, содержит модули для кастомизации фильтров.
- FacetWP — мощный плагин для создания AJAX-фильтров с множеством настроек.
- Search & Filter — простой плагин для добавления фильтров по категориям, тегам и произвольным полям.
Преимущество плагинов — быстрая настройка и широкие возможности без необходимости программирования. Но они могут влиять на производительность и требуют совместимости с вашей темой.
Как встроить фильтр в шаблон WordPress
Для интеграции динамического фильтра важно правильно разместить HTML-форму и подключить обработчики. Обычно фильтр добавляют в файлы шаблона, например archive.php или page.php, либо создают отдельный шаблон для страницы с фильтром.
Пример HTML-формы фильтра:
<form id="filter-form">
<select id="filter-category" name="category">
<option value="">Все категории</option>
<?php
$categories = get_categories();
foreach ($categories as $category) {
echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
}
?>
</select>
<select id="filter-date" name="date">
<option value="">Все годы</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
</select>
</form>
<div id="filter-results"></div>После настройки фильтра необходимо позаботиться об адаптивности и стилизации, чтобы элементы выглядели органично в вашем шаблоне.
Оптимизация и SEO при использовании динамических фильтров
Динамические фильтры часто используют AJAX, что может осложнять индексацию поисковиками. Чтобы сохранить SEO-оптимизацию:
- Обеспечьте доступность контента без JavaScript — например, сделайте ссылочные версии фильтров с параметрами в URL;
- Используйте правильные URL с параметрами GET для каждого состояния фильтра;
- Добавьте
rel="canonical"для предотвращения дублирования страниц; - Следите за скоростью загрузки, минимизируйте количество запросов и используйте кэширование.
Хорошая практика — совместить AJAX-фильтр с серверной генерацией страниц, чтобы поисковые системы могли индексировать все варианты фильтрации.
Пример расширенного фильтра с пользовательскими полями
Рассмотрим добавление фильтра по произвольному полю, например, цена для товаров или рейтинг для обзоров. Добавим поле meta_key и условие meta_query в WP_Query:
function wp_shablon_ajax_filter() {
check_ajax_referer('wp_shablon_filter_nonce', 'nonce');
$category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
$price_min = isset($_POST['price_min']) ? floatval($_POST['price_min']) : 0;
$price_max = isset($_POST['price_max']) ? floatval($_POST['price_max']) : 0;
$args = array(
'post_type' => 'product',
'posts_per_page' => 10
);
if ($category) {
$args['tax_query'] = array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $category,
),
);
}
if ($price_min || $price_max) {
$meta_query = array('relation' => 'AND');
if ($price_min) {
$meta_query[] = array(
'key' => 'price',
'value' => $price_min,
'compare' => '>=',
'type' => 'NUMERIC',
);
}
if ($price_max) {
$meta_query[] = array(
'key' => 'price',
'value' => $price_max,
'compare' => '<=',
'type' => 'NUMERIC',
);
}
$args['meta_query'] = $meta_query;
}
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
echo '<p>Цена: ' . get_post_meta(get_the_ID(), 'price', true) . '</p>';
}
} else {
echo '<p>Товары не найдены.</p>';
}
wp_die();
}Такой подход позволит создать полноценный фильтр по цене с динамическим обновлением результатов.
Заключение
Добавление динамического фильтра в шаблон WordPress — задача, требующая понимания как PHP, так и JavaScript. Если вы хотите быстро внедрить фильтры, рекомендуем обратить внимание на плагины вроде Clearfy Pro или специализированные решения из репозитория. Для максимальной гибкости и контроля — пишите собственные обработчики с использованием AJAX и WP_Query, как показано в примерах.
Таким образом, вы сможете не только улучшить пользовательский опыт, но и сохранить SEO-показатели и производительность сайта на высоком уровне.