WordPressブログに無限スクロールを追加したいですか？
インフィニット・スクロールは、自動的に次のページからコンテンツを読み込むので、訪問者はページ送りリンクやページ下部のload moreボタンをクリックする必要がありません。
この投稿では、WordPressブログに無限スクロールを簡単に追加する方法をステップバイステップで紹介します。
なぜWordPressサイトに無限スクロールを追加するのか？
インフィニットスクロールは、AJAXページロード技術を使用して、自動的に次のページのコンテンツを読み込み、現在のページの最後に表示するウェブデザインのトレンドです。訪問者がコンテンツをより簡単に、より楽しく閲覧できるようになります。
無限スクロールでは、リンクをクリックして続きを見る代わりに、ユーザーがスクロールダウンすると自動的に新しいコンテンツが読み込まれます。このようなスムーズな体験は、ユーザーをサイトに長く留まらせ、ページビューを増加させる可能性があります。
とはいえ、各ページが異なるアルファベットで構成されているディレクトリのようなサイトでは、無限スクロールはベストな選択ではないかもしれません。無限スクロールを使用する場合、WordPressブログにフッターを表示することもできません。
また、無限スクロールはサーバーに余計な負担をかける可能性があります。そのため、無限スクロールを試してみたい場合は、WordPressサイトのパフォーマンスを最適化することをお勧めします。
それでは、WordPressサイトに無限スクロールを追加する方法を見ていきましょう。これらのクイックリンクを使って、特定の方法に飛ぶことができます：
方法1：Catch Infinite Scrollで無限スクロールを追加する（推奨）
テストと調査の結果、無限スクロールを追加する最良の方法はCatch Infinite Scrollプラグインであることがわかりました。使い方が簡単な上、無限スクロールの動作をカスタマイズすることができます。
最初に行う必要があるのは、Catch Infinite Scrollプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化すると、WordPressダッシュボードに「Catch Infinite Scroll」という新しいメニュー項目が表示されます。クリックしてプラグインの設定を行います。
ユーザーがページをスクロールし始めたら無限スクロールを発動させたい。
それを念頭に置いて、『ロードオン』のドロップダウンを開き、『スクロール』を選択する。
クリック」を選択した場合、Catch Infinite Scrollは代わりに「Load More」ボタンを表示します。
次に、ナビゲーション・セレクター、ネクスト・セレクター、コンテンツ・セレクター、項目セレクターをカスタマイズします。初期設定でも十分機能しますので、特に変更する必要はありません。
Image’セクションには、Infinite Scrollがコンテンツを読み込む際に表示されるコンテンツローダーアイコンが表示されます。
初期設定ではローダーGIF画像を使用していますが、必要に応じて変更することができます。アップロード」をクリックし、メディアライブラリから画像を選択するか、新規ファイルをアップロードしてください。
無限スクロールの設定に満足したら、「変更を保存」ボタンをクリックして変更を保存します。
今、WordPressのサイトにアクセスすると、無限スクロールが動作しているのがわかります。
方法2: YITH Infinite Scrollingで無限スクロールを追加する (簡単)
設定不要のシンプルな代替案をお探しなら、YITH Infinite Scrollingを試してみてはいかがでしょうか。
このプラグインはすぐに使えるので、インストールして有効化するだけで、WordPressサイトに無限スクロールを追加できます。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、お客様のサイトにアクセスして、新しい無限スクロール機能を実際にご覧いただけます。
無限スクロールを調整したい場合は、WordPressダッシュボードのYITH ” Infinite Scrollingからいくつかの簡単な設定を見つけることができます。
ここでは、無限スクロールの有効化と無効化ができます。
YITHがコンテンツをロードする際に表示する画像またはGIFを変更することもできます。ローディング画像」セクションまでスクロールし、「アップロード」をクリックするだけです。
次に、WordPressのメディアライブラリから画像を選択するか、コンピューターから新しい画像をアップロードします。
方法3：Ajax Load Moreで無限スクロールを追加する（上級者向け）
Ajax Load Moreは、リピーターテンプレート、ショートコードビルダー、WordPressクエリーなど、様々なオプションを備えた高度なインターフェースを持っています。
プラグインはまた、多くのページローディングアイコンスタイルやボタンスタイルを含む、より多くのカスタマイザー設定を提供しています。
この点を考慮すると、学習曲線が急であり、初心者にはお勧めできません。しかし、上級ユーザーにはサイトの無限スクロールを完全にコントロールすることができます。
詳しいガイドは、Ajax Load Moreプラグインを使ってWordPressに投稿日:Load More投稿ボタンを作成するチュートリアルをご覧ください。
WordPressで無限スクロールを追加する：よくある質問
WordPressサイトに無限スクロールを追加することについて、まだ疑問がありますか？このデザイン機能に関するよくある質問について説明しましょう。
無限スクロールは良いのか悪いのか？
無限スクロールには長所と短所があります。ソーシャルメディア、ブログ、ニュースサイトなど、ユーザーが様々なコンテンツを閲覧することを楽しむサイトには最適です。しかし、eコマースのような目的志向のサイトでは、特定の項目を探そうとするユーザーにとってフラストレーションとなる可能性があります。
無限スクロールはパフォーマンスを向上させるのか？
無限スクロールは、特にスクロールが自然なモバイル端末において、ユーザーがより多くのコンテンツに素早くアクセスすることを容易にします。
しかし、適切な最適化を行わないと、特に大きなメディアファイルではページの読み込み時間が遅くなる可能性があります。そのため、サイトのスピードとパフォーマンスのベストプラクティスに従うのがよいでしょう。
無限スクロールはSEOに不利？
適切な最適化を行わないと、無限スクロールはWordPressのSEOに悪影響を及ぼします。検索エンジンは自動的にスクロールダウンしないため、すべてのコンテンツをインデックスしない可能性がある。
しかし、より良いSEOのために最適化する方法がある。検索エンジンが追加素材を認識できるようにAJAXを使ってload moreボタンを追加したり、検索エンジンのためにコンテンツを明確にするためにスキーママークアップを使ったり、今後のコンテンツへのリンクを事前にロードしたりすることができる。
無限スクロールはページ送りより優れているか？
無限スクロールがページ送りより優れているかどうかは、あなたのサイトとユーザーにとって何が最適かによって決まります。無限スクロールはシームレスな体験を提供し、ページ送りは明確な構造を提供します。どちらにも利点があるため、コンテンツや閲覧者の好みに合わせて選択しましょう。
このチュートリアルでWordPressサイトに無限スクロールを追加する方法を学んでいただけたでしょうか。また、ブログのトラフィックを増やす方法や、サイトを成長させるために必要なWordPressプラグインを専門家がピックアップした記事もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
How does the search bot behave with infinite scrolling? Can it load the site content, does it only load the first page and skip the rest of the content? I’m interested in this for SEO reasons.
WPBeginner Support says
Search plugins would normally scan all of your content but it would depend on the infinite scroll solution for how it would interact with your search in terms of displaying the results.
管理者
Jiří Vaněk says
Ok, thanks for the explanation. It’s probably best to try it to track the results in GSC.
Anant says
Can i use Catch Infinite Scroll in pages as well ?
WPBeginner Support says
Unless we hear otherwise, the plugin does have an option for loading on pages.
管理者
Ben says
Hi, When using infinite scroll and the user clicks on a post the back button takes them to the top of the list rather than where they were before.
Is there a fix for this?
WPBeginner Support says
Not at this time, you would want to reach out to the plugin’s support for the possibility to add that feature in the future.
管理者
Abuel says
Hello!
I want to ask on how can i activate infinite scrolling on my blog page that i created using elementor?
Thank you.
WPBeginner Support says
You would want to reach out to elementor’s support for that question as elementor’s settings would be the ones your site follows.
管理者
Steve says
This article is helpful. It’s unclear though how to add content to the scroll. I’d appreciate an explanation.
WPBeginner Support says
The scroll would show the next few posts on your site automatically
管理者
Astro says
How can I apply infinity scrolling to posts on a particular category only?
WPBeginner Support says
You would want to check with the support for the plugin you are using for if that is an option or if they have a recommended method for setting that up.
管理者
Max says
Hi, great post as usual! Is there also a solution to implement a sorting by a category or a tag that the user can choose like in the Neil Patel’s blog listing page?! Thank you in advance.
WPBeginner Support says
For the ability to filter your posts by category, you would want to take a look at our guide here: https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
管理者
Fman says
Hi there wpbeginner!
I would like to add infinite scroll to related products on my woocommerce site, how do we do that ?
WPBeginner Support says
You would want to reach out to the plugin’s support for how to set that up.
管理者
Lakmal says
Hi
Thank you for your article and i need to know is it can be use for woocommerce sites?
Regards
Lakmal
WPBeginner Support says
Unless we hear otherwise, it should work for a WooCommerce site
管理者
Bruce Pang says
Good article. It’s very useful for a fresh man like me. Thank you very much.
WPBeginner Support says
Thank you, glad our article could be helpful
管理者