Как создать динамическую пагинацию WordPress с использованием AJAX

В современных интернет-проектах важна не только функциональность, но и удобство взаимодействия пользователей с сайтом. Для WordPress одним из популярных способов улучшения пользовательского опыта является динамическая пагинация с использованием AJAX. Такой подход позволяет подгружать новые записи без перезагрузки страницы, что повышает скорость и вовлечённость посетителей.

Зачем нужна динамическая пагинация в WordPress

Стандартная пагинация WordPress основана на классическом переходе между страницами с перезагрузкой. Это хорошо работает, но в ряде случаев может быть неудобно. Например, при большом объёме записей или если нужно реализовать бесконечную прокрутку (infinite scroll). Динамическая пагинация решает эти задачи, подгружая контент по мере необходимости без полной перезагрузки.

Кроме того, AJAX пагинация помогает снизить нагрузку на сервер и улучшить SEO, если настроить правильную обработку URL с помощью pushState.

Основные этапы создания динамической пагинации с AJAX

Для реализации нам потребуется:

• Создать шаблон вывода постов с разметкой для динамической подгрузки.
• Написать JavaScript код, который будет отправлять AJAX запросы к серверу при клике на кнопку «Загрузить ещё» или при скролле.
• Обработать AJAX запрос на стороне WordPress, подготовить и вернуть нужный HTML.
• Обновить интерфейс, подгрузить новые записи и обновить параметры пагинации.

Пример реализации AJAX пагинации: пошаговое руководство

1. Шаблон вывода постов и кнопка загрузки

В файле шаблона (например, archive.php или custom page template) выводим посты и добавляем кнопку для подгрузки:

<div id="wpquery-posts-container">
  <?php
  $wpquery_page = 1;
  $wpquery_query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'paged' => $wpquery_page
  ));
  if($wpquery_query->have_posts()) :
    while($wpquery_query->have_posts()) : $wpquery_query->the_post(); ?>
      <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_excerpt(); ?></div>
      </article>
    <?php endwhile; wp_reset_postdata(); endif; ?>
</div>
<button id="wpquery-load-more" data-page="1">Загрузить ещё</button>

Обратите внимание, что мы задали атрибут data-page у кнопки — он будет отслеживать текущую страницу.

2. JavaScript для обработки клика по кнопке

Добавим скрипт, который отправит AJAX запрос к WordPress для загрузки следующей страницы постов:

jQuery(document).ready(function($) {
  $('#wpquery-load-more').on('click', function() {
    var button = $(this);
    var page = parseInt(button.data('page')) + 1;

    $.ajax({
      url: wpquery_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wpquery_load_more',
        page: page
      },
      beforeSend: function() {
        button.text('Загрузка...');
      },
      success: function(response) {
        if(response) {
          $('#wpquery-posts-container').append(response);
          button.data('page', page);
          button.text('Загрузить ещё');
        } else {
          button.text('Больше записей нет');
          button.prop('disabled', true);
        }
      },
      error: function() {
        button.text('Ошибка загрузки');
      }
    });
  });
});

Для работы AJAX нам нужно локализовать скрипт в functions.php, чтобы передать URL для AJAX запросов:

function wpquery_enqueue_scripts() {
  wp_enqueue_script('wpquery-ajax-pagination', get_template_directory_uri() . '/js/wpquery-ajax-pagination.js', array('jquery'), null, true);
  wp_localize_script('wpquery-ajax-pagination', 'wpquery_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php')
  ));
}
add_action('wp_enqueue_scripts', 'wpquery_enqueue_scripts');

3. Обработка AJAX запроса на сервере

В functions.php регистрируем обработчик:

function wpquery_ajax_load_more() {
  $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()) {
    while($query->have_posts()) {
      $query->the_post();
      echo '<article><h2>' . get_the_title() . '</h2><div>' . get_the_excerpt() . '</div></article>';
    }
  } else {
    wp_die();
  }
  wp_die();
}
add_action('wp_ajax_wpquery_load_more', 'wpquery_ajax_load_more');
add_action('wp_ajax_nopriv_wpquery_load_more', 'wpquery_ajax_load_more');

Оптимизация и расширения AJAX пагинации

Управление состоянием кнопки и загрузкой контента

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

Если на сайте много типов записей или сложный фильтр, в AJAX запрос можно передавать дополнительные параметры фильтрации, например, категории или метки.

Реализация бесконечной прокрутки вместо кнопки

Вместо кнопки можно настроить подгрузку новых постов при достижении низа страницы. Для этого в JavaScript используйте событие scroll и проверяйте позицию прокрутки относительно нижней части окна. При достижении порога запускайте AJAX запрос, аналогичный описанному выше.

Использование плагинов для упрощения задачи

Если хотите готовое решение, обратите внимание на плагин Ajax Load More, который предоставляет гибкий функционал динамической подгрузки постов с множеством настроек и интеграций.

Для более комплексных сайтов с кастомными типами записей и фильтрами подойдет плагин ABC Pagination от WPSHOP, который позволяет создавать красивые и функциональные пагинации с поддержкой AJAX и кастомных запросов.

Заключение по теме AJAX пагинации в WordPress

Динамическая пагинация с AJAX — это мощный инструмент для улучшения скорости загрузки и удобства пользователей на сайте WordPress. Реализация требует базовых знаний PHP, JavaScript и работы с WP_Query, но при этом даёт очень заметный эффект.

Вы можете начать с простого примера, приведённого выше, а затем адаптировать под свои задачи, добавляя фильтры, стили и анимации. В случае сложных проектов разумно рассмотреть готовые решения и плагины из каталога WordPress и WPSHOP, чтобы сэкономить время и усилия.