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

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

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

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

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


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


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

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

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

        )
    ),

    'posts_per_page' => 10                                 // кол-во постов (-1 все)

) );

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

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

<?php if ( $mypost_Query->max_num_pages > 1 ) { ?>
    <script>
    var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php',
        true_posts = '<?php echo serialize($mypost_Query->query_vars); ?>',
        current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>,
        max_pages = '<?php echo $mypost_Query->max_num_pages; ?>';
    </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="col-12">
        <div class="loadmore__{тип_записи}" title="Загрузить еще">
            Загрузить ещё
            <span class="span1"><?php echo $published_posts_remain; ?></span> из
            <span class="span2"><?php echo $published_posts_remain; ?></span>
        </div>
    </div>

<?php } ?>

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

jQuery(function($){

    // {тип_записи}

    $('.loadmore__{тип_записи}').on('click', function(){
      let _this = $(this);
      _this.text('Загрузка...'); // изменение текста кнопки, или же добавление прелоадера

      let data = {
          'action': 'loadmore_{тип_записи}',
          'query': true_posts,
          'page' : current_page
      };
      $.ajax({
          url: ajaxurl,
          data: data, // данные

          type: 'POST',
          success:function(data){
              if (data) {
                  _this.text('Загрузить ещё');
                  _this.parent().before(data); // вставка данных

                  current_page++; // увеличиваем номер страницы на единицу

                  if (current_page == max_pages) {
                      _this.remove(); // если последняя страница, удаляем кнопку

                  }
              } else {
                  $('.noload').fadeIn();
                  _this.remove(); // если закончились посты, удаляем кнопку

              }
          }
      });
  });

});

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

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

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

// {тип_записи}

function load_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();
            get_template_part( './template-parts/loop-{шаблон}');
        endwhile;
    }
    die();
}
add_action('wp_ajax_loadmore_{тип_записи}', 'load_posts_{тип_записи}');
add_action('wp_ajax_nopriv_loadmore_{тип_записи}', 'load_posts_{тип_записи}');

Многие блоки имеют класс _{тип_записи} на тот случай, если понадобится использовать несколько разных AJAX загрузок постов на одной или нескольких страницах. _{тип_записи} - можно просто массово заменить на нужный класс, в зависимости от того, что мы будем подгружать на страницу.

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

admin
01/12/2019 14:58