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

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

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

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

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

Подготовка темы и регистрация AJAX обработчика в WordPress

Для начала необходимо зарегистрировать обработчик AJAX-запроса в файле functions.php вашей темы. Сделаем это следующим образом:

add_action('wp_enqueue_scripts', 'wptemy_enqueue_scripts');
function wptemy_enqueue_scripts() {
    wp_enqueue_script('wptemy-ajax-load', get_template_directory_uri() . '/js/ajax-load.js', array('jquery'), null, true);
    wp_localize_script('wptemy-ajax-load', 'wptemy_ajax_obj', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptemy_ajax_nonce')
    ));
}

add_action('wp_ajax_wptemy_load_posts', 'wptemy_load_posts_callback');
add_action('wp_ajax_nopriv_wptemy_load_posts', 'wptemy_load_posts_callback');

function wptemy_load_posts_callback() {
    check_ajax_referer('wptemy_ajax_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_type' => 'post',
        'paged' => $paged,
        'posts_per_page' => 5
    );

    $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_die();
}

Здесь мы добавили скрипт с AJAX-загрузкой и создали обработчик wptemy_load_posts_callback, который отдаёт следующие посты в формате HTML, используя стандартный шаблон темы.

JavaScript для отправки AJAX-запроса и подгрузки постов

Теперь создадим файл js/ajax-load.js с кодом, который будет отслеживать прокрутку страницы и загружать новые записи:

jQuery(document).ready(function($){
    var page = 2;
    var loading = false;
    $(window).scroll(function() {
        if(loading) return;
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
            loading = true;
            $.ajax({
                url: wptemy_ajax_obj.ajaxurl,
                type: 'POST',
                data: {
                    action: 'wptemy_load_posts',
                    page: page,
                    nonce: wptemy_ajax_obj.nonce
                },
                success: function(response) {
                    if(response.trim() === '<p>Больше записей нет.</p>') {
                        $(window).off('scroll');
                    } else {
                        $('#posts-container').append(response);
                        page++;
                    }
                    loading = false;
                },
                error: function() {
                    loading = false;
                }
            });
        }
    });
});

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

Вёрстка и вывод постов в теме

Для корректной работы необходимо обернуть список постов в контейнер с id posts-container, например, в файле index.php или archive.php:

<div id="posts-container">
    <?php
    if(have_posts()) {
        while(have_posts()) {
            the_post();
            get_template_part('template-parts/content', get_post_format());
        }
    }
    ?>
</div>

Это позволит динамически добавлять новые записи в этот блок.

Оптимизация и безопасность

Мы использовали wp_create_nonce и check_ajax_referer для защиты AJAX-запросов от подделок. Это обязательный шаг при работе с AJAX в WordPress.

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

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

Если на вашем сайте есть WooCommerce и нужно подгружать товары, можно адаптировать функцию следующим образом:

function wptemy_load_products_callback() {
    check_ajax_referer('wptemy_ajax_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_type' => 'product',
        'paged' => $paged,
        'posts_per_page' => 8
    );

    $query = new WP_Query($args);

    if($query->have_posts()) {
        while($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
    } else {
        echo '<p>Товаров больше нет.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wptemy_load_products', 'wptemy_load_products_callback');
add_action('wp_ajax_nopriv_wptemy_load_products', 'wptemy_load_products_callback');

И соответствующий JS с изменённым action, если нужно подгружать товары.

Заключение по реализации автоподгрузки постов

Таким образом, реализовать автоподгрузку постов в WordPress без плагинов вполне реально и достаточно просто, если правильно использовать AJAX и хуки WordPress. Это решение легко адаптировать под разные типы записей и обеспечить плавный пользовательский опыт.

Для более удобного вывода отзывов после автоподгрузки можно использовать, например, плагин WPRemark (подробнее на wpshop.ru), который совместим с динамическими обновлениями контента.