Автоподгрузка контента в WordPress без перезагрузки страницы: практическое руководство

Автоподгрузка контента (ленивая загрузка или infinite scroll) — популярный приём для улучшения UX и снижения нагрузки на сервер. Вместо полной перезагрузки страницы при переходе на следующую страницу с записями, новые данные подгружаются динамически с помощью AJAX. В WordPress это реализовать можно несколькими способами, и в этой статье я расскажу, как сделать автоподгрузку постов с примерами кода и рекомендациями по плагинам.

Зачем нужна автоподгрузка контента в WordPress

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

Кроме того, автозагрузка контента положительно влияет на SEO, если реализована правильно, и улучшает показатели поведенческих факторов.

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

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

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

В файле functions.php темы подключаем JS с помощью wp_enqueue_script и передаём данные через wp_localize_script.

function wppuzzle_enqueue_scripts() {
    wp_enqueue_script('wppuzzle-loadmore', get_template_directory_uri() . '/js/loadmore.js', array('jquery'), null, true);
    wp_localize_script('wppuzzle-loadmore', 'wppuzzle_loadmore_params', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppuzzle_loadmore_nonce'),
        'posts_per_page' => get_option('posts_per_page'),
        'current_page' => 1
    ));
}
add_action('wp_enqueue_scripts', 'wppuzzle_enqueue_scripts');

Здесь мы передаём URL для AJAX, nonce для безопасности, количество постов на страницу и текущую страницу.

2. Обработка AJAX-запроса в PHP

Добавляем обработчик для AJAX-запроса, который будет возвращать HTML с постами.

function wppuzzle_load_more_posts() {
    check_ajax_referer('wppuzzle_loadmore_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_status' => 'publish',
        'posts_per_page' => get_option('posts_per_page'),
        'paged' => $paged
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            get_template_part('template-parts/content', get_post_format());
        }
        wp_send_json_success(ob_get_clean());
    } else {
        wp_send_json_error('no_more_posts');
    }
    wp_die();
}
add_action('wp_ajax_wppuzzle_load_more', 'wppuzzle_load_more_posts');
add_action('wp_ajax_nopriv_wppuzzle_load_more', 'wppuzzle_load_more_posts');

Этот код проверяет nonce, получает номер страницы из POST, формирует запрос к постам, выводит их HTML и возвращает через JSON.

3. JS для отправки AJAX-запроса и вставки постов

Создаём файл loadmore.js в папке темы /js/ со следующим содержимым:

jQuery(document).ready(function($) {
    var canLoad = true;
    var page = wppuzzle_loadmore_params.current_page + 1;

    $(window).scroll(function() {
        if (!canLoad) return;
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
            canLoad = false;
            $.ajax({
                url: wppuzzle_loadmore_params.ajaxurl,
                type: 'POST',
                data: {
                    action: 'wppuzzle_load_more',
                    nonce: wppuzzle_loadmore_params.nonce,
                    page: page
                },
                success: function(response) {
                    if (response.success) {
                        $('#posts-container').append(response.data);
                        page++;
                        canLoad = true;
                    } else if (response.data === 'no_more_posts') {
                        $(window).off('scroll');
                    }
                },
                error: function() {
                    canLoad = true;
                }
            });
        }
    });
});

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

Плагины для автоподгрузки контента в WordPress

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

Ajax Load More — мощный плагин для загрузки постов, комментариев и кастомных типов через AJAX. Поддерживает шаблоны, фильтры, пагинацию.
WP Infinite Scroll Post Loader — простой плагин для бесконечной прокрутки с настройками параметров подгрузки.
Yelly — тема с встроенной функцией автоподгрузки и оптимизацией под мобильные устройства (подходит, если используете тему с wpshop.ru)

Все эти плагины можно найти и установить с официального репозитория WordPress. Для интеграции с вашим сайтом советую обратить внимание на Ajax Load More с подробной документацией и примерами.

Особенности и советы по реализации автоподгрузки

При внедрении автоподгрузки важно учитывать несколько моментов:

SEO и индексация: поисковые роботы должны иметь возможность индексировать весь контент. Поэтому желательно иметь обычную пагинацию, а автоподгрузку сделать дополнительной опцией.
Оптимизация запросов: не запрашивайте слишком много постов за раз — это может замедлить работу сайта и увеличить нагрузку.
Кэширование: используйте плагины кэширования и убедитесь, что AJAX-запросы корректно обрабатываются кэшем или отключаются для них.
UX и уведомления: добавьте индикатор загрузки и сообщение, когда посты закончились, чтобы пользователь понимал, что контент полностью загружен.

Пример улучшения автоподгрузки: вывод сообщений и индикатора загрузки

Добавим в HTML контейнер для сообщений и индикатор загрузки:

<div id="posts-container">
  <!-- Здесь посты -->
</div>
<div id="loadmore-message" style="text-align:center; padding:10px; display:none;">Загрузка...</div>

И изменим JS, чтобы показывать индикатор и сообщение об окончании:

jQuery(document).ready(function($) {
    var canLoad = true;
    var page = wppuzzle_loadmore_params.current_page + 1;

    function showLoading(show) {
        if(show) $('#loadmore-message').text('Загрузка...').show();
        else $('#loadmore-message').hide();
    }

    $(window).scroll(function() {
        if (!canLoad) return;
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
            canLoad = false;
            showLoading(true);
            $.ajax({
                url: wppuzzle_loadmore_params.ajaxurl,
                type: 'POST',
                data: {
                    action: 'wppuzzle_load_more',
                    nonce: wppuzzle_loadmore_params.nonce,
                    page: page
                },
                success: function(response) {
                    showLoading(false);
                    if (response.success) {
                        $('#posts-container').append(response.data);
                        page++;
                        canLoad = true;
                    } else if (response.data === 'no_more_posts') {
                        $('#loadmore-message').text('Больше записей нет.');
                        $(window).off('scroll');
                    }
                },
                error: function() {
                    showLoading(false);
                    canLoad = true;
                }
            });
        }
    });
});

Так пользователю будет понятен процесс загрузки и окончание списка.

Выводы по автоподгрузке постов в WordPress

Автоподгрузка контента — отличное решение для улучшения UX и оптимизации работы сайта. Реализовать её можно самостоятельно с помощью AJAX-запросов и JS, а можно использовать готовые плагины. Главное — не забывать про SEO, оптимизацию и удобство пользователя.

Для ускоренного старта рекомендую обратить внимание на плагин Ajax Load More с поддержкой кастомизации и шаблонов.