Плагин WP-PageNavi давно заслужил популярность среди разработчиков и пользователей WordPress как удобный и гибкий инструмент для создания пагинации. Однако нативная пагинация с перезагрузкой страниц уже не всегда удовлетворяет современным требованиям UX. Сегодня мы подробно разберём, как добавить AJAX пагинацию в WP-PageNavi, чтобы подгружать посты без перезагрузки страницы, а также реализовать простое кеширование для уменьшения серверной нагрузки.
Почему стоит использовать AJAX пагинацию с WP-PageNavi
Классическая пагинация через WP-PageNavi обновляет страницу при каждом переходе на другую страницу. Это приводит к дополнительным задержкам, потере состояния интерфейса и нагрузке на сервер. AJAX пагинация устраняет эти недостатки, подгружая данные на лету и обновляя только часть страницы.
Добавление AJAX пагинации позволит:
- Улучшить скорость работы сайта и отклик интерфейса;
- Обеспечить плавный UX без перезагрузки страницы;
- Снизить нагрузку на сервер, особенно при использовании кеширования;
- Сохранить SEO-дружественность за счёт правильной работы с URL и истории браузера.
Подготовка: подключение WP-PageNavi и базовый шаблон пагинации
Предположим, что WP-PageNavi уже установлен и активен. В шаблоне темы пагинация выводится стандартно:
<?php if (function_exists('wp_pagenavi')) wp_pagenavi(); ?>Для AJAX нам потребуется обернуть вывод постов и пагинацию в контейнеры с уникальными идентификаторами для динамического обновления:
<div id="wppagenavi-posts-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; endif; ?>
</div>
<div id="wppagenavi-pagination">
<?php if (function_exists('wp_pagenavi')) wp_pagenavi(); ?>
</div>Реализация AJAX пагинации: JavaScript и обработчик на PHP
1. JavaScript для перехвата кликов по пагинации
Добавим jQuery-скрипт, который будет перехватывать клики по ссылкам пагинации, отправлять AJAX-запрос на сервер и обновлять содержимое постов и пагинации.
jQuery(document).ready(function($) {
$(document).on('click', '#wppagenavi-pagination a', function(e) {
e.preventDefault();
var link = $(this).attr('href');
// Показать индикатор загрузки
$('#wppagenavi-posts-container').css('opacity', '0.5');
$.ajax({
url: wppagenavi_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'wppagenavi_ajax_pagination',
nonce: wppagenavi_ajax_object.nonce,
paged_link: link
},
success: function(response) {
if (response.success) {
$('#wppagenavi-posts-container').html(response.data.posts_html);
$('#wppagenavi-pagination').html(response.data.pagination_html);
history.pushState(null, null, link);
} else {
alert('Ошибка загрузки постов.');
}
$('#wppagenavi-posts-container').css('opacity', '1');
},
error: function() {
alert('Ошибка AJAX запроса.');
$('#wppagenavi-posts-container').css('opacity', '1');
}
});
});
});2. Локализация скрипта и добавление nonce
Чтобы передать URL для AJAX и nonce, добавим в functions.php следующий код:
function wppagenavi_enqueue_scripts() {
wp_enqueue_script('wppagenavi-ajax', get_template_directory_uri() . '/js/wppagenavi-ajax.js', array('jquery'), null, true);
wp_localize_script('wppagenavi-ajax', 'wppagenavi_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wppagenavi_ajax_nonce')
));
}
add_action('wp_enqueue_scripts', 'wppagenavi_enqueue_scripts');3. Обработчик AJAX запроса в PHP
Создадим функцию, которая будет получать номер страницы из ссылки, выполнять WP_Query и возвращать HTML для постов и пагинации.
function wppagenavi_ajax_pagination_handler() {
check_ajax_referer('wppagenavi_ajax_nonce', 'nonce');
if (empty($_POST['paged_link'])) {
wp_send_json_error();
}
$paged_link = esc_url_raw($_POST['paged_link']);
// Извлечь параметр paged из URL
$paged = 1;
$url_parts = parse_url($paged_link);
if (!empty($url_parts['query'])) {
parse_str($url_parts['query'], $query_params);
if (!empty($query_params['paged'])) {
$paged = intval($query_params['paged']);
}
}
// Настройка запроса с пагинацией
$args = array(
'post_type' => 'post',
'paged' => $paged,
'posts_per_page' => get_option('posts_per_page')
);
// Попытка получить кеш
$cache_key = 'wppagenavi_ajax_page_' . $paged;
$cached = get_transient($cache_key);
if ($cached) {
wp_send_json_success($cached);
}
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content"><?php the_excerpt(); ?></div>
</article>
<?php endwhile;
else : ?>
<p>Посты не найдены.</p>
<?php endif;
wp_reset_postdata();
$posts_html = ob_get_clean();
ob_start();
// Вывод пагинации с WP-PageNavi
if (function_exists('wp_pagenavi')) {
wp_pagenavi(array('query' => $query));
}
$pagination_html = ob_get_clean();
$response = array(
'posts_html' => $posts_html,
'pagination_html' => $pagination_html
);
// Сохраняем в кеш на 10 минут
set_transient($cache_key, $response, 10 * MINUTE_IN_SECONDS);
wp_send_json_success($response);
}
add_action('wp_ajax_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_handler');
add_action('wp_ajax_nopriv_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_handler');Настройка кеширования для AJAX пагинации
В коде выше использован transient API для кеширования HTML результата запроса. Это простое и эффективное решение для снижения нагрузки при часто повторяющихся запросах пагинации. Ключ кеша формируется по номеру страницы.
Важно помнить, что при добавлении новых постов кеш нужно сбрасывать. Например, можно добавить сброс кеша при сохранении поста:
function wppagenavi_clear_cache_on_save($post_id) {
if (wp_is_post_revision($post_id)) return;
// Удалим кеш для всех страниц (для простоты)
global $wpdb;
$transients = $wpdb->get_col("SELECT option_name FROM {$wpdb->options} WHERE option_name LIKE '_transient_wppagenavi_ajax_page_%'");
foreach ($transients as $transient) {
$key = str_replace('_transient_', '', $transient);
delete_transient($key);
}
}
add_action('save_post', 'wppagenavi_clear_cache_on_save');SEO и UX при AJAX пагинации с WP-PageNavi
Для SEO важно, чтобы пагинация работала и без JavaScript. Поэтому ссылки пагинации должны оставаться кликабельными. AJAX лишь улучшает UX, не ломая базовую навигацию.
Использование history.pushState в JS позволяет менять URL без перезагрузки, сохраняя возможность делиться ссылками и пользоваться кнопками браузера назад/вперед.
Для улучшения SEO можно добавить rel="next" и rel="prev" в ссылки пагинации, но WP-PageNavi этого по умолчанию не делает. При необходимости эту функцию можно реализовать дополнительно.
Заключение и рекомендации
Добавление AJAX пагинации в WP-PageNavi — это отличное решение для повышения интерактивности и производительности сайта. Простое кеширование с транзиентами поможет снизить нагрузку на сервер и ускорить отклик.
Если нужен более продвинутый кеш, можно рассмотреть интеграцию с Redis или Memcached, а также использовать плагин Clearfy Pro для оптимизации и управления кешем.
Также обратите внимание на плагин ABC Pagination от WPSHOP, который предлагает расширенные возможности пагинации с AJAX и кешированием из коробки.