AJAX загрузка постов в WordPress

Рассмотрим, как реализовать кнопку AJAX загрузки постов в WordPress. Т.е. загрузка постов будет осуществляться при нажатии на кнопку "загрузить еще" без перезагрузки страницы.
AJAX WordPress

Примерный код для страницы шаблона вывода постов.

<?php
$mypost_Query = new WP_Query( array(
    'post_type'        => '{тип_записи}',                  # post, page, custom_post_type

    'post_status'      => 'publish',                       # статус записи

    'posts_per_page'   => 6                                # кол-во постов вывода/загрузки


    'category_name'    => '{название_рубрики}',            # если рубрика


    'tax_query' => array(                                  # если элемент (термин) таксономии

        array(
            'taxonomy' => '{название_таксономии}',         # таксономия

            'field'    => 'slug',                          # slud/id

            'terms'    => '{ярлык/id_элемента_таксономии}' # термин (ярлык/id)

        )
    ),

) );

if ( $mypost_Query->have_posts() ) {
    while ( $mypost_Query->have_posts() ) { $mypost_Query->the_post();
        get_template_part('./inc/loop-{шаблон}');
    }
}
else { echo('<p>Извините, нет записей.</p>'); }
wp_reset_postdata();
?>

<?php // AJAX загрузка постов ?>

<?php if ( $mypost_Query->max_num_pages > 1 ) { ?>
    <script> var this_page = 1; </script>

    <div class="btn-loadmore" title="Загрузить еще"
         data-param-posts='<?php echo serialize($mypost_Query->query_vars); ?>'
         data-max-pages='<?php echo $mypost_Query->max_num_pages; ?>'
         data-tpl='doveryayut'
    >
        <i class="fas fa-redo"></i> Загрузить ещё
    </div>
<?php } ?>

В JavaScript обработчик передаём:

  • this_page - номер текущей страницы;
  • data-param-posts - параметры поста (post_type, post_status, posts_per_page и другие);
  • data-max-pages - сколько всего страниц;
  • data-tpl - тип записи (необходим чтобы на сайте использовать множество кнопок подгрузки записей с одним обработчиком, но разными шаблонами вывода).

Файл ajax-load-more.js - далее подключим его в functions.php

jQuery(function($){

    // AJAX загрузка страниц/записей WP

    $('.btn-loadmore').on('click', function(){
        let _this = $(this);
        _this.html('<i class="fas fa-redo fa-spin"></i> Загрузка...'); // изменение кнопки


        let data = {
            'action': 'loadmore',
            'query': _this.attr('data-param-posts'),
            'page': this_page,
            'tpl': _this.attr('data-tpl')
        }

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            data: data,
            type: 'POST',
            success:function(data){
                if (data) {
                    _this.html('<i class="fas fa-redo"></i> Загрузить ещё');
                    _this.prev().prev().append(data); // где вставить данные

                    this_page++;                      // увелич. номер страницы +1

                    if (this_page == _this.attr('data-max-pages')) {
                        _this.remove();               // удаляем кнопку, если последняя стр.

                    }
                } else {                              // если закончились посты

                    _this.remove();                   // удаляем кнопку

                }
            }
      });
  });

});

Здесь необходимо обратить внимание на _this.parent().after(data); // где вставить данные. Здесь указываем место, где вывыдить записи на странице. Используйте перемещение по DOM-дереву (prev(), next(), parent(). children()) и вставляйте в нужном месте (before(), after(), append(), prepend()).

Подключаем файл ajax-load-more.js в functions.php или же код выше можно просто скопировать в главный файл scripts.js / main.js

wp_enqueue_script( '{название_темы}-loadmore', get_template_directory_uri() . '/js/ajax-load-more.js', array('jquery'), '', true );

Напишем функцию для AJAX загрузки постов нужного шаблона в functions.php

// AJAX загрузка постов

function load_posts () {
    $args = unserialize( stripslashes( $_POST['query'] ) );
    $args['paged'] = $_POST['page'] + 1; // следующая страница


    query_posts( $args );
    if ( have_posts() ) {
        while ( have_posts() ) { the_post();

            if ($_POST['tpl'] === 'news') {
                get_template_part( '/template-parts/loop-{шаблон}');
            }

            if ($_POST['tpl'] === 'prices') {
                get_template_part( '/template-parts/loop-{шаблон2}');
            }

        }
        die();
    }
}
add_action('wp_ajax_loadmore', 'load_posts');
add_action('wp_ajax_nopriv_loadmore', 'load_posts');

Чтобы добавить новый параметр (или изменить его), используйте следующий код. Пример.

$args['posts_per_page'] = 10; // по сколько записей подгружать

Чтобы удалить параметр(ы), используйте код ниже.

$args = remove_query_arg( ['post_parent'] ); // удаление параметра «post_parent»

«Загрузить ещё» со счётчиком оставшихся записей/страниц в WordPress

В шаблоне вывода постов добавим код после тега script.

<?php
//Получить кол-во постов в определенной категории (типе записи)

$count_posts = wp_count_posts('{тип_записи}'); // post, page, custom_post_type

$published_posts_all = $count_posts->publish;  // общее кол-во записей


// ИЛИ

// Получить кол-во постов в определённом термине таксономии

$terms = get_terms(array(
    'taxonomy' => '{название_таксономии}',     // таксономия

    'slug'     => '{термин_таксономии}'        // элемент таксономии

));
foreach ($terms as $terms) {
    $count_posts = $terms->count;              // получаем сколько всего постов

}

$published_posts_remain = $count_posts - 10;   // оставшееся кол-во записей

?>

<div class="btn-loadmore" title="Загрузить еще">
    <i class="fas fa-redo"></i> Загрузить ещё
    <span class="span1"><?php echo $published_posts_remain; ?></span> из
    <span class="span2"><?php echo $published_posts_remain; ?></span>
</div>

<?php } ?>

На этом всё. Если вам понравилась данная статья или же было что-то непонятно, то рекомендую к прочтению: шпаргалка и полезные хуки по работе с WordPress.

admin