無限スクロールは、長年にわたって流行したり廃れたりしてきたウェブサイトのトレンドの1つです。ブログ、ニュースポータル、ソーシャルメディアプラットフォームなど、ユーザーが無限の閲覧を楽しむことができるコンテンツが豊富なサイトには最適です。
訪問者をコンテンツに釘付けにしたい場合は、無限スクロールが求めているソリューションかもしれません。この機能は、ユーザーが下にスクロールすると自動的に新しいコンテンツを読み込むため、次のページをクリックする必要がありません。
しかし、これをWordPressサイトに追加するにはどうすればよいでしょうか？心配しないでください。技術スキルに関係なく、無限スクロールを実装するための3つの簡単な方法を考案しました。
無限スクロールするかしないか？ 🔍
明確にしておきましょう。無限スクロールは誰にでも合うわけではありません。このWordPressのウェブデザイン要素は、ソーシャルメディアフィードやニュースポータルなどのコンテンツが豊富なサイトでは美しく機能しますが、特定の製品を探しているECサイトのユーザーをイライラさせる可能性があります。
WordPressユーザー数百万件を支援してきた経験から、無限スクロールは訪問者がコンテンツを自然に閲覧・発見したい場合に最も効果的です。
Instagramスタイルのフォトギャラリーや、読者がシームレスなコンテンツ探索を楽しめるBuzzFeedのようなニュースサイトを考えてみてください。特にモバイルで閲覧している場合、訪問者が単一の投稿を閲覧するのをより簡単で楽しいものにすることができます。
しかし、ユーザーが明確なナビゲーションを必要としたり、特定の情報をすばやく見つけたいサイトやウェブディレクトリでは、イライラする可能性があります。
もう1つの重要な考慮事項は？無限スクロールはエンゲージメントを高めることができますが、サイトの速度低下やアクセシビリティの問題を回避するために正しく実装する必要があります。したがって、試したい場合は、WordPressウェブサイトのパフォーマンスを最適化するのが良いでしょう。
それでは、WordPressの無限スクロールをウェブサイトに追加する方法を見ていきましょう。これらのクイックリンクを使用して、特定の方法にスキップできます。
- オプション1：Catch Infinite Scrollを使用して迅速にセットアップする
- オプション2：YITHでWooCommerceに無限スクロールを追加する
- Option 3: Advanced Customization with Ajax Load More
オプション1：Catch Infinite Scrollを使用して迅速にセットアップする
テストと調査の結果、無限スクロールを追加する最良の方法は、Catch Infinite Scrollプラグインを使用することだとわかりました。使い方が簡単なだけでなく、サイトの無限スクロールの動作をカスタマイズすることもできます。
まず最初に行うべきことは、Catch Infinite Scrollプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。WordPressプラグインのインストール方法
有効化すると、WordPressダッシュボードに「Catch Infinite Scroll」という新しいメニュー項目が表示されます。それをクリックするだけで、プラグインの設定を構成できます。
ユーザーがページを下にスクロールし始めたときに、無限スクロールをトリガーしたいと思います。
これを念頭に置いて、「ロードオン」ドロップダウンを開き、「スクロール」を選択します。「クリック」を選択した場合、Catch Infinite Scrollは代わりに「もっと読み込む」ボタンを表示します。
次に、ナビゲーションセレクター、ネクストセレクター、コンテンツセレクター、アイテムセレクターをカスタマイズできます。デフォルト設定はかなりうまく機能するため、変更する必要はありません。
「画像」セクションには、無限スクロールがコンテンツを読み込む際に表示するコンテンツローダーアイコンが表示されます。
デフォルトではローダーGIF画像を使用しますが、必要に応じて変更できます。「アップロード」をクリックし、メディアライブラリから画像を選択するか、新しいファイルをアップロードします。
無限スクロールの設定が完了したら、「変更を保存」ボタンをクリックして変更を保存してください。
これで、WordPressウェブサイトにアクセスすると、無限スクロールが機能しているのがわかります。
オプション2：YITHでWooCommerceに無限スクロールを追加する
YITH Infinite Scrollingは、WooCommerceプラグイン開発者であるYITHによる無限スクロールプラグインです。したがって、商品ページに無限スクロールを追加したい場合は、このプラグインをお勧めします。YITH WooCommerce Points and Rewardsのような他のYITHプラグインとも非常によく機能します。
このプラグインはすぐに使えるため、インストールして有効化するだけで、WordPressウェブサイトに無限スクロールを追加できます。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化すると、ウェブサイトにアクセスして、新しい無限スクロール機能が動作しているのを確認できます。
無限スクロールを微調整したい場合は、WordPressダッシュボードのYITH » Infinite Scrollingに移動すると、いくつかの簡単な設定が見つかります。
ここで、無限スクロールを有効または無効にできます。
コンテンツの読み込み中にYITHが表示する画像またはGIFを変更することもできます。単に「読み込み画像」セクションまでスクロールし、画像をアップロードしてください。URL経由で画像をアップロードすることもできます。
「オプションを保存」ボタンをクリックするのを忘れないでください。
オプション3：Ajax Load Moreによる高度なカスタマイズ
Ajax Load Moreには、リピーターテンプレート、ショートコードビルダー、WordPressクエリなど、多くの異なるオプションを備えた高度なインターフェイスがあります。
このプラグインは、多くのページ読み込みアイコンスタイルやボタンデザインなど、さらに多くのカスタマイズ設定も提供します。
これを考慮すると、学習曲線は急になり、初心者には推奨されません。ただし、より高度なユーザーは、Webサイトの無限スクロールを完全に制御できます。
詳細なガイドについては、Ajax Load Moreプラグインを使用してWordPressで投稿の読み込みボタンを作成する方法に関するチュートリアルをご覧ください。WordPressで投稿の読み込みボタンを作成する方法
WordPressで無限スクロールを追加する：よくある質問
WordPressウェブサイトに無限スクロールを追加することについて、まだ質問がありますか？このデザイン機能に関するよくある質問をいくつか見てみましょう。
無限スクロールは良いのか悪いのか？
無限スクロールには長所と短所があります。ソーシャルメディア、ブログ、ニュースサイトのように、ユーザーがさまざまなコンテンツを閲覧するのを楽しむウェブサイトには最適です。しかし、eコマースのような目的志向のサイトでは、特定のアイテムを見つけようとするユーザーにとってフラストレーションの原因となる可能性があります。
無限スクロールはパフォーマンスを向上させますか？
無限スクロールは、特にスクロールが自然なモバイルデバイスで、ユーザーがより多くのコンテンツにすばやくアクセスしやすくなります。
ただし、適切な最適化なしでは、特に大きなメディアファイルがある場合、ページの読み込み速度が低下する可能性があります。そのため、ウェブサイトの速度とパフォーマンスに関するベストプラクティスに従うことをお勧めします。
無限スクロールはSEOにとって悪いですか？
適切な最適化なしでは、無限スクロールはWordPress SEOにとって悪影響となる可能性があります。検索エンジンは自動的に下にスクロールしないため、すべてのコンテンツをインデックスしない場合があります。
ただし、SEOを改善するための最適化方法は存在します。AJAXを使用して「さらに読み込む」ボタンを追加することで、検索エンジンが追加コンテンツを認識するようにしたり、スキーママークアップを使用して検索エンジンにコンテンツを明確に伝えたり、今後のコンテンツへのリンクをプリロードしたりすることができます。
無限スクロールはページネーションよりも優れていますか？
無限スクロールがページネーションよりも優れているかどうかは、Webサイトとユーザーにとって何が最適かによります。無限スクロールはシームレスなエクスペリエンスを提供しますが、ページネーションはより明確な構造を提供します。どちらにも利点があるため、コンテンツとオーディエンスの好みに基づいて選択してください。
WordPressブログデザインを最適化するその他の方法を学ぶ
WordPressブログを改善するためのヒントやコツをもっと知りたいですか？これらのガイドをご覧ください：
- WordPress テーマにパララックス効果を追加する方法
- WordPressにフォントリサイザーを追加してアクセシビリティを向上させる方法
- WordPressでカスタムシェイプディバイダーを作成する方法
- WordPressサイドバーのトリックで最大限の結果を得る方法
- WordPressでカスタムスクロールバーを任意の要素に追加する方法
- WordPressでテキストをハイライトする方法（初心者向けガイド）
- WordPressに動的コンテンツを追加する方法（初心者ガイド）
このチュートリアルが、WordPressサイトに無限スクロールを追加する方法を学ぶのに役立ったことを願っています。また、WordPressウェブサイトの編集方法に関する初心者向けガイドや、ウェブサイトグラフィックに最適なCanvaの代替品の専門家によるおすすめもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
モイヌディン・ワヒード
ページをさらに読み込むためのスムーズなスクロールは、訪問者をページに長く留めるための実績のある方法です。
無限スクロール機能を備えた評判の良いウェブサイトをいくつか訪れ、一度に多くの投稿を読んできました。
これは、ユーザーをより長く滞在させ、読み続けさせるための非常に強力な方法です。
追加のページを読み込む際に考慮すべきことは、コンテンツの関連性です。
したがって、関連するコンテンツが読み込まれると、関連性のないコンテンツと比較して、類似したコンテンツをより多く消費する可能性があります。
マイケル
WordPressのドキュメントによると、WordPressにはすでに独自の無限スクロールシステムが組み込まれており、これはクラシックテーマでデフォルトで実装されているようです。
避けられるなら新しい拡張機能を追加したくありませんが、WordPress独自の無限スクロールの実装に関するドキュメントをまったく見つけられずに苦労しています。
それがWordPressの皮肉なところです。機能はたくさんあるのに、それに関する*技術的な*ドキュメントを見つけるのがしばしば不可能です。
WPBeginnerサポート
特定のテーマのドキュメントを確認することをお勧めします。WordPressにはサイトデータを保持するためのコードがありますが、使用している特定のテーマがサイトのデザインを決定し、すべてのテーマに無限スクロールがあるわけではなく、デフォルトで有効になっているわけでもありません。
管理者
イジー・ヴァネック
無限スクロールの場合、検索ボットはどのように動作しますか？サイトのコンテンツを読み込むことができますか、それとも最初のページのみを読み込んで残りのコンテンツをスキップしますか？SEOの理由でこれに興味があります。
WPBeginnerサポート
通常、検索プラグインはすべてのコンテンツをスキャンしますが、結果の表示に関して検索とどのように連携するかは、無限スクロールのソリューションによって異なります。
管理者
イジー・ヴァネック
はい、説明ありがとうございます。GSCで結果を追跡するために試すのが最善でしょう。
Anant
Catch Infinite Scrollをページでも使用できますか？
WPBeginnerサポート
別途指示がない限り、プラグインにはページでの読み込みオプションがあります。
管理者
ベン
こんにちは。無限スクロールを使用中にユーザーが投稿をクリックし、戻るボタンを押すと、以前いた場所ではなくリストの先頭に戻ってしまいます。
これは修正できますか？
WPBeginnerサポート
現時点ではできません。将来的にその機能を追加する可能性については、プラグインのサポートに問い合わせる必要があります。
管理者
Abuel
こんにちは！
Elementorで作成したブログページで無限スクロールを有効にする方法を教えてください。
ありがとうございます。
WPBeginnerサポート
その質問についてはElementorのサポートに問い合わせるのが良いでしょう。なぜなら、Elementorの設定があなたのサイトに従うものだからです。
管理者
Steve
この記事は役に立ちます。ただし、スクロールにコンテンツを追加する方法は不明です。説明していただけると幸いです。
WPBeginnerサポート
スクロールすると、サイトの次の投稿が自動的に表示されます
管理者
Astro
特定のカテゴリの投稿にのみ無限スクロールを適用するにはどうすればよいですか？
WPBeginnerサポート
使用しているプラグインのサポートに、それがオプションであるかどうか、または設定するための推奨方法があるかどうかを確認することをお勧めします。
管理者
Max
こんにちは、いつものように素晴らしい投稿です！Neil Patelのブログのリストページのように、ユーザーが選択できるカテゴリまたはタグによる並べ替えを実装するソリューションもありますか？よろしくお願いします。
WPBeginnerサポート
カテゴリ別に投稿をフィルタリングする機能については、こちらのガイドをご覧ください：https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
Fman
こんにちは、wpbeginner！
WooCommerceサイトの関連商品に無限スクロールを追加したいのですが、どうすればよいですか？
WPBeginnerサポート
その設定方法については、プラグインのサポートに問い合わせる必要があります。
管理者
Lakmal
Hi
記事をありがとうございます。WooCommerceサイトでも使用できますか？
敬具
ラクマル
WPBeginnerサポート
特に言及がない限り、WooCommerceサイトで機能するはずです
管理者
ブルース・パン
良い記事です。私のような新米にはとても役立ちます。本当にありがとうございます。
WPBeginnerサポート
Thank you, glad our article could be helpful
管理者