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

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

Почему стоит использовать AJAX для загрузки постов

AJAX (Asynchronous JavaScript and XML) позволяет обновлять часть страницы без полной перезагрузки. Для сайтов на WordPress это значит, что можно подгружать дополнительные записи блога, товары или отзывы по кнопке «Загрузить еще» или при прокрутке до конца страницы.

Преимущества подхода:

• Быстрая подгрузка контента без перезагрузки;
• Экономия трафика — подгружаются только новые данные;
• Улучшенный UX благодаря плавной работе интерфейса;
• Гибкость в отображении и фильтрации постов.

Этот метод подходит не только для блога, но и для каталогов, портфолио и любых кастомных типов записей.

Подготовка: добавляем AJAX обработчики в functions.php

Для начала зарегистрируем AJAX действия в файле functions.php вашей темы или в собственном плагине. В WordPress AJAX запросы обрабатываются через специальные хуки wp_ajax_ и wp_ajax_nopriv_ (для неавторизованных пользователей).

function wproot_ajax_load_posts() {
    // Проверяем nonce для безопасности
    check_ajax_referer('wproot_load_more_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $posts_per_page = 5;

    $args = [
        'post_type' => 'post',
        'paged' => $paged,
        'posts_per_page' => $posts_per_page,
    ];

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // Выводим контент поста, например, заголовок и дату
            echo '<article class="wproot-post">';
            echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
            echo '<div class="wproot-post-date">' . get_the_date() . '</div>';
            echo '</article>';
        }
    } else {
        echo '<p>Больше записей нет.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wproot_load_posts', 'wproot_ajax_load_posts');
add_action('wp_ajax_nopriv_wproot_load_posts', 'wproot_ajax_load_posts');

Здесь функция wproot_ajax_load_posts принимает номер страницы из POST-запроса, делает WP_Query и выводит HTML для постов. Обязательно используем wp_die() для завершения AJAX-обработчика.

Подключение скрипта и передача параметров AJAX

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

function wproot_enqueue_scripts() {
    wp_enqueue_script('wproot-ajax-load', get_template_directory_uri() . '/js/ajax-load-posts.js', ['jquery'], null, true);
    wp_localize_script('wproot-ajax-load', 'wproot_ajax_params', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wproot_load_more_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wproot_enqueue_scripts');

В этом примере мы передаем в JS адрес AJAX-обработчика и nonce, чтобы обеспечить безопасность запросов.

JavaScript: отправляем AJAX-запрос и обновляем список постов

Создаем файл js/ajax-load-posts.js с таким содержимым:

jQuery(document).ready(function($) {
    var page = 2; // следующая страница для загрузки
    var loading = false;

    $('#wproot-load-more').on('click', function() {
        if (loading) return;
        loading = true;
        $.ajax({
            url: wproot_ajax_params.ajax_url,
            type: 'POST',
            data: {
                action: 'wproot_load_posts',
                page: page,
                nonce: wproot_ajax_params.nonce
            },
            success: function(response) {
                if (response.trim() !== '<p>Больше записей нет.</p>') {
                    $('#wproot-posts-container').append(response);
                    page++;
                    loading = false;
                } else {
                    $('#wproot-load-more').hide();
                }
            },
            error: function() {
                alert('Ошибка загрузки');
                loading = false;
            }
        });
    });
});

Этот скрипт реагирует на клик по кнопке «Загрузить еще», отправляет AJAX-запрос с текущим номером страницы, и если есть посты — добавляет их в контейнер. Если постов больше нет, скрывает кнопку.

HTML-разметка для списка постов и кнопки загрузки

В нужном шаблоне или через шорткод выводим начальный список постов и кнопку:

<div id="wproot-posts-container">
    <?php
    // Выводим первые 5 постов при загрузке страницы
    $args = ['post_type' => 'post', 'posts_per_page' => 5, 'paged' => 1];
    $query = new WP_Query($args);
    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post(); ?>
            <article class="wproot-post">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="wproot-post-date"><?php the_date(); ?></div>
            </article>
        <?php endwhile;
        wp_reset_postdata();
    endif;
    ?>
</div>
<button id="wproot-load-more">Загрузить еще</button>

Дополнительные советы и плагины для расширения возможностей

Если хочется еще более продвинутого функционала, рекомендуем обратить внимание на плагины с поддержкой AJAX-пагинации и фильтрации:

• ABC Pagination — расширенный плагин пагинации с AJAX и кастомизацией;
• Clearfy Pro — для оптимизации и ускорения загрузки, можно отключать лишние скрипты и запросы;
• Использование кастомных REST API эндпоинтов для более гибкой загрузки данных — в этом поможет WPCommunity.

Используя описанный подход, вы получите компактный, быстрый и удобный список постов с подгрузкой, который легко адаптировать под любые задачи.