Как использовать пагинацию с AJAX и кешированием в WP-PageNavi

Плагин WP-PageNavi давно зарекомендовал себя как надежное решение для реализации пагинации в WordPress. Однако классическая пагинация без AJAX обновляет всю страницу, что снижает скорость взаимодействия пользователя с сайтом и создает дополнительную нагрузку на сервер. В этой статье разберем, как добавить AJAX пагинацию в WP-PageNavi, при этом реализовав эффективное кеширование, чтобы ускорить загрузку и снизить нагрузку.

Почему стоит использовать AJAX пагинацию с кешированием в WP-PageNavi

Стандартная пагинация обновляет содержимое через перезагрузку страницы, что не всегда удобно и быстро. AJAX пагинация позволяет загружать новые страницы контента без перезагрузки, улучшая UX и снижая время ожидания.

Однако при использовании AJAX пагинации без кеширования сервер может обрабатывать множество аналогичных запросов, что повышает нагрузку. Чтобы этого избежать, нужно внедрить кеширование на уровне AJAX-запросов.

В итоге мы получаем:

• Быструю подгрузку постов без перезагрузки страницы.
• Снижение нагрузки на сервер за счет кеширования.
• Совместимость с WP-PageNavi и стандартным циклом WordPress.

Подготовка: подключение WP-PageNavi и базовая пагинация

Убедитесь, что плагин WP-PageNavi установлен и активирован. В шаблоне, где выводятся посты, пагинация обычно вызывается через:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Этот вызов выводит классическую пагинацию. Мы будем использовать его как базу и дополнительно внедрим AJAX.

Реализация AJAX пагинации с кешированием в WP-PageNavi

1. Добавляем JavaScript для обработки кликов на пагинацию

Создаем скрипт, который перехватывает клики на ссылки пагинации и отправляет AJAX-запрос на сервер, подгружая новые посты без перезагрузки.

jQuery(document).ready(function($) {
  $(document).on('click', '.wp-pagenavi a', function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').fadeTo('fast', 0.5);
    $.ajax({
      url: link,
      type: 'GET',
      dataType: 'html',
      success: function(data) {
        var newContent = $(data).find('#content').html();
        var newPagination = $(data).find('.wp-pagenavi').html();
        $('#content').html(newContent);
        $('.wp-pagenavi').html(newPagination);
        $('#content').fadeTo('fast', 1);
        history.pushState(null, null, link);
      },
      error: function() {
        alert('Ошибка загрузки данных. Попробуйте позже.');
        $('#content').fadeTo('fast', 1);
      }
    });
  });
});

Здесь:

• #content — блок с постами, который нужно обновлять.
• Обновляем и содержимое, и пагинацию.
• Используем history.pushState для обновления URL без перезагрузки.

2. Кеширование AJAX ответов на сервере с помощью Transients API

Чтобы снизить нагрузку при повторных запросах к одинаковым страницам пагинации, применим кеширование через WordPress Transients API.

В functions.php добавим обработчик AJAX, который будет отдавать кешированный HTML:

add_action('wp_ajax_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_callback');
add_action('wp_ajax_nopriv_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_callback');

function wppagenavi_ajax_pagination_callback() {
  $paged = isset($_GET['paged']) ? intval($_GET['paged']) : 1;
  $cache_key = 'wppagenavi_ajax_page_' . $paged;
  $cached = get_transient($cache_key);

  if ($cached !== false) {
    echo $cached;
    wp_die();
  }

  // Запрос постов для текущей страницы
  $query = new WP_Query(array(
    'post_type' => 'post',
    'paged' => $paged,
    'posts_per_page' => get_option('posts_per_page'),
  ));

  ob_start();
  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      get_template_part('template-parts/content', get_post_format());
    endwhile;
  endif;

  // Вывод пагинации WP-PageNavi
  if (function_exists('wp_pagenavi')) {
    wp_pagenavi(array('query' => $query));
  }

  wp_reset_postdata();

  $output = ob_get_clean();
  set_transient($cache_key, $output, HOUR_IN_SECONDS); // Кеш на 1 час

  echo $output;
  wp_die();
}

Данный код обрабатывает AJAX-запросы, возвращая готовый HTML с постами и пагинацией, кешируя его на 1 час. Это ускоряет повторные загрузки.

3. Модификация JavaScript для вызова AJAX обработчика

Изменим JS, чтобы он вызывал наш обработчик:

jQuery(document).ready(function($) {
  $(document).on('click', '.wp-pagenavi a', function(e) {
    e.preventDefault();
    var pageUrl = $(this).attr('href');
    var paged = new URL(pageUrl).searchParams.get('paged') || 1;
    $('#content').fadeTo('fast', 0.5);
    $.ajax({
      url: my_ajax_object.ajax_url,
      data: {
        action: 'wppagenavi_ajax_pagination',
        paged: paged
      },
      success: function(data) {
        $('#content').html(data);
        $('#content').fadeTo('fast', 1);
        history.pushState(null, null, pageUrl);
      },
      error: function() {
        alert('Ошибка загрузки данных. Попробуйте позже.');
        $('#content').fadeTo('fast', 1);
      }
    });
  });
});

И зарегистрируем локализацию с передачей AJAX URL в шаблоне:

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', 'my_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
  ));
}
add_action('wp_enqueue_scripts', 'wppagenavi_enqueue_scripts');

Дополнительные советы по оптимизации и тонкая настройка

Оптимизация кеша

Вы можете настроить время хранения кеша в set_transient в зависимости от частоты обновления контента. Если контент обновляется редко — ставьте большее время, если часто — уменьшайте.

Обработка параметров запроса

Если на сайте используются дополнительные параметры фильтрации (категории, метки), следует учитывать их при формировании ключа кеша, чтобы не отдавать некорректный кеш.

Совместимость с другими плагинами

При использовании других плагинов, влияющих на вывод постов, стоит тестировать AJAX пагинацию на предмет конфликтов. Иногда помогает отключение AJAX на определённых страницах.

Пример интеграции с плагином Clearfy Pro для дополнительной оптимизации

Плагин Clearfy Pro позволяет отключить лишние скрипты и стили на страницах с пагинацией, что ускоряет загрузку. Рекомендуется использовать его в связке для комплексной оптимизации.

Для этого в Clearfy Pro активируйте опцию оптимизации скриптов и добавьте условие, исключающее загрузку ненужных ресурсов на AJAX-запросах пагинации.

Итог

Добавление AJAX пагинации с кешированием в WP-PageNavi — отличный способ улучшить юзабилити и производительность сайта на WordPress. В статье приведены рабочие примеры кода и рекомендации, которые можно адаптировать под любые задачи.