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

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

無限スクロール

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

お問合せ内容

T様(工芸美術家)

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

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

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

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

テレコム東京の対応

対応

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

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

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

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

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

実際の対応

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

必要な情報

  • レンタルサーバーのログイン情報
  • WordPressのログイン情報
  • FTPのログイン情報

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

作業内容

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

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

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

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

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

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

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

スポンサーリンク

このケースの見積もり金額

見積もり

今回ご紹介したケースの場合、弊社では6万円(税別)にて対応いたしました。

業者によって設定されている価格が異なり、同じ作業内容であっても高額な見積もりを出される場合もありますので、依頼先を検討する際には必ず他社見積りを取りましょう

今回ご紹介したようなケース以外にもホームページのことでお困りの場合は、お気軽に弊社までお問い合わせください

弊社にお問い合わせいただく70%は、専門知識を持たれていない読者様からです。

わかりやすい言葉でご説明させていただくように心がけておりますので、お気軽にご相談くださいね。

下記の画像をクリックしていただくと、無料診断フォームに遷移します。

関連記事

f B!

PUSH A(プッシュエース)でプッシュ通知を配信中


プッシュエースの登録方法については、下記の記事でご紹介しています。


記事はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です