AJAX добавление постов в WordPress

Последнее время мне очень часто попадаются WP проекты, где необходимо реализовать динамическую подгрузку постов по нажатию на кнопку, например «Показать еще» или же создать бесконечное добавление постов при скролле страницы (infinity scroll). Поэтому далее в своем посте хочу поделиться своей простой техникой динамического добавления контента при каком-либо событии.

AJAX добавление постов после нажатия на кнопку

Итак, для начала понадобиться любая WordPress тема. Дальше в примере я взял обычную WP тему twentyfifteen и почистил ее от ненужных файлов. В результате у меня получилась следующая структура файлов:

Структура файлов AJAX подгрузка файлов WP

На первый взгляд содержимое обычной темы, но если бы не загадочный файл load-post.php. Исходя из его названия несложно догадаться за что он отвечает. К этому файлу мы вернемся позже, а сейчас откроем файл index.php в котором прописан код отвечающий за вывод постов.

<?php get_header(); ?>
    <?php $count_posts = wp_count_posts(); ?>
    <div id="post-count"><?php echo $count_posts->publish; ?></div>
    <div class="posts">
        <?php
            query_posts(array(
                'posts_per_page' => 6
            ));
            if( have_posts() ){
                while( have_posts() ){
                    the_post();
                    get_template_part('content','post');
                }
                wp_reset_query();
            }
        ?>
    </div>
    <a href="#" id="load-post" title="">Показать еще</a>
<?php get_footer(); ?>

 В самом верху и низу ничего ничего не обычного – стандартное подключение «шапки» и «подвала» сайта. После подключения «шапки» сайта следует блок, в котором выводится общее количество опубликованных постов. По сути это делать не обязательно, но в моем примере кнопка «Показать еще» будет исчезать как только выведутся все посты на странице. Ниже располагается непосредственно сам счетчик отвечающий за вывод первых 6 постов. После вывода постов идет сама кнопка (в нашем случае ссылка), которая и отвечает за AJAX подгрузку данных. На кнопку вешаем уникальный id с которым будет взаимодействовать jQ.

Разбираемся со скриптами подгрузки постов

Далее разберем js файл – custom.js. Перед написанием скрипта убедитесь в наличии строчек подключающих библиотеку jQuery в файле function.php т.к далее придется подключать через wp_enqueue_script custom.js файл к теме.

function ziscod_scripts_styles() {
	$url = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js';
	$test_url = @fopen($url,'r');
	if( $test_url !== false ) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', $url);
		wp_enqueue_script('jquery');
	} else {
		wp_deregister_script('jquery');
		wp_register_script('jquery', get_template_directory_uri().'/js/jquery-1.11.2.min.js',  __FILE__, false, '1.11.2', true);
		wp_enqueue_script('jquery');
	}
}
add_action( 'wp_enqueue_scripts', 'ziscod_scripts_styles' );

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

var page = 2,
    post_count = $('#post-count').text(),
    btn_load_post = $('#load-post'),
    url_controller = "/wp-content/themes/theme_name/load-post.php";

$(function(){
    if(post_count <= 6) {btn_load_post.hide();}

    btn_load_post.on('click',function(e){
        e.preventDefault();
        page++;
        $.ajax({
            type       : "GET",
            data       : {posts_per_page : 3, paged: page},
            dataType   : "html",
            url        : url_controller,
            success    : function(data){
                if(!data) {
                    btn_load_post.fadeOut();
                }
                var $data = $(data);
                $data.hide();
                $('.posts').append($data);
                $data.fadeIn(500, function(){
                    if($('.posts > article').size() == post_count) {
                        btn_load_post.hide();
                    }
                });
            }
        });
    });
});

 Думаю с представленным кодом возникнуть проблем не должно, все предельно просто. В начале объявляем все необходимые переменные. Не забудьте изменить theme_name на имя своей темы в переменной url_controller. При загрузке документа проверяем сколько постов на данный момент выводиться. Если постов меньше 6 то кнопку «Показать еще» прячем. Далее идет событие клика на кнопку «Показать еще». После клика на кнопку увеличиваем пагинацию на 1 и отправляем AJAX запрос. В запросе указываем по сколько выводить постов и в случае успешного выполнения, догружаем полученные посты. Каждый раз при добавлении постов идет проверка, которая считает количество выведенных постов и сравнивает их с общим количеством. Если все посты выведены на странице кнопка «Показать еще» больше не нужна и ее можно спрятать.

Теперь разберем загадочный файл load-post.php – обработчик/контроллер. Он будет отвечать за вывод очередного поста по нашему запросу. Ниже представлен код файла load-post.php.

define('WP_USE_THEMES', false);
require_once(__DIR__.'/wp-load.php');

$posts_per_page = (isset($_GET['posts_per_page'])) ? $_GET['posts_per_page'] : 0;
$paged = (isset($_GET['paged'])) ? $_GET['paged'] : 0;

query_posts(array(
    'posts_per_page' => $posts_per_page,
    'paged'          => $page
));

if (have_posts()) {
    while (have_posts()){
        the_post();
        get_template_part('content','post');
    }
}
wp_reset_query();

 По сути он не чем не отличается от файла index.php кроме 4 строчек. В начале отключаем оформление и подключаем дефолтные методы WordPress. После этого идут строчки проверяющие пришел ли GET запрос от js файла. И в самом конце идет обыкновенный счетчик вывода постов на страницу.

Далее идем в браузер и тестируем получившуюся красоту. После нажатия на кнопку «Показать еще» будет происходить подгрузка постов с плавным появлением.

 

AJAX добавление постов при скролле страницы – бесконечный скролл (infinity scroll)

Процесс создания бесконечной загрузки постов при скролле страницы по сути ничем не отличается от выше приведенного примера. Все файлы php оставляем как есть и изменяем только custom.js.

var $window = $(window),
    page = 2,
    loading = true,
    $content = $('.posts'),
    url_controller = "/wp-content/themes/theme_name/load-post.php",
    load_post = function() {
        $.ajax({
            type       : "GET",
            data       : {posts_per_page : 3, paged: page},
            dataType   : "html",
            url        : url_controller,
            success    : function(data){
                var $data = $(data);
                $data.hide();
                $content.append($data);
                $data.fadeIn(500, function(){
                    loading = false;
                });
            }
        });
    };

$(function(){
    $window.scroll(function() {
        var content_offset = $content.offset();

        if(!loading && ($window.scrollTop() + $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
            loading = true;
            page++;
            load_post();
        }
    });
    load_post();
});

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

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

Подписаться на новые статьи