一般的にWordPressの記事一覧ページでは投稿記事件数が多いと1ページに表示するデフォルト表示件数毎にページネーション(1・2・3・4…)を行いますが、今回はページネーションせずに投稿記事一覧ページを「もっと見る」で投稿記事を無限読込スクロールする方法をご紹介します。
Contents
ディスプレイ広告
記事一覧ページを「もっと見る」で無限読込スクロールするために必要なファイル
- archive.php:記事一覧ページ
- functions.php:記事一覧ページ初期表示と「もっと見る」クリック時のajaxから呼ばれる処理を追記
- jQuery(3.5.1)ファイルを読み込み
- archive.jsファイル:記事一覧ページ「もっと見る」クリック時のajax処理
archive.php:記事一覧ページ
投稿記事一覧ページの記述は以下の通りです。まず投稿記事の全件数取得を取得し、投稿記事(リンク、サムネイル、タイトル、日付)一覧を表示します。「もっと見る」を表示させたい件数(以下は20件以上)を超えた記事数の場合に「もっと見る」を表示させてます。
<?php if (have_posts()): ?> <!-- 投稿記事の全件数取得 --> <?php global $wp_query; $count = $wp_query->found_posts;?> <!-- data-countに投稿記事全件数を設定 --> <ul class="load" data-count="<?php echo $count; ?>" data-post-type=""> <?php while (have_posts()): the_post(); ?> <li class="card"> <a href="<?php the_permalink(); ?>"> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, true); if(has_post_thumbnail()): ?> <img class="card-img" src="<?php echo $image_url[0]; ?>" alt="<?php the_title(); ?>"> <?php endif; ?> <div class="card-content"> <h4 class="card-title"><?php the_title(); ?></h4> <p><?php the_time('Y.m.d') ?></p> </div> </a> </li> <?php endwhile; ?> </ul> <!-- 一覧表示件数が20件の場合、全記事件数より少ない場合「もっと見る」ボタンを表示 --> <?php if($count > 20): ?> <div class="more more_btn">もっと見る</div> <?php endif; ?> <?php endif; ?>
functions.php:記事一覧ページ初期表示と「もっと見る」クリック時のajaxから呼ばれる処理を追記
※記事一覧ページ初期表示と「もっと見る」クリック時のajaxから呼ばれる処理を追記します。
/* 初期表示件数を設定 */ function my_custom_query_vars( $query ) { if ( !is_admin() && $query->is_main_query()) { if ( is_post_type_archive() ) { $query->set( 'posts_per_page' , 20 ); //一覧表示件数が20件の場合 } } return $query; } add_action( 'pre_get_posts', 'my_custom_query_vars' ); /* ajax処理 */ function my_ajax(){ global $post; $args = array( 'posts_per_page' => $_POST["get_post_num"], // 追加で表示する件数 'offset' => $_POST["now_post_num"], //既に表示済みの件数は除外する 'post_type' => $_POST["post_type"], 'orderby' => 'date', //日付で並び替え 'order' => 'DESC', ); $my_posts = get_posts($args); foreach ($my_posts as $post) : setup_postdata($post); echo '<li class="card">'; echo '<a href="'.get_the_permalink().'">'; $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, true); if(has_post_thumbnail()){ echo '<img class="card-img" src="'.$image_url[0].'" alt="'.get_the_title().'">'; } echo '<div class="card-content">'; echo '<h4 class="card-title">'.get_the_title().'</h4>'; echo '<p>'.get_the_time('Y.m.d').'</p>'; echo '</div></a>'; echo '</li>'; endforeach; wp_reset_postdata(); wp_die(); } add_action( 'wp_ajax_my_ajax_action', 'my_ajax' ); add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax' );
jQuery(3.5.1)ファイルを読み込み
※$.ajax処理を行うのでjquery.min.jsファイルを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
archive.jsファイル:記事一覧ページ「もっと見る」クリック時のajax処理
※記事一覧ページ「もっと見る」クリック時のajax処理を行うarchive.jsファイルを読み込みます。(「xxxxx」はテーマフォルダ名)
<script src="/wp-content/themes/xxxxx/js/archive.js"></script>
※archive.jsファイルの記述は以下の通りです。読み込み中はloading.gif画像を表示してます。ローディングgif画像はフリーで使えるところがいくつかあると思いますが
「フリーで使えるローディング画像/LOADING GIF/CSSのみでローディングアニメーション」
やその他サイト等で探してみてください。
$(function(){ /*** 記事一覧ページload処理 ***/ let now_post_num = 20; // 現在表示されている件数(20件に設定) let get_post_num = 20; // 「もっと見る」ボタンで取得する件数(20件に設定) //archive側で設定したdata属性の値を取得 let load = $(".load"); let post_type = load.data("post-type"); let all_count = load.data("count"); //カスタム投稿の全件数 //admin_ajaxにadmin-ajax.phpの絶対パス指定(相対パスは失敗する) let host_url = location.protocol + "//" + location.host; let admin_ajax = host_url + '/wp/wp-admin/admin-ajax.php'; $(document).on("click", ".more_btn", function () { //読み込み中はloading.gif画像を表示(「xxxxx」はテーマフォルダ名) $('.more_btn').html('<img src="/wp-content/themes/xxxxx/images/loading.gif" alt="loading" >'); //ajax処理。data{}のactionに指定した関数を実行、完了後はdoneに入る $.ajax({ type: 'POST', url: admin_ajax, data: { 'action' : 'my_ajax_action', //functions.phpで設定する関数名 'now_post_num': now_post_num, 'get_post_num': get_post_num, 'post_type': post_type, }, }) .done(function(data){ //my_ajax_action関数で取得したデータがdataに入る //.loadにデータを追加 load.append(data); //表示件数を増やす now_post_num = now_post_num + get_post_num; //まだ全件表示されていない場合、「もっと見る」ボタンを再度表示 if(all_count > now_post_num) { $('.more_btn').html('もっと見る'); }else{ $('.more_btn').html(""); } }) .fail(function(){ alert('エラーが発生しました'); }) }); });
※流用される場合は自己責任でお願いします。
デモページ