В больших блогах и каталогах товаров часто возникает необходимость сделать пагинацию более удобной и быстрой. Стандартная пагинация WordPress требует перезагрузки страницы при переходе между страницами, что снижает скорость и комфорт пользователя. В этой статье мы подробно разберём, как создать динамическую пагинацию с помощью AJAX, чтобы подгружать новую страницу записей без перезагрузки.
Почему нужна AJAX пагинация в WordPress
Стандартная пагинация в WordPress работает через обновление всей страницы, что приводит к лишним задержкам и нагрузке на сервер. AJAX пагинация позволяет подгружать только список записей, оставляя остальную часть страницы неизменной, что ускоряет взаимодействие пользователя с сайтом и улучшает UX.
Это особенно важно для сайтов с большим количеством контента, например, новостных порталов, интернет-магазинов или блогов с сотнями записей.
Кроме того, AJAX пагинация позволяет сохранить состояние страницы, кнопки и другие элементы не перезагружая весь шаблон, что открывает возможности для более сложных интерактивных интерфейсов.
Подготовка к созданию AJAX пагинации
Для реализации нам потребуется:
- Создать кастомный запрос WP_Query для вывода записей;
- Добавить обработчик AJAX в functions.php;
- Написать JavaScript для отправки AJAX-запросов и подгрузки контента;
- Обеспечить корректную работу пагинации и обновление URL (по желанию).
В качестве примера мы сделаем пагинацию для стандартного типа записей «post».
Создание функции вывода постов с пагинацией
В шаблоне архива или в отдельном файле создадим функцию, которая выводит список записей и пагинацию. Обозначим её wpsolution_get_posts_ajax:
function wpsolution_get_posts_ajax($paged = 1) {
$args = [
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged,
];
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="wpsolution-post-list">';
while ($query->have_posts()) {
$query->the_post();
echo '<article id="post-' . get_the_ID() . '">';
echo '<h2>' . get_the_title() . '</h2>';
echo '<div>' . get_the_excerpt() . '</div>';
echo '</article>';
}
echo '</div>';
// Пагинация
$big = 999999999;
$pagination = paginate_links([
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, $paged),
'total' => $query->max_num_pages,
'type' => 'list',
'prev_text' => '« Назад',
'next_text' => 'Вперед »',
]);
echo '<nav class="wpsolution-pagination">' . $pagination . '</nav>';
wp_reset_postdata();
} else {
echo '<p>Записей не найдено.</p>';
}
}
Вызовите эту функцию в нужном месте шаблона, например:
<?php wpsolution_get_posts_ajax(); ?>
Добавление обработчика AJAX в functions.php
Создадим два AJAX-экшена: для авторизованных пользователей и для гостей. Обработчик получит номер страницы и вернёт обновлённый список:
add_action('wp_ajax_wpsolution_load_posts', 'wpsolution_load_posts_ajax_handler');
add_action('wp_ajax_nopriv_wpsolution_load_posts', 'wpsolution_load_posts_ajax_handler');
function wpsolution_load_posts_ajax_handler() {
$paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
ob_start();
wpsolution_get_posts_ajax($paged);
$content = ob_get_clean();
wp_send_json_success(['content' => $content]);
}
Подключение JavaScript для обработки кликов и AJAX-запросов
Добавьте скрипт в шаблон или через enqueue в functions.php:
function wpsolution_enqueue_scripts() {
wp_enqueue_script('wpsolution-ajax-pagination', get_template_directory_uri() . '/js/ajax-pagination.js', ['jquery'], null, true);
wp_localize_script('wpsolution-ajax-pagination', 'wpsolution_ajax', [
'ajax_url' => admin_url('admin-ajax.php'),
]);
}
add_action('wp_enqueue_scripts', 'wpsolution_enqueue_scripts');
Создайте файл ajax-pagination.js со следующим содержанием:
jQuery(document).ready(function($) {
$(document).on('click', '.wpsolution-pagination a', function(e) {
e.preventDefault();
var href = $(this).attr('href');
var paged = 1;
var match = href.match(/paged=(\d+)/);
if (match) {
paged = parseInt(match[1]);
}
$.ajax({
url: wpsolution_ajax.ajax_url,
type: 'POST',
data: {
action: 'wpsolution_load_posts',
paged: paged
},
beforeSend: function() {
$('.wpsolution-post-list').css('opacity', '0.5');
},
success: function(response) {
if (response.success) {
$('.wpsolution-post-list, .wpsolution-pagination').parent().html(response.data.content);
}
},
complete: function() {
$('.wpsolution-post-list').css('opacity', '1');
},
error: function() {
alert('Ошибка загрузки данных');
}
});
});
});
Дополнительные улучшения и советы
1. Обновление URL без перезагрузки: можно использовать history.pushState для смены адреса страницы, чтобы пользователь мог копировать URL и переходить по страницам без проблем.
2. Обработка ошибок: добавьте информативные сообщения и fallback на стандартную пагинацию, если AJAX не работает.
3. Оптимизация запросов: используйте кэширование для снижения нагрузки, особенно при большом трафике.
4. Интеграция с плагинами: если используете плагин Clearfy Pro, он может помочь с оптимизацией AJAX-запросов и безопасности.
Вывод
Динамическая пагинация с AJAX — это простой способ улучшить взаимодействие пользователей с сайтом на WordPress, особенно если контента много. При правильной реализации вы получаете быстрый и плавный интерфейс без лишних перезагрузок. Представленный код — базовый пример, который вы легко можете расширить под свои задачи и дизайн.
Для более продвинутых решений можно подключить библиотеку Infinite Scroll или использовать WPQuery с REST API и React/Vue, но вышеописанный метод отлично подходит для большинства классических сайтов.
Если хотите изучить другие полезные инструменты для работы с WordPress, посмотрите предложения на WPSHOP.ru — там есть мощные плагины и темы для оптимизации сайта.