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

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

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

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

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

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

Для создания автоподгрузки нам нужно:

• Создать обработчик AJAX-запроса в PHP;
• Подключить скрипт JavaScript для отслеживания прокрутки и отправки запросов;
• Вывести полученные посты на странице;
• Обработать случаи, когда посты закончились.

Создание AJAX-обработчика в functions.php

Добавим в файл functions.php вашей темы следующий код. Он будет принимать AJAX-запросы и возвращать HTML с постами.

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

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $posts_per_page = 5; // Кол-во постов на страницу

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

    $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-excerpt"><?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_more', 'wpstudy_load_more_posts');
add_action('wp_ajax_nopriv_wpstudy_load_more', 'wpstudy_load_more_posts');

Этот код создаёт AJAX-обработчик с экшеном wpstudy_load_more, который принимает номер страницы и возвращает HTML с постами или ошибку, если посты закончились.

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

В файле functions.php зарегистрируем и подключим скрипт, а также передадим необходимые параметры:

function wpstudy_enqueue_scripts() {
    wp_enqueue_script('wpstudy-load-more', get_template_directory_uri() . '/js/wpstudy-load-more.js', array('jquery'), null, true);
    wp_localize_script('wpstudy-load-more', 'wpstudyLoadMore', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpstudy_load_more_nonce'),
        'startPage' => 2 // старт с 2-й страницы
    ));
}
add_action('wp_enqueue_scripts', 'wpstudy_enqueue_scripts');

Теперь создаём файл js/wpstudy-load-more.js в папке вашей темы со следующим содержимым:

jQuery(document).ready(function($) {
    var page = wpstudyLoadMore.startPage;
    var loading = false;

    function wpstudyLoadPosts() {
        if (loading) return;
        loading = true;

        $.ajax({
            url: wpstudyLoadMore.ajaxurl,
            type: 'POST',
            data: {
                action: 'wpstudy_load_more',
                nonce: wpstudyLoadMore.nonce,
                page: page
            },
            success: function(response) {
                if (response.success) {
                    $('#wpstudy-posts-container').append(response.data.html);
                    page++;
                    loading = false;
                } else if (response.data === 'no_more_posts') {
                    $(window).off('scroll', scrollHandler);
                }
            },
            error: function() {
                loading = false;
            }
        });
    }

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

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

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

Вывод постов на странице с контейнером для автоподгрузки

В шаблоне вашей темы, например index.php или archive.php, выведите первые посты и добавьте контейнер с ID для подгрузки новых:

<div id="wpstudy-posts-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-excerpt"><?php the_excerpt(); ?></div>
            </article>
        <?php endwhile;
    endif;
    ?>
</div>

Обязательно убедитесь, что количество постов на первой странице совпадает с параметром $posts_per_page в AJAX-обработчике (в нашем примере 5), чтобы избежать дублирования.

Обработка SEO и UX нюансов автоподгрузки

Автоматическая подгрузка постов может негативно влиять на SEO, если поисковики не смогут индексировать весь контент. Для этого рекомендуем:

• Добавить классическую пагинацию с ссылками для SEO;
• Использовать <noscript> с пагинацией для пользователей без JavaScript;
• Обеспечить, чтобы URL и метаданные менялись при подгрузке (через History API), если это необходимо;
• Добавить индикатор загрузки, чтобы пользователь понимал, что идёт процесс.

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

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

И в JavaScript показать и скрыть его:

$('#wpstudy-loading').show();
// после загрузки
$('#wpstudy-loading').hide();

Заключение

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

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

Внедряйте этот подход и улучшайте UX вашего сайта уже сегодня!