WordPressに無限スクロールを実装したい！アーカイブページにプラグインなしで設定してください

WordPressに無限スクロールをプラグインなしで実装してください

今回ご紹介する事例のお問い合わせ内容は、下記の通りです。

T様（工芸美術家）

WordPressで作ったサイトのアーカイブページで、自分の作品（写真とテキストのみ表示）を紹介しています。

そのアーカイブページのコンテンツを無限スクロールで読み込ませたいと思います。

仕様についてですが、ずっとコンテンツが表示され続けるのではなく、「もっと見る」ボタンをクリックすると、さらにコンテンツが読み込まれるような感じにしてほしいです。

更新とかが面倒なので、プラグインなしで設定お願いします。

無限スクロールとは、ユーザーがスクロールすると、自動でコンテンツが読み込まれて表示され続ける機能のことで、InstagramやTwitterなどのSNSでよく見られます。

無限スクロールは、ページの切り替わりがなく、スクロールを続けることで記事が次々と読み込まれるため、サイトユーザーのページ滞在時間が長くなるなどのメリットがあります。

とはいえ、記事が次々と読み込まれることで、「表示速度」や「動作速度」が遅くなったり、フッターの確保が難しいといったデメリットもあります。

この場合、ページの途中に「続きを表示」や「もっと読む」などのボタンを設置すると解決することができます。

以上の点を踏まえて、弊社では、下記のような対応をさせていただきました。

事前にお客様からお聞きした情報は以下の通りです。

必要な情報

続いて、お客様のWordPressテーマやバージョンなどに問題がないことを確認のうえ、以下の作業内容によりお客様のご要望を実現することができました。

作業内容

サイト内調査・お打ち合わせ
バックアップをとる
記事の一覧を表示する「archive.php」を編集
HTMLの編集
※CSSの読み込み、無限スクロールさせたいコンテンツ(画像とテキスト) jQuery、Javascript、「もっと見る」ボタンの追記しました。
Javascriptの設定
※infinite scroll、ステータス表示を設定しました。
CSSの編集
※画像のサイズ、表示エリアの設定などレイアウト微調整
動作確認、最終確認して作業完了
30日間の無料保証サポート

今回は、弊社で用意したコードで無事に実装することができました。

スクロールダウンしたある程度の場所に「もっと見る」ボタンを設置し、クリックすると、さらに下に表示される仕様にしました。

これにより、ユーザーが「もっと見る」ボタンをクリックするまでは、次々とコンテンツが表示されることはありません。

また、アーカイブページの最後尾に来る（コンテンツがなくなる）と、「もっと見る」ボタンが非表示になるように設定しました。

掲載する作品画像が多いため、作業時間とコストがかかることから、今回は弊社で1点のみ掲載の設定をしました。

そして、設定方法をお伝えしたうえで、残りはお客様に作業していただきました。