Как создать динамический список с постами WordPress с использованием AJAX

Автор: Ксения Романова | Опубликовано: 18.03.2026

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

Что такое AJAX в контексте WordPress и зачем он нужен

AJAX (Asynchronous JavaScript and XML) — это технология, которая позволяет обновлять часть страницы без её полной перезагрузки. В WordPress AJAX используется для динамического взаимодействия с сервером через специальные обработчики, которые регистрируются с помощью action-хуков.

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

В WordPress для AJAX-запросов важно использовать специальные хуки wp_ajax_{action} для авторизованных пользователей и wp_ajax_nopriv_{action} для гостей.

Пример базовой структуры AJAX-запроса в WordPress

Для начала нужно зарегистрировать обработчик в файле functions.php или в плагине:

add_action('wp_ajax_yelly_load_posts', 'yelly_load_posts_callback');
add_action('wp_ajax_nopriv_yelly_load_posts', 'yelly_load_posts_callback');

function yelly_load_posts_callback() {
    // Логика получения постов
    wp_die(); // Завершаем AJAX-запрос корректно
}

На фронтенде создаём JavaScript, который отправляет запросы на сервер:

jQuery(document).ready(function($) {
  $('#load-more').on('click', function() {
    $.ajax({
      url: yelly_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'yelly_load_posts',
        paged: yelly_ajax_object.current_page
      },
      success: function(response) {
        $('#post-container').append(response);
        yelly_ajax_object.current_page++;
      }
    });
  });
});

Как реализовать динамическую подгрузку постов с пагинацией на примере темы Yelly

Предположим, в теме Yelly нужно показать первые 5 записей, а остальные подгружать кнопкой «Загрузить ещё». Для этого:

Создаём контейнер для постов и кнопку в шаблоне index.php или archive.php:

<div id="post-container">
  <?php
  $args = [
    'posts_per_page' => 5,
    'paged' => 1
  ];
  $query = new WP_Query($args);
  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
      get_template_part('template-parts/content', get_post_format());
    endwhile;
  endif;
  wp_reset_postdata();
  ?>
</div>
<button id="load-more">Загрузить ещё</button>

В functions.php регистрируем скрипт и передаём параметры AJAX:

function yelly_enqueue_scripts() {
  wp_enqueue_script('yelly-ajax', get_template_directory_uri() . '/js/yelly-ajax.js', ['jquery'], null, true);
  wp_localize_script('yelly-ajax', 'yelly_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'current_page' => 2,
    'posts_per_page' => 5
  ]);
}
add_action('wp_enqueue_scripts', 'yelly_enqueue_scripts');

Создаём обработчик AJAX-запроса:

function yelly_load_posts_callback() {
  $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
  $posts_per_page = 5;
  $args = [
    'posts_per_page' => $posts_per_page,
    'paged' => $paged
  ];
  $query = new WP_Query($args);
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      get_template_part('template-parts/content', get_post_format());
    }
  } else {
    echo '<p>Больше записей нет.</p>';
  }
  wp_reset_postdata();
  wp_die();
}
add_action('wp_ajax_yelly_load_posts', 'yelly_load_posts_callback');
add_action('wp_ajax_nopriv_yelly_load_posts', 'yelly_load_posts_callback');

Подключение JavaScript для подгрузки

Создайте файл js/yelly-ajax.js в папке темы и добавьте туда следующий код:

jQuery(document).ready(function($) {
  $('#load-more').on('click', function() {
    var button = $(this);
    button.prop('disabled', true).text('Загрузка...');
    $.ajax({
      url: yelly_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'yelly_load_posts',
        paged: yelly_ajax_object.current_page
      },
      success: function(response) {
        if (response.trim() === '<p>Больше записей нет.</p>') {
          button.text('Больше записей нет').prop('disabled', true);
        } else {
          $('#post-container').append(response);
          yelly_ajax_object.current_page++;
          button.prop('disabled', false).text('Загрузить ещё');
        }
      },
      error: function() {
        button.prop('disabled', false).text('Загрузить ещё');
        alert('Ошибка при загрузке данных');
      }
    });
  });
});

Оптимизация и улучшения: фильтры, сортировка и безопасность

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

Например, добавим фильтр по категории:

<select id="category-filter">
  <option value="0">Все категории</option>
  <?php
  $categories = get_categories();
  foreach ($categories as $category) {
    echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
  }
  ?>
</select>

Изменим JavaScript для передачи категории:

$('#load-more').on('click', function() {
  var category = $('#category-filter').val();
  // ...
  data: {
    action: 'yelly_load_posts',
    paged: yelly_ajax_object.current_page,
    category: category
  },
  // ...
});

И в PHP-обработчике добавим фильтрацию:

$args = [
  'posts_per_page' => $posts_per_page,
  'paged' => $paged
];
if (!empty($_POST['category']) && intval($_POST['category']) > 0) {
  $args['cat'] = intval($_POST['category']);
}

Не забывайте проверять и валидировать входящие данные для безопасности. Можно использовать check_ajax_referer для защиты от CSRF-атак.

Плагины для расширения возможностей AJAX-запросов в WordPress

Если хочется ускорить разработку и добавить дополнительные возможности, можно использовать плагины:

Ajax Load More — мощный плагин для подгрузки постов и других данных с гибкой настройкой. Позволяет создавать бесконечный скролл и кнопки загрузки.
WP Ajax Pagination — простой плагин, который заменяет стандартную пагинацию на AJAX.
Clearfy Pro — содержит модули оптимизации AJAX-запросов и управления кэшированием на сайте, что может повысить производительность.

Также можно интегрировать решение с плагином Yelly, если требуется расширенная работа с кастомными типами записей и таксономиями.