【コピペで使える】ワードプレスで投稿一覧を無限スクロールで表示させる方法（カテゴリー別）
tasanWordPressの記事一覧を「もっと見る」ボタンなどで、ページ下部に動的に読み込んでゆく無限スクロールを実装する方法をメモします。
下記タドワークスで実際に実装をさせていただいたクライアント様のページとなりますが、こんな感じのページを実現できるということになります。
データ活用の記事一覧｜データで越境者に寄り添うメディア データのじかん
データ活用の実例の紹介から、BIツールの使い方、最近のデータ活用トレンドやデータ活用における注意点などのお役立ちコンテンツが満載です！
ワードプレス標準のページネーションを使う場合よりも実装は遥に面倒ですが、ユーザーは手軽にコンテンツを探すことができるためサイト内のページ回遊が促進されるメリットはあるかと思います。
用意するもの
| JQuery | JavaScript部でJQueryを使用します。 |
| archive.php | アーカイブページのテンプレートです。 |
| ajax-item.js | 情報取得～表示用のJavaScriptファイルです。 |
| ajax-item.php | 投稿情報取得用のPHPファイルです。 |
各ファイルのコード
archive.php
<?php
get_header();
$cat_info = get_category($cat);
?>
<section id="item-list" data-category="<?php echo $cat_info->slug; ?>" data-begin="1">
<div class="item-result">
<!-- Ajaxで取得して表示 -->
</div>
<div class="loading" style="display:none;">
<img src="<?php echo get_template_directory_uri(); ?>/images/loading.gif">
</div>
<div>
<a class="more-btn">もっと見る</a>
</div>
</section>
<script src="<?php echo get_template_directory_uri(); ?>/ajax-item.js"></script>
<?php
get_footer();
?>ajax-item.js
jQuery(function() {
/* 初期設定 */
let el = document.getElementById("item-list");
let cat = el.dataset.category;
let beg = el.dataset.begin;
let postNumNow = Number(beg);
let postNumAdd = 18; // 一度に表示する数
/* 最初の一回読み込み */
window.onload = loading1();
/* more_btnで読み込み */
$('.more-btn').click(function() {
loading2();
});
/* 情報取得関数 */
function loading1(){
jQuery.ajax({
type: "POST",
url: 'https://.../ajax-item.php', // フルパスで指定
data: {
post_num_now: postNumNow,
post_num_add: postNumAdd,
category_name: cat
},
success: function(response) {
jQuery(".item-result").append(response);
postNumNow += postNumAdd;
}
});
}
function loading2(){
jQuery(".more_btn").hide();
jQuery(".loading").show();
jQuery.ajax({
type: "POST",
url: 'https://.../ajax-item.php', // フルパスで指定
data: {
post_num_now: postNumNow,
post_num_add: postNumAdd,
category_name: cat
},
success: function(response) {
jQuery(".item-result").append(response);
jQuery(".more-btn").show();
jQuery(".loading").hide();
postNumNow += postNumAdd;
}
});
}
});
ajax-item.php
<?php
require_once '../../../wp-load.php';
$offset = isset( $_POST['post_num_now'] ) ? $_POST['post_num_now'] : 1;
$posts_per_page = isset( $_POST['post_num_add'] ) ? $_POST['post_num_add'] : 0;
$category_name = isset( $_POST['category_name'] ) ? $_POST['category_name'] : "";
$response = "";
$ajax_query = new WP_Query(
array(
'post_type' => 'post',
'posts_per_page' => $posts_per_page,
'offset' => $offset,
'category_name' => $category_name,
'orderby' => 'date',
'order' => 'DESC'
)
);
if ( $ajax_query->have_posts() ) :
while ( $ajax_query->have_posts() ) :
$ajax_query->the_post();
/* 投稿情報取得 */
$thumbnail = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
$url = get_permalink();
$title = get_the_title();
$date = get_the_date('Y.m.d');
/* 挿入HTML生成 */
$response .= '<div class="item">';
$response .= '<p>'.$title.'</p>';
$response .= '<p>'.$thumbnail.'</p>';
$response .= '<p>'.$url.'</p>';
$response .= '<p>'.$date.'</p>';
$response .= '</div>';
endwhile;
endif;
echo $response;
wp_reset_postdata();
?>
出力するHTMLなどは自由に変更してみてください。
Follow me!
