Как создать автоподгрузку постов в WordPress без плагинов

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

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

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

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

Общая схема работы автоподгрузки постов

Принцип работы следующий:

• При загрузке страницы выводится первый набор постов.
• При прокрутке страницы до конца срабатывает JavaScript, который отправляет AJAX-запрос на сервер.
• Сервер возвращает следующий набор постов в формате HTML или JSON.
• JavaScript добавляет полученный контент в конец списка постов.
• Повторяется при достижении конца страницы, пока посты не закончатся.

Создаем PHP-функцию для получения постов

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

function wpstudy_ajax_load_posts() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $posts_per_page = 5; // количество постов за один запрос

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'paged' => $paged,
        'posts_per_page' => $posts_per_page,
    );

    $query = new WP_Query($args);

    if($query->have_posts()) {
        ob_start();
        while($query->have_posts()) {
            $query->the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content"><?php the_excerpt(); ?></div>
            </article>
            <?php
        }
        wp_reset_postdata();
        $posts_html = ob_get_clean();
        wp_send_json_success(array('html' => $posts_html));
    } else {
        wp_send_json_error('no_more_posts');
    }
    wp_die();
}
add_action('wp_ajax_wpstudy_load_posts', 'wpstudy_ajax_load_posts');
add_action('wp_ajax_nopriv_wpstudy_load_posts', 'wpstudy_ajax_load_posts');

В этом коде мы принимаем параметр page для пагинации, выполняем запрос и возвращаем HTML-код постов или ошибку, если постов больше нет.

Подключаем JavaScript для отправки AJAX-запросов

Чтобы инициировать подгрузку при скролле, добавим скрипт. Рекомендуется подключать его корректно через wp_enqueue_script и передавать параметры через wp_localize_script.

function wpstudy_enqueue_scripts() {
    wp_enqueue_script('wpstudy-infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), '1.0', true);
    wp_localize_script('wpstudy-infinite-scroll', 'wpstudy_vars', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'startPage' => 2,
        'maxPages' => 9999 // можно динамически задать максимальное количество страниц
    ));
}
add_action('wp_enqueue_scripts', 'wpstudy_enqueue_scripts');

Создаем файл infinite-scroll.js в папке темы /js/ с таким содержимым:

jQuery(document).ready(function($) {
    var canLoad = true;
    var page = wpstudy_vars.startPage;

    function loadPosts() {
        if (!canLoad) return;
        canLoad = false;

        $.ajax({
            url: wpstudy_vars.ajaxurl,
            type: 'POST',
            data: {
                action: 'wpstudy_load_posts',
                page: page
            },
            success: function(response) {
                if (response.success) {
                    $('#post-container').append(response.data.html);
                    page++;
                    canLoad = true;
                } else if (response.data === 'no_more_posts') {
                    $(window).off('scroll', scrollHandler);
                }
            },
            error: function() {
                canLoad = true;
            }
        });
    }

    function scrollHandler() {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            loadPosts();
        }
    }

    $(window).on('scroll', scrollHandler);
});

Этот скрипт отслеживает прокрутку страницы до конца и отправляет AJAX-запрос за новыми постами, которые добавляет в контейнер с ID post-container.

Разметка HTML и подготовка темы

В шаблоне темы, например, в index.php или home.php, выводим начальный набор постов и оборачиваем их в контейнер с ID post-container:

<div id="post-container">
<?php
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content"><?php the_excerpt(); ?></div>
        </article>
    <?php endwhile;
endif;
?>
</div>

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

Оптимизация и расширение функционала

Чтобы избежать проблем с производительностью, учитывайте следующие моменты:

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

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

Пример добавления индикатора загрузки

Добавьте в разметку HTML элемент для индикатора:

<div id="loading-indicator" style="display:none; text-align:center; padding:20px;">Загрузка...</div>

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

function loadPosts() {
    if (!canLoad) return;
    canLoad = false;
    $('#loading-indicator').show();
    $.ajax({
        ...
        success: function(response) {
            $('#loading-indicator').hide();
            ...
        },
        error: function() {
            $('#loading-indicator').hide();
            canLoad = true;
        }
    });
}

Заключение

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

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