Пагинация — важный элемент любой темы WordPress, особенно если на сайте много записей или товаров. Стандартная пагинация требует перезагрузки страницы, что не всегда удобно для пользователей. AJAX-пагинация позволяет загружать новые страницы контента без перезагрузки, улучшая пользовательский опыт и снижая нагрузку на сервер.
Зачем нужна AJAX-пагинация в WordPress
Традиционная пагинация перезагружает всю страницу при переходе на следующую страницу с записями. Это увеличивает время загрузки и нарушает плавность взаимодействия. AJAX-пагинация загружает только нужный контент, оставляя остальную часть страницы без изменений. Это делает интерфейс более динамичным и отзывчивым.
Кроме того, AJAX-пагинация полезна для сайтов с большим количеством записей, блогов, интернет-магазинов на WooCommerce и каталогов. Она помогает экономить трафик и ускоряет работу сайта.
Рассмотрим, как реализовать AJAX-пагинацию на примере стандартного цикла WordPress.
Реализация AJAX-пагинации: подготовка темы
Для начала нам нужно создать функцию, которая будет возвращать часть шаблона с записями для конкретной страницы. Также потребуется JavaScript, который будет отправлять AJAX-запрос и обновлять контент.
Шаг 1. Создаем PHP-функцию для обработки AJAX-запроса
Добавьте в файл functions.php вашей темы следующий код:
function wpdemo_ajax_load_posts() {
// Получаем номер страницы из AJAX-запроса
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
// Параметры запроса
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) {
// Буферизация вывода
ob_start();
while ($query->have_posts()) {
$query->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-summary"><?php the_excerpt(); ?></div>
</article>
<?php
}
wp_reset_postdata();
$content = ob_get_clean();
wp_send_json_success(array('content' => $content));
} else {
wp_send_json_error('Посты не найдены');
}
wp_die();
}
add_action('wp_ajax_wpdemo_load_posts', 'wpdemo_ajax_load_posts');
add_action('wp_ajax_nopriv_wpdemo_load_posts', 'wpdemo_ajax_load_posts');Эта функция принимает номер страницы, делает запрос записей и возвращает HTML-код постов.
Шаг 2. Подключаем JavaScript для отправки AJAX-запросов
Создайте файл js/wpdemo-pagination.js в вашей теме и добавьте туда следующий код:
jQuery(document).ready(function($) {
var page = 1;
$(document).on('click', '.wpdemo-pagination a', function(e) {
e.preventDefault();
var link = $(this).attr('href');
var matches = link.match(/paged=(\d+)/);
if (matches) {
page = parseInt(matches[1]);
loadPosts(page);
}
});
function loadPosts(page) {
$.ajax({
url: wpdemo_ajax_params.ajax_url,
type: 'POST',
data: {
action: 'wpdemo_load_posts',
page: page
},
beforeSend: function() {
$('.wpdemo-posts').html('<p>Загрузка...</p>');
},
success: function(response) {
if (response.success) {
$('.wpdemo-posts').html(response.data.content);
} else {
$('.wpdemo-posts').html('<p>Ошибка загрузки</p>');
}
},
error: function() {
$('.wpdemo-posts').html('<p>Ошибка AJAX-запроса</p>');
}
});
}
});Этот скрипт перехватывает клики по ссылкам пагинации, отменяет стандартное поведение и отправляет AJAX-запрос.
Шаг 3. Регистрируем и локализуем скрипт
В functions.php добавьте:
function wpdemo_enqueue_scripts() {
wp_enqueue_script('wpdemo-pagination', get_template_directory_uri() . '/js/wpdemo-pagination.js', array('jquery'), null, true);
wp_localize_script('wpdemo-pagination', 'wpdemo_ajax_params', array(
'ajax_url' => admin_url('admin-ajax.php')
));
}
add_action('wp_enqueue_scripts', 'wpdemo_enqueue_scripts');Вывод пагинации и контейнера для AJAX
В нужном шаблоне (например, index.php или archive.php) замените стандартный цикл на следующий код:
<div class="wpdemo-posts">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-summary"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
<div class="wpdemo-pagination">
<?php
echo paginate_links(array(
'total' => $query->max_num_pages,
'current' => $paged,
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
));
?>
</div>Этот код выводит посты и ссылки пагинации, по которым будет работать AJAX.
Советы и улучшения AJAX-пагинации
1. Добавьте индикатор загрузки. В примере выше простой текст «Загрузка...», но можно использовать спиннер или анимацию.
2. Обработка ошибок. Важно корректно обрабатывать ошибки AJAX-запросов и показывать пользователю понятные сообщения.
3. SEO и история браузера. AJAX-пагинация может не учитываться поисковиками. Для решения используйте history.pushState(), чтобы изменять URL при смене страницы и позволять индексировать контент.
4. Кэширование. При большом трафике стоит кэшировать результаты AJAX-запросов для ускорения.
Пример использования плагина Clearfy для оптимизации AJAX-запросов
Плагин Clearfy поможет оптимизировать работу сайта, включая AJAX-запросы, избавит от лишних скриптов и улучшит скорость загрузки страниц с AJAX-пагинацией.
После установки Clearfy рекомендуется активировать оптимизации JavaScript и кеширования, чтобы AJAX-пагинация работала максимально быстро и стабильно.
Итог
Реализация AJAX-пагинации в WordPress — практическое решение для улучшения UX и производительности сайта. В статье показано, как с помощью PHP и JavaScript организовать подгрузку постов без перезагрузки страницы, а также даны рекомендации по улучшению и оптимизации.
Используйте данный подход и адаптируйте под свои задачи, добавляя кастомизацию и интеграции с другими плагинами, чтобы сделать сайт на WordPress максимально удобным и современным.