Как добавить бесконечную прокрутку на сайт WordPress

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

Использование плагинов

Самый простой способ добавить бесконечную прокрутку — установить плагин, например, Catch Infinite Scroll.

• Шаг 1: Перейдите в Плагины → Добавить новый.
• Шаг 2: Найдите плагин Infinite Scroll и установите его.
• Шаг 3: Активируйте плагин и настройте его под свои нужды.

Плагин автоматически добавит бесконечную прокрутку на страницы блога.

Настройка через тему

Некоторые темы WordPress, такие как GeneratePress или Astra, поддерживают бесконечную прокрутку из коробки.

• Перейдите в Настройки → Чтение.
• Найдите опцию «Бесконечная прокрутка» и активируйте ее.

Ручная реализация

Если вы хотите добавить бесконечную прокрутку вручную, можно использовать JavaScript и AJAX.

• Добавьте следующий код в файл functions.php:

function infinite_scroll_js() {
    if (is_home()) {
        wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'infinite_scroll_js');

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

jQuery(function($) {
    let page = 2;
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
            $.ajax({
                url: ajaxurl,
                data: {
                    action: 'load_posts',
                    page: page
                },
                success: function(response) {
                    if (response) {
                        $('#posts-container').append(response);
                        page++;
                    }
                }
            });
        }
    });
});

Добавьте обработчик AJAX в functions.php:

function load_posts() {
    $page = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'paged' => $page
    );
    $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());
        }
    }
    wp_die();
}
add_action('wp_ajax_load_posts', 'load_posts');
add_action('wp_ajax_nopriv_load_posts', 'load_posts');

Проверка работы

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

Заключение

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