В современных проектах на WordPress часто возникает задача реализовать динамический вывод записей с возможностью фильтрации без перезагрузки страницы. Это улучшает пользовательский опыт и повышает удобство работы с контентом. В этой статье мы подробно разберём, как создать такой список с помощью AJAX, используя собственный код и некоторые популярные плагины.
Почему важна AJAX-фильтрация постов в WordPress
Стандартный вывод записей в WordPress предполагает перезагрузку страницы при смене фильтров или пагинации. Это неудобно и замедляет работу сайта, особенно если на странице много контента или сложные фильтры.
AJAX позволяет асинхронно загружать данные без полной перезагрузки, что делает интерфейс более отзывчивым и современным. Для реализации AJAX-фильтров нужны базовые знания PHP, JavaScript и понимание WP_Query.
Кроме того, можно использовать готовые решения из репозитория плагинов, но собственный код даёт больше гибкости и контроля.
Создание базового AJAX-фильтра: структура и принципы
Основная идея – при изменении фильтра (например, по категории, тегу, дате) на странице через JavaScript отправлять AJAX-запрос к серверу, где PHP-код формирует WP_Query с нужными параметрами и возвращает HTML-вывод записей.
Для этого нужно:
- Зарегистрировать AJAX-обработчики в functions.php или собственном плагине;
- Подключить JavaScript, который будет отслеживать изменение фильтров и отправлять запрос;
- Создать шаблон вывода одной записи для повторного использования;
- Обработать AJAX-запрос на сервере и вернуть сформированный HTML;
- Обновить содержимое контейнера с записями на странице.
Пример реализации AJAX-фильтра в WordPress
1. Добавляем AJAX-обработчики в functions.php
function wpinc_ajax_load_posts() {
// Проверяем nonce для безопасности
check_ajax_referer('wpinc_ajax_nonce', 'nonce');
// Получаем параметры фильтра из запроса
$category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
$paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
$args = [
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged,
];
if ($category) {
$args['category_name'] = $category;
}
$query = new WP_Query($args);
if ($query->have_posts()) {
ob_start();
while ($query->have_posts()) {
$query->the_post();
get_template_part('template-parts/content', get_post_format());
}
$posts_html = ob_get_clean();
} else {
$posts_html = '<p>Записи не найдены.</p>';
}
wp_send_json_success(['html' => $posts_html]);
}
add_action('wp_ajax_wpinc_load_posts', 'wpinc_ajax_load_posts');
add_action('wp_ajax_nopriv_wpinc_load_posts', 'wpinc_ajax_load_posts');2. Подключаем JavaScript для отправки AJAX-запроса
Создадим файл ajax-filter.js в папке темы или плагина:
jQuery(document).ready(function($) {
$('#wpinc-filter').on('change', 'select', function() {
var category = $(this).val();
$.ajax({
url: wpinc_ajax.ajax_url,
type: 'POST',
data: {
action: 'wpinc_load_posts',
nonce: wpinc_ajax.nonce,
category: category,
paged: 1
},
beforeSend: function() {
$('#wpinc-posts-container').html('<p>Загрузка...</p>');
},
success: function(response) {
if (response.success) {
$('#wpinc-posts-container').html(response.data.html);
} else {
$('#wpinc-posts-container').html('<p>Ошибка загрузки.</p>');
}
},
error: function() {
$('#wpinc-posts-container').html('<p>Ошибка сервера.</p>');
}
});
});
});И не забудем подключить скрипт и локализовать переменные в functions.php:
function wpinc_enqueue_scripts() {
wp_enqueue_script('wpinc-ajax-filter', get_template_directory_uri() . '/js/ajax-filter.js', ['jquery'], null, true);
wp_localize_script('wpinc-ajax-filter', 'wpinc_ajax', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpinc_ajax_nonce')
]);
}
add_action('wp_enqueue_scripts', 'wpinc_enqueue_scripts');3. HTML-разметка фильтра и контейнера для постов
В нужном шаблоне добавьте:
<div id="wpinc-filter">
<select name="category" id="category-filter">
<option value="">Все категории</option>
<?php
$categories = get_categories();
foreach($categories as $cat) {
echo '<option value="'.esc_attr($cat->slug).'">'.esc_html($cat->name).'</option>';
}
?>
</select>
</div>
<div id="wpinc-posts-container">
<?php
// Вывод первых 5 постов при загрузке страницы
$args = ['posts_per_page' => 5];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
get_template_part('template-parts/content', get_post_format());
}
wp_reset_postdata();
}
?>
</div>Расширение функционала: пагинация и дополнительные фильтры
Чтобы сделать фильтр более удобным, добавим:
- Пагинацию с AJAX-загрузкой следующих страниц;
- Фильтрацию по нескольким параметрам (теги, дата, авторы);
- Обработку ошибок и индикацию загрузки.
Для пагинации можно добавить кнопку «Загрузить ещё» или реализовать бесконечный скролл, отправляя параметр paged с каждым запросом.
Пример обработки нескольких фильтров в AJAX-обработчике:
$tags = isset($_POST['tags']) ? array_map('sanitize_text_field', (array)$_POST['tags']) : [];
if ($tags) {
$args['tag_slug__in'] = $tags;
}В JavaScript аналогично добавляем сбор данных из нескольких полей и отправляем их в AJAX-запрос.
Использование плагинов для упрощения задачи
Если хочется минимизировать код, можно использовать плагины с поддержкой AJAX-фильтрации:
- Ajax Load More — мощный плагин для бесконечной пагинации и фильтров с поддержкой шаблонов;
- FacetWP (платный) — удобный и гибкий инструмент для фильтрации с AJAX;
- Clearfy Pro — плагин для оптимизации и расширения функционала, включая удобные инструменты для AJAX и кастомизации запросов.
Эти инструменты позволяют быстро внедрить фильтры без глубокого программирования, но иногда собственный код даёт больше контроля и меньше нагрузки.
Советы по оптимизации AJAX-фильтров
Чтобы AJAX-фильтрация работала быстро и корректно, учитывайте следующие моменты:
- Кешируйте результаты запросов, например, с помощью Transients API или внешних кешей;
- Минимизируйте количество передаваемых данных и объем возвращаемого HTML;
- Используйте nonce и проверку прав для безопасности AJAX-запросов;
- Оптимизируйте WP_Query, избегайте сложных и тяжелых параметров;
- Тестируйте работу фильтра на разных устройствах и браузерах.
Правильная архитектура AJAX-фильтров значительно повышает удобство сайта и снижает нагрузку на сервер.
Заключение
Динамический список постов с фильтрами на AJAX — востребованная и практичная задача в разработке на WordPress. С помощью приведённого примера и рекомендаций вы сможете реализовать удобный фильтр под свои нужды, улучшив UX и производительность сайта.
Если хотите расширить функционал без глубокого программирования, рекомендуем обратить внимание на плагины Clearfy Pro и Ajax Load More.