WordPress サイトをクライアント用に設計する場合、ユーザビリティは考慮すべき重要な要因です。 しかし、あるサイトでユーザー エクスペリエンス (UX) を向上させるために使用されるテクニックのいくつかは、別のサイトでは最適な方法ではないかもしれません。

無限スクロールは、開発者やデザイナーがサイト訪問者を魅了し続けるために用いる戦術の 1 つです。 この投稿では、無限スクロールとは何か、そしてどのようなタイプのサイトがその恩恵を受けられるかを説明します。 そして、クライアントの Web サイトにこの機能を追加するために使用できる 3 つの方法について説明します。 さっそく始めましょう！

無限スクロールの紹介

無限スクロールは、訪問者がページの下に到達すると新しいコンテンツが自動的にロードされる Web デザイン技法です。 その結果、コンテンツの安定した、無限のように見えるフィードが得られます。

無限スクロールを使用するサイトの一般的な例としては、Facebook、Twitter、Pinterest などのソーシャル ネットワークが挙げられます。 また、Mashable や Buzzfeed などのブログやエンターテインメント サイトでも見られます。

これらの Web サイトで無限スクロールを取り入れると、多くの利点があります。 最も明白なことは、時間を節約し、ユーザーに「続きを読む」ボタンやページネーション リンクをクリックする必要なく、より多くのコンテンツを提供できることです。

気が散ることが少ないので、コンテンツの自動フィードは、ユーザーがより長く滞在し、より高いエンゲージメント率に変換できることも意味します。 さらに、この機能はモバイル フレンドリーです。

しかし、すべての Web サイトが無限スクロールに適しているわけではありません。 たとえば、eコマースストアなどの目標志向のWebサイトでは、ユーザーが探しているものを見つけるのが難しくなる可能性があります。 また、正しく最適化されていない場合、サイトのパフォーマンスに影響を与える可能性があります。

一方、直線的な構造を持つサイトでは、非常に有益な場合があります。 無限スクロールは、長文のブログ記事や画像などのビジュアル コンテンツなど、ストーリーテリングの目的で特に役立ちます。

How to Add Infinite Scrolling to Client Websites (3 Methods)

コンテンツ主導のクライアント ウェブサイトを作成している場合は、無限スクロール機能の追加を検討するとよいでしょう。 5785>

Use an Infinite Scroll Plugin

Web サイトに無限スクロールを追加する最も迅速かつ簡単な方法の 1 つは、プラグインを使用することです。 Jetpack などのいくつかは、このデザイン要素を実装するための機能を備えています。

独立した無限スクロールのプラグインはあまり多くありません。 しかし、私たちが使用を推奨する人気のあるものは、Ajax Load More です。

このプラグインは無料で簡単に使用できますが、多少のプログラミング知識が必要です。 プラグインをインストールして有効化した後、さまざまなコンテンツ タイプに基づいて、関連する WordPress クエリ パラメータを設定することができます。 設定ページでは、Ajax Load More がクライアントの Web サイトでどのように動作するかを調整およびカスタマイズできます。 たとえば、独自のカスタム CSS を追加できます。

このプラグインには、コンテンツ エディタまたはテンプレート ファイルからページや記事をすばやく変更するために使用できるショートコード ビルダーも含まれています。 5785>

独自のリピーター テンプレートを作成し、ショートコード内の HTML と PHP の機能を調整することが可能です。 また、1 つの投稿、ページ、またはテンプレートに、Ajax Load More プラグインの複数のインスタンスを含めることができます。

無償のプラグインは無限スクロールのための多くの機能を提供しますが、より多くのテンプレートへのアクセスを解除するプレミアム バージョンも用意されています。 詳細については、Ajax Load More のドキュメントとサポート ページを参照してください。

Choose Themes With Infinite Scroll Built In

If you don’t worry, to add another plugin to your client sites, don’t worry.If you want to add an infinite scroll in. 無限スクロールが組み込まれているテーマを使用することで、同じ効果を達成できます。

もちろん、このルートは既存のサイトにとって最も実用的なものではありません。 サイトのテーマを変更するには、多くの場合、大規模なリブランディングが必要です。 特に、他の方法で実現できることを考えると、無限スクロール機能にアクセスするためだけに、このような手間をかける価値はありません。

この機能を備えた WordPress テーマは数多くあります。 WordPress テーマ ディレクトリを参照し、無限スクロール機能で検索できます：

テーマ自体は無料かもしれませんが、無限スクロールを使用するにはプレミアム バージョンにアップグレードする必要があることに留意してください。 しかし、Minimal Dark など、無料で機能を提供するものもあります。

機能を含む好きなテーマを見つけたら、他のテーマと同じようにダウンロードしてインストールします。 ほとんどの場合、テーマカスタマイザーにその機能が含まれています。

たとえば、Minimal Dark の場合、外観 > カスタマイズ > テーマ オプション > ページネーション オプション:

より高度な機能が必要なら、プレミアム テーマを検討するとよいでしょう。 テーマフォレストには、無限スクロールを含む幅広い選択肢があります。

無限スクロール機能の有効化および使用方法は、使用しているテーマに依存します。 したがって、開発者のドキュメントでガイダンスを確認するのが最善です。

Manually Add Code to Your Site

無限スクロールを実装する 3 つ目の方法は、経験豊富な開発者であれば、サイトにコードを手動で追加することです。 このオプションでは、より多くの制御が可能で、追加のプラグインをインストールする必要がありません。

さらに、無限スクロールが組み込まれていないテーマのサイトでも、このコードを使用できます。

これを行うには、次のコードをファイルに追加します。

これが完了したら、次のステップでは、Render Parameter 関数をセットアップすることです。 これは、無限スクロールのための投稿をループで読み込む処理を行う部分です。

投稿が連続して読み込まれるようにするには、テーマの functions.php ファイルに mytheme_infite_scroll_init 関数を次のように追加します:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

これら 2 つのスニペットを追加すれば、うまくいくでしょう。 しかし、うまくいかない場合は、やはりサイトのテーマを変更しなければならないかもしれません。 古い、時代遅れの製品は、無限スクロールにまったく対応していないかもしれません。

結論

無限スクロールは万人向けではありません。 しかし、ブログやその他のコンテンツが多いオンライン出版物など、より良い UX を提供し、エンゲージメントを高めることができる Web サイトもあります。

1. この記事では、クライアント Web サイトに無限スクロールを追加するために使用できる 3 つの方法について説明しました：
   無限スクロール プラグインを使用する
2. 無限スクロール機能が組み込まれたテーマを選ぶ
3. サイトに手動でコードを加える