Zenn
👏

WordPress + jQuery + Ajaxで『READ MORE』機能を実装する方法（管理画面で投稿）

に公開
JavaScript
jQuery
WordPress
Ajax
tech

はじめに

WordPressでトップページに投稿を表示して、「READ MORE」ボタンをクリックすると次の投稿を非同期で読み込む機能を実装しました。

今回は、WP_Query と Ajax (jQuery) を使って、以下のような流れで実装します。

完成イメージ

  1. 最初に3件だけ投稿を表示
  2. 「READ MORE」ボタンをクリックすると次の3件を取得
  3. 投稿がなくなるまで繰り返し表示

1. front-page.php の編集

  • 最初に3件だけ投稿を表示します。
front-page.php
<section id="content" class="content">
<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 3,
  'orderby' => 'post_date',
  'order' => 'DESC',
);
$posts = new WP_Query($args);
?>
<?php if ($posts->have_posts()) : ?>
  <?php while ($posts->have_posts()) : $posts->the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

<div id="more_disp">
  <p class="p-post-btn">READ MORE</p>
</div>
</section>

<script>
  var ajax_url = "<?php echo get_template_directory_uri(); ?>/page-readmore.php";
</script>
  • 用途によってpost_typeは変更してください

2.page-readmore.php の作成

  • クリック後に取得する投稿を処理して返すファイルです。
page-readmore.php
<?php
require_once("../../../wp-config.php");

$now_post_num = $_POST['now_post_num'];
$get_post_num = $_POST['get_post_num'];

$args = array(
  'post_type' => 'post',
  'posts_per_page' => $get_post_num,
  'offset' => $now_post_num,
  'orderby' => 'post_date',
  'order' => 'DESC',
);
$query = new WP_Query($args);

$html = '';
if ($query->have_posts()) {
  while ($query->have_posts()) {
    $query->the_post();
    $html .= '<h2>' . get_the_title() . '</h2>';
  }
  wp_reset_postdata();
}

// 投稿がまだあるなら、READ MORE ボタンを再表示
if ($query->post_count === $get_post_num) {
  $html .= '<div id="more_disp"><p class="p-post-btn">READ MORE</p></div>';
}

echo $html;

3. main.js（JavaScript）

  • クリックしたときにAjax通信して、投稿を追加表示する処理です。
main.js
jQuery(function($) {
  var now_post_num = 3;
  var get_post_num = 3;

  $(document).on("click", ".p-post-btn", function () {
    $.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 += get_post_num;
      $("#more_disp").remove(); // 一旦ボタン削除
      $("#content").append(data); // 投稿追加
    })
    .fail(function () {
      alert("エラーが発生しました");
    });

    return false;
  });
});

Discussion