DESIGN-DEVELOPデザイン・開発
【WordPress対応】jQueryのAjaxを使ってSPAチックな挙動を再現する(記事の無限スクロール)
編集・ライティング
u
メディアのデザイン・開発担当。たまに記事も書きます。
今回は当メディアで、jQueryのAjax(非同期通信)を使用した記事の無限スクロールを採用・実装したのでご紹介しようと思います。
無限スクロールとは、スクロールに応じてコンテンツが次々に読み込まれる挙動のことです。ページネーションのようにページが遷移することがないためインタラクションコストを最小限に抑え、ユーザーエンゲージメントを高めることができます。
Ajax(非同期通信)は少し難易度が高いので避けられがちな技術ですが、ライブラリを使用することで簡単に実装が可能です。ぜひ、試してみてください。
目次
jQuery ライブラリ 「Infinite Scroll」を導入する
「Infinite Scroll」 という無限スクロールを実現するjQueryライブラリを使用します。
ダウンロード、CDN、パッケージマネージャなどを使用して、「infinite-scroll.pkgd.min.js」を自分の環境に読み込みます。jQurey本体の読み込みも忘れないようにしましょう。
必要ファイル : https://unpkg.com/infinite-scroll@4.0.1/dist/infinite-scroll.pkgd.min.js
<body>
<script src="/path/to/jquery-3.6.0.min.js"></script>
<script src="/path/to/infinite-scroll.pkgd.min.js"></script>
</body>WordPressの投稿ループに合わせた書き方
デフォルトの投稿のデータを6件表示するサブクエリを使って解説します。ループさせる要素「loop-item」とその親要素「loop-container」にクラスをつけます。
WordPressのテンプレートタグ「next_posts_link」を使って「次のページ」のリンクを設置しておきます。あくまで「次のページ」のリンクはライブラリの内部的な処理に必要なだけなので、画面上では非表示にしておきます。
<?php
// 投稿データの設定
$args = array();
$args["post_type"] = 'post';
$args["posts_per_page"] = '6';
$args["paged"] = $paged;
?>
<?php $the_normal_query = new WP_Query($args)?>
<ul class="loop-container">
<?php while ($the_normal_query->have_posts()) : $the_normal_query->the_post();?>
<li class="loop-item"></li>
<?php endwhile;?>
</ul>
<span class="next-link" style="display:none;"><?php next_posts_link(); ?></span>
<?php endif; wp_reset_postdata();?>実行するスクリプトを記述します。これでスクロールに応じて投稿が次々に読み込まれます。
const infScroll = new InfiniteScroll('.loop-container', {
append: '.loop-item', // ループ要素
path: '.next-link a', // 次ページのリンク
});スクロールではなく、「記事を読み込む」ボタンで発火させる場合
スクロールに応じるのではなく、「さらにループ要素を読み込む」ボタンで記事を読み込ませる場合です。まずはWordPressのテンプレートタグ「next_posts_link」の後ろに、「さらにループ要素を読み込む」ボタンのHTMLを用意します。
<span class="next-link" style="display:none;"><?php next_posts_link(); ?></span>
<span class="more-btn">さらにループ要素を読み込む</span>実行するスクリプトを記述します。これで「さらにループ要素を読み込む」ボタンに応じて投稿が次々に読み込まれます。
const infScrollBtn = new InfiniteScroll('.loop-container', {
append: '.loop-item', // ループ要素
path: '.next-link a', // 次ページのリンク
button: '.more-btn', // ボタン要素
scrollThreshold: false, // スクロールで読み込む機能停止
});「次のページ」が存在しない場合は、ボタンを非表示にした方が良いと思うので、条件分岐で「さらにループ要素を読み込む」ボタンを非表示にしておきます。
<?php
if(empty($paged)) $paged = 1;
$pages = $the_normal_query -> max_num_pages;
if(!$pages) {$pages = 1;}
if($pages != 1 && $paged < $pages ) {
?>
<span class="next-link" style="display:none;"><?php next_posts_link(); ?></span>
<span class="more-btn">さらにループ要素を読み込む</span>
<?php }?>
まとめ
いかがでしたでしょうか。今回は、Ajax(非同期通信)とそのライブラリを使用して無限スクロールを導入する方法のご紹介でした。
無限スクロールは、ページが読み込まれた後に、Ajax(非同期通信)でコンテンツが生成しているため、検索エンジンのクローラーに読み取ってもらえない可能性があったりとデメリットもあります。導入の際はそのようなデメリットも把握した上で実装しましょう。それでは、今回はこのあたりで。