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

21 сентября 2019 WordPress Ajax

Кнопка «Показать ещё» и бесконечный скроллинг — это по сути постраничная навигация, которая подгружает следующую страницу с постами без перезагрузки страницы. Подобные примеры часто можно встретить в лентах соц. сетей. В этом примере показана реализация кнопки «Показать ещё» и бесконечного скроллинга постов на Ajax в CMS WordPress.

Кнопка «Показать ещё» в WordPress

Принцип использования сводится к тому, что если на странице есть ещё не показанные посты, т.е. следующая страница, то будет выведена кнопка «Показать ещё». При нажатии на неё посылается стандартный Ajax-запрос к обработчику, который отдает посты следующей страницы и они отображаются ниже уже показанных.

Давайте создадим кнопку в списке постов рубрики. Для этого в файле category.php после цикла while, добавляем следующий код:

        
        var ajaxurl = '/wp-admin/admin-ajax.php';
        var posts_vars = '';
        var current_page = ;
        var max_pages = '';
        
        Показать ещё

При первом вызове этот код выводит кнопку, если общее число страниц max_num_pages больше 1. А так же задает нужные JS переменные ajaxurl — ссылка на стандартный обработчик WP, posts_vars — данные запроса, current_page — номер текущей страницы, max_pages — максимальное кол-во страниц.

Теперь необходимо создать JS-скрипт, который отправляет Ajax запросы и выводит посты при нажатии на кнопку. Назовем его loadmore.js и поместим его в папку js текущей темы. Про основы Ajax в WordPress можно почитать в этой статье.

jQuery(function($){
        $('#loadmore').click(function(){ // клик на кнопку
                $(this).text('Загрузка...'); // меняем текст на кнопке
                // получаем нужные переменные
                var data = {
                        'action': 'loadmore',
                        'query': posts_vars,
                        'page' : current_page
                };
                // отправляем Ajax запрос 
                $.ajax({
                        url:ajaxurl,
                        data:data,
                        type:'POST',
                        success:function(data){
                                if(data) { 
                                        $('#loadmore').text('Показать ещё').before(data); // добавляем новые посты
                                        current_page++; // записываем новый номер страницы
                                        if (current_page == max_pages) $("#loadmore").remove(); // если последняя страница, удаляем кнопку
                                } else {
                                        $('#loadmore').remove(); // если посты не были получены так же удаляем кнопку
                                }
                        }
                });
        });
});

Теперь нужно подключить этот скрипт в теме WordPress. В файле functions.php добавляем следующий код:

function loadmore_script() {
        wp_enqueue_script('jquery'); // подключает библиотеку jQuery необходимую для работы скрипта
        wp_enqueue_script('loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery')); // подключаем loadmore.js
}
 
add_action('wp_enqueue_scripts', 'loadmore_script');

Ну и последний шаг — это создание PHP функции, которая будет вызываться Ajax-запросом и отдавать нужные посты. Все в том же файле functions.php добавляем код:

function loadmore_get_posts(){
        $args = unserialize(stripslashes($_POST['query']));
        $args['paged'] = $_POST['page'] + 1; // следующая страница
        $args['post_status'] = 'publish';
 
        query_posts($args);
        // если посты есть
        if(have_posts()) :
                while(have_posts()): the_post();        
                the_post();?>
                

                
                
                
        
        var ajaxurl = '/wp-admin/admin-ajax.php';
        var posts_vars = '';
        var current_page = ;
        

И изменяем код файла loadmore.js, чтобы он вызывал Ajax-запрос не по нажатию кнопки, а при прокручивании страницы до нижней части сайта.

jQuery(function($){
        $(window).scroll(function(){
                var bottomOffset = 2000; // отступ от нижней части сайта, достигнув которой будет вызвана подгрузка следующих постов
                var data = {
                        'action': 'loadmore',
                        'query': posts_vars,
                        'page' : current_page
                };
                if($(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')) {
                        $.ajax({
                                url:ajaxurl,
                                data:data,
                                type:'POST',
                                beforeSend: function(xhr){
                                        $('body').addClass('loading');
                                },
                                success:function(data){
                                        if(data) { 
                                                $('#loadmore').before(data);
                                                $('body').removeClass('loading');
                                                current_page++;
                                        }
                                }
                        });
                }
        });
});