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

2020/06/08 21:29

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です。

 

最初の

require_once("../../../wp-config.php");

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

 

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

 

現場から以上です!

 

2645

PICK UP