ajaxを使ってREAD MOREボタン等を押して「ページ遷移ナシ」でページネーションさせる実装方法

ajaxを使ってREAD MOREボタン等を押して「ページ遷移ナシ」でページネーションさせる実装方法をご紹介します。

しかも今回はロード中にクルクル回るローディングのアニメーションなんかも一緒につけてますので参考になればと思います。

一覧出力側

例えば記事を10個一覧表示させて、その下に「READ MORE」ボタンがあるようなサイト。

そしてボタンを押すと、その下に更に10個が追加で表示される、みたいな形を想定したものです。

【index.php等】

<div id="content">
  <?php $args = array(
    'post_type' => 'post',
    'showposts'   => 10,
    );
  ?>
  <?php $posts = new WP_Query($args); ?>
  <?php if ($posts -> have_posts()) : ?>
    <?php while($posts -> have_posts()) : $posts -> the_post(); ?>
      【ループ内容記述】
    <?php endwhile; ?>
  <?php endif; wp_reset_postdata(); ?>
 
  <div id="more_disp">
    <p class="p-more-btn">
      READ MORE
    </p>
  </div>
</div>
 
<script>
  var now_post_num = 10; // 現在表示されている数を指定
  var get_post_num = 10; // 取得したい数を指定
  $(function() {
    $(document).on('click', '#more_disp', function() {
      var ajax_url = '<?php echo get_template_directory_uri();?>/page-readmore.php';
      $.ajax({
        type: 'post',
        url: ajax_url,
        data: {
          'now_post_num': now_post_num,
          'get_post_num': get_post_num,
        },
        dataType: 'html',
      })
      .done(function(data){
        now_post_num = now_post_num + get_post_num;
        $("#more_disp").remove();
        $("#content").append(data);
      })
      .fail(function(){ // ajax通信成失敗の処理
        alert('エラーが発生しました');
      })
      return false;
    });
  });
</script>
 
<!-- 以下はloading用の記述 -->
<div class="ajax_loading is-hide">
  <div class="loading_icon"></div>
</div>
 
<script>
$(document).on("ajaxSend", function(e,jqXHR,obj){
  var $loading = $(".ajax_loading");
  $loading.removeClass("is-hide");
  setTimeout(function(){
    $.when(jqXHR).done(function(data){
      $loading.addClass("is-hide");
    });
    $.when(jqXHR).fail(function(){
      $loading.addClass("is-hide");
    });
  },400);
});
</script>
 
<style>
.is-hide {
 display: none !important;
}
.ajax_loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  transition: ease .2s;
}
.ajax_loading::before {
  content: "";
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0) perspective(0);
  backface-visibility: hidden;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin: 0 auto;
}
.ajax_loading::after {
  content: "";
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0) perspective(0);
  backface-visibility: hidden;
  width: 82px;
  height: 82px;
  border-radius: 50px;
  margin-top: -16px;
  margin-left: -16px;
  border: 16px solid #f00;
  border-right: 16px solid white;
  animation: rotate 1s infinite linear;
}
@keyframes rotate {
  0%    { transform: rotate(0deg) perspective(0); }
  100%  { transform: rotate(360deg) perspective(0); }
}
 
</style>

何となくこんな感じでいいかと思います。

読み込み側

次にajax発動した時に動かす用のファイルが必要になりますので

「page-readmore.php」とか、名前は何でもいいんですがファイルを用意します。

ajaxで読み込むページとなります。

【page-readmore.php】

<?php
  require_once("../../../wp-config.php");
  $now_post_num = $_POST['now_post_num'];
  $get_post_num = $_POST['get_post_num'];
  $loopcounter = 0;
  $html = '';
?>
 
<?php
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => $get_post_num,
    'offset' => $now_post_num,
  );
  $posts = new WP_Query($args); ?>
  <?php if ($posts -> have_posts()) : ?>
    <?php while($posts -> have_posts()) : $posts -> the_post(); ?>
 
<?php
//ヒアドキュメントでループ内の内容を変数に格納
$html .= <<<EOM
  【ループ内容記述】
EOM;
?>
 
  <?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
 
<?php
  // $loopcounter数を判断して再度READ MOREボタン設置
  if($loopcounter == $get_post_num) {
    $html .= '<div id="more_disp"><p class="p-more-btn">READ MORE</p></div>';
  }
  echo $html;

こんな感じでOKです。

最初の

ってのが重要っぽいですね。

取り合えずコピペで簡単に実装できるajaxページネーションでした。

現場から以上です！