В современном новостном сайте на WordPress важна возможность динамического отображения контента в зависимости от выбора пользователя. Особенно это актуально для сайтов с большим потоком новостей, где пользователям важно быстро находить нужные материалы без перезагрузки страницы. В этой статье мы подробно разберём, как создать фильтрованные новости с помощью AJAX, чтобы посетители могли фильтровать новости по категориям, тегам или другим параметрам, а результаты обновлялись мгновенно.
Почему AJAX-фильтры важны для новостных сайтов на WordPress
Традиционный подход к фильтрации постов предполагает перезагрузку страницы при каждом изменении параметров. Это снижает удобство использования и увеличивает время ожидания. AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы на сервер и получать данные без перезагрузки страницы. В результате пользовательский опыт становится более плавным и современным.
Для сайта с новостями это значит, что посетители могут быстро переключаться между категориями или выбирать новости по дате, автору или другим параметрам, сразу видя результаты.
Кроме того, AJAX-фильтры снижают нагрузку на сервер, поскольку передаются только необходимые данные, а не вся страница целиком.
Подготовка к созданию AJAX-фильтров новостей
Для начала убедимся, что на вашем сайте WordPress есть новости, которые вы хотите фильтровать. Обычно новости — это посты определённого типа (например, стандартный post или кастомный тип post_type = 'news'). Также желательно, чтобы новости были распределены по категориям и тегам.
В качестве примера возьмём стандартный пост-тип и категории для фильтрации.
Для реализации AJAX нам понадобятся следующие шаги:
- Добавить HTML-разметку фильтра на страницу (например, выпадающий список категорий)
- Написать JavaScript, который будет отправлять AJAX-запрос при выборе фильтра
- Создать PHP-обработчик, который вернёт отфильтрованные новости
- Вывести новости на страницу без перезагрузки
Добавляем HTML-фильтр и контейнер для новостей
В шаблоне страницы новостей или через шорткод добавляем следующий код:
<div id="wpnews-filter">
<select id="wpnews-category-filter">
<option value="">Все категории</option>
<?php
$categories = get_categories();
foreach ( $categories as $category ) {
echo '<option value="' . esc_attr( $category->term_id ) . '">' . esc_html( $category->name ) . '</option>';
}
?>
</select>
</div>
<div id="wpnews-results">
<!-- Здесь будут отображаться новости -->
</div>Этот блок создаёт выпадающий список с категориями и контейнер для вывода новостей.
JavaScript: отправляем AJAX-запрос при выборе категории
Добавим скрипт, который будет слушать изменение выпадающего списка и отправлять запрос на сервер:
jQuery(document).ready(function($) {
$('#wpnews-category-filter').on('change', function() {
var category = $(this).val();
$.ajax({
url: wpnews_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'wpnews_filter_news',
category: category
},
beforeSend: function() {
$('#wpnews-results').html('<p>Загрузка новостей...</p>');
},
success: function(response) {
$('#wpnews-results').html(response);
},
error: function() {
$('#wpnews-results').html('<p>Ошибка загрузки новостей.</p>');
}
});
});
});Здесь wpnews_ajax_object.ajax_url — это переменная, которую мы передадим из PHP для правильного указания URL для AJAX-запросов.
PHP: регистрируем AJAX-обработчик и передаём переменные в JS
В functions.php вашей темы или в файле плагина добавьте следующий код:
function wpnews_enqueue_scripts() {
wp_enqueue_script('wpnews-ajax-filter', get_template_directory_uri() . '/js/wpnews-ajax-filter.js', array('jquery'), null, true);
wp_localize_script('wpnews-ajax-filter', 'wpnews_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
add_action('wp_enqueue_scripts', 'wpnews_enqueue_scripts');
// Обработчик AJAX-запроса
function wpnews_ajax_filter_news() {
$category = isset($_POST['category']) ? intval($_POST['category']) : 0;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'orderby' => 'date',
'order' => 'DESC',
);
if ($category) {
$args['cat'] = $category;
}
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<article class="wpnews-article">';
echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
echo '<div class="wpnews-excerpt">' . get_the_excerpt() . '</div>';
echo '</article>';
}
} else {
echo '<p>Новостей не найдено.</p>';
}
wp_reset_postdata();
wp_die();
}
add_action('wp_ajax_wpnews_filter_news', 'wpnews_ajax_filter_news');
add_action('wp_ajax_nopriv_wpnews_filter_news', 'wpnews_ajax_filter_news');В этом коде мы подключаем скрипт, передаём в него URL для AJAX и создаём функцию-обработчик, которая принимает параметр категории и возвращает HTML с соответствующими новостями.
Оптимизация и расширение фильтра
Данный базовый пример можно расширять и улучшать:
- Добавить фильтрацию по нескольким параметрам — например, по тегам, дате, автору
- Добавить пагинацию в AJAX-запросах для загрузки больших объёмов новостей
- Использовать шаблоны для вывода новостей, чтобы код был более структурированным
- Интегрировать с плагинами SEO и кеширования, чтобы не ухудшать производительность
- Добавить индикаторы загрузки и обработку ошибок для лучшего UX
Пример расширенного фильтра с тегами
Добавим дополнительный селект для тегов:
<select id="wpnews-tag-filter">
<option value="">Все теги</option>
<?php
$tags = get_tags();
foreach ($tags as $tag) {
echo '<option value="' . esc_attr($tag->term_id) . '">' . esc_html($tag->name) . '</option>';
}
?>
</select>И в JavaScript добавить обработчик для обоих фильтров, собирая значения и передавая их в AJAX. В PHP-обработчике добавить параметр 'tag__in' в WP_Query.
Использование плагинов для фильтрации новостей
Если вы хотите готовое решение с визуальным конструктором, обратите внимание на плагины, например:
- Clearfy Pro — среди прочих функций есть улучшенные фильтры и оптимизация запросов.
- WPRemark — плагин для создания отзывов и рейтингов, который можно интегрировать с новостями и фильтрами.
Однако создание собственного AJAX-фильтра даёт полный контроль над логикой и выводом, а также позволяет сделать интерфейс максимально удобным под ваши задачи.
Итоги
Реализация AJAX-фильтра новостей в WordPress — это отличное решение для повышения удобства пользователей и повышения скорости работы сайта. С помощью простого кода на PHP и JavaScript вы можете создать динамический фильтр, который будет быстро подгружать новости без перезагрузки страницы.
В дальнейшем можно усложнять фильтры, добавлять пагинацию и интегрировать с плагинами для ещё более мощного функционала.
Экспериментируйте с кодом, и ваш новостной сайт на WordPress станет удобнее и современнее!