2021/04/30 0:35

[Wordpress]「READ MORE（もっと見る）ボタン」をクリックしてajaxで投稿記事の続きをページ遷移ナシで表示させる方法

WordPressを使ってブログ投稿の一覧を出力し、「もっと見る」ボタンとかで続きをふわっと表示させたい仕様にしたい時のシンプルな実装方法です。

オリジナルテーマの作成時にご利用ください。

後は読み込み時にローディングを付けたり、自由にカスタムしてください。

実装したいものの概要

・BLOG投稿記事を3件表示

・「READ MORE」ボタンを押したら4件目以降を下に表示

・ページ遷移させず投稿の続きとして表示させる

表示元のコード

まずは投稿BLOG記事を先に任意の件数だけ表示させましょう。

仮に3件とします。

そして「READ MORE」ボタンを付けておきます。

※スタイルは適宜当ててください。

【page-blog.php】ファイル（名前は仮）


<section id="content">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'orderby' => 'post_date',
'order' => 'DESC',
);
  ?>
  <?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-post-btn">
    READ MORE
    </p>
  </div>
</section>

ボタンをクリックした時のJavaScriptの記述

「.p-post-btn」が押された時に発動するajaxのコードを書きます。

「#content」の中身を残しつつ、appendで続きとして追加する処理です。

「#more_disp」はボタンを囲んでるクラスですが一旦消す処理をして、再度表示させるかは実際の投稿数によって判別します。

【page-blog.php】ファイル（名前は仮）


<script>
  var now_post_num = 3; // 現在表示されている数
  var get_post_num = 3; // 一度に取得する数
  $(function() {
    $(document).on('click', '.p-post-btn', 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>

ajax処理用のファイル

【page-readmore.php】ファイル

ajaxが発動した時の内容を別のファイルで用意しておきます。


<?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',
'orderby' => 'post_date',
'order' => 'DESC',
    '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 $loopcounter++;?>
 
<?php //ヒアドキュメントで変数に格納し続ける
$html .= <<<EOM
●ここに投稿記事の内容（タイトルとか画像とか）を記述（元のファイルと同じように投稿記事を出力させればOK）
EOM;
?>
 
  <?php endwhile;?>
<?php endif; wp_reset_postdata();?>
 
<?php // カウンターを用意しておいてボタンを表示させるかを判別
  if($loopcounter == $get_post_num) {
  // 表示させようとした投稿数に実際の投稿が届かない場合はボタンの表示はない
    $html .= '<div id="more_disp"<p class="p-post-btn">READ MORE</p></div>';
  }
  echo $html;