Бесконечная прокрутка в WordPress без использования плагинов

Для бесконечной прокрутки одиночных статей ниже представлено решение

single.php

<div class="blog-article-section"> 
<?php while( have_posts() ): ?>   
<div class="blog-article">
  <?php if( have_posts() ): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endif;  ?>
  <div class="pagination-single" >
    <div class="next_post_link"><?php previous_post_link( '%link','Предыдущая запись' ) ?></div>
    <div class="previous_post_link"><?php next_post_link( '%link','Следующая запись' ) ?></div>
  </div>
</div>
<?php endwhile; ?>
</div>
<div class="blog-article1"></div>
<a href="#" class="loadArticle">Загрузить еще</a>

script.js

(function($) {
$(document).ready(function(){
    var next_count = 1;
    $('.next_post_link a').attr("id", "next"+next_count);
    var prev_count = 1;
    $('.prev_post_link a').attr("id", "prev"+prev_count);
    $(".loadArticle").click(function(e) {
        e.preventDefault();
        loadNextArticle();
    });
    $(window).scroll(function(){
        loadNextArticle();
        console.log('scroll')
    });
    function loadNextArticle(){
        var next_link = $("#next"+next_count).attr("href");
        var prev_link = $("#prev"+prev_count).attr("href");
         if(typeof(next_link) != "undefined"){
            $.ajax({
              type: "GET",
              url: next_link,
              data: {},
              async: false,
              success: function(data){
                next_count = ++next_count;
                var result = $(data);
                $('.next_post_link a', result).attr("id","next"+next_count);
                result.find('.blog-article').appendTo('.blog-article1').fadeIn('slow');
              }
            });
        } 
    }
});
}(jQuery));

Для реализации бесконечной прокрутки в WordPress можно использовать различные методы, включая JavaScript с WordPress REST API или библиотеки, такие как jQuery. Ниже приведено пошаговое руководство по реализации бесконечной прокрутки с использованием JavaScript и WordPress REST API.

Шаг 1: Подключение скриптов

Сначала подключите ваш JavaScript-файл в файле functions.php вашей темы.

function enqueue_infinite_scroll_script() {
    wp_enqueue_script(
        'infinite-scroll',
        get_template_directory_uri() . '/js/infinite-scroll.js',
        array('jquery'),
        null,
        true
    );

    // Передача данных в JavaScript
    wp_localize_script(
        'infinite-scroll',
        'infinite_scroll_params',
        array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'query_vars' => json_encode($wp_query->query),
        )
    );
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_script');

Шаг 2: Создание JavaScript-файла

Создайте файл js/infinite-scroll.js в директории вашей темы. Этот файл будет обрабатывать AJAX-запрос для загрузки дополнительных записей.

jQuery(function($) {
    var canBeLoaded = true, // этот параметр разрешает инициировать AJAX-запрос только при необходимости
        bottomOffset = 2000; // расстояние (в пикселях) от нижней части страницы, при котором нужно загружать новые записи

    $(window).scroll(function() {
        var data = {
            'action': 'loadmore',
            'query': infinite_scroll_params.query_vars, // получаем параметры из функции wp_localize_script()
            'page': infinite_scroll_params.current_page
        };

        if ($(document).scrollTop() > ($(document).height() - bottomOffset) && canBeLoaded == true) {
            $.ajax({
                url: infinite_scroll_params.ajax_url,
                data: data,
                type: 'POST',
                beforeSend: function(xhr) {
                    canBeLoaded = false; // отключаем AJAX-запрос во время его выполнения
                },
                success: function(data) {
                    if (data) {
                        $('#content').find('article:last-of-type').after(data); // вставляем новые записи
                        infinite_scroll_params.current_page++;
                        canBeLoaded = true; // AJAX-запрос завершён, разрешаем его снова
                    }
                }
            });
        }
    });
});

Шаг 3: Обработка AJAX-запроса

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

function loadmore_ajax_handler() {
    // Подготавливаем аргументы для запроса
    $args = json_decode(stripslashes($_POST['query']), true);
    $args['paged'] = $_POST['page'] + 1; // загружаем следующую страницу
    $args['post_status'] = 'publish';

    // Запрашиваем записи
    query_posts($args);

    if (have_posts()) :
        // Начинаем цикл
        while (have_posts()): the_post();

            // Ваш контент здесь
            get_template_part('template-parts/content', get_post_format());

        endwhile;
    endif;
    die; // завершаем скрипт, и даже wp_reset_query() не требуется!
}

add_action('wp_ajax_loadmore', 'loadmore_ajax_handler'); // если вызывается из админ-панели
add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler'); // если вызывается из других мест

Шаг 4: Изменение запроса

Измените основной запрос, чтобы передать необходимые параметры в JavaScript.

global $wp_query;
wp_localize_script('infinite-scroll', 'infinite_scroll_params', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'query_vars' => json_encode($wp_query->query),
    'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
));

Шаг 5: Добавление стилей для бесконечной прокрутки (опционально)

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

/* Пример CSS для индикатора загрузки */
.loading {
    text-align: center;
    padding: 20px;
    display: none;
}

.loading img {
    width: 32px;
    height: 32px;
}

Итог

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