ウェブサイトに追加する方法

WordPress に無限スクロールを追加したいですか?

無限スクロールにより、訪問者がページの下部に到達するたびに、ページに新しいコンテンツが自動的に読み込まれます。 このようにして、訪問者のエンゲージメントを維持し、サイトの直帰率を下げることができます。

WordPress ウェブサイトに無限スクロールを追加する方法を紹介します。 ただし、最初に、それについて知っておくべきいくつかの基本的な事項に触れます。 この投稿の概要は次のとおりです。

始めましょう。

無限スクロールを使用すると、ユーザーがリンクを手動でクリックして新しいページを開く必要がなく、ユーザーが下にスクロールするときに新しいコンテンツが読み込まれます。

WordPress での一般的な例は、ページネーションなどの他の手法に頼るのではなく、訪問者が一番下に到達したときにブログ ページに新しい投稿を自動的に読み込むことです。

この手法は、Facebook や Twitter などのソーシャル メディア プラットフォームでよく使用され、ユーザーに妨げられないブラウジング エクスペリエンスを提供します。

サイトに無限スクロールを追加する必要がありますか? 長所と短所

ユーザー エンゲージメントとブラウジング エクスペリエンスにプラスの影響を与える可能性がありますが、無限スクロールはすべての人に適しているわけではありません。

長所と短所を見て、WordPress Web サイトにこの手法を実装する必要があるかどうかを判断しましょう.

無限スクロールのメリット

サイトで無限スクロールを使用する利点は次のとおりです。

無限スクロールの短所

サイトで無限スクロールを使用することの欠点は次のとおりです。

• コンテンツがシームレスに変化し、現在どのページにいるのかわからないため、サイトをナビゲートするのは混乱する可能性があります.
• コンテンツ、特にテキストの継続的な表示は、一部の訪問者にとって圧倒される可能性があり、サイトを離れて競合サイトを探すことを選択する場合があります.
• サイトのフッター 訪問者がアクセスできないため、冗長になります。
• 高速スクロールは Web サーバーに負荷をかけ、サイトがフリーズしてクラッシュする原因となります。
• 一部のツールでは、ページごとの指標を追跡するのが難しい場合があります。これは、無限スクロールによって Web サイトが 1 つの大きなページのように見えるためです。
• また、サイトが 1 つの連続したページとして表示されると、サイトのSEO と検索ランキングに悪影響を及ぼす可能性があります。 ただし、適切に実装された無限スクロールは、各ページに固有の URL を与えることでこれを回避できます。

これらは、Web サイトに無限スクロールを実装することの長所と短所です。 これらを考慮した後でも、WordPress サイトに無限スクロールを追加したい場合は、読み進めてください。

WordPress サイトに無限スクロールを追加するには、次の 2 つの方法があります。

1. 無限スクロールをサポートする WordPress テーマを使用する
2. 無限スクロールプラグインを使う

それぞれの方法について詳しく見ていきましょう。自分に合った方法を実装できます。

ただし、無限スクロールを実装するには、テーマを変更して新しいプラグインをサイトにインストールする必要があるため、開始する前に Web サイト全体のバックアップを作成してください。 これらの手順を実行するには、ある程度のリスクが伴い、たった 1 つのミスでサイトが壊れてしまう可能性があります。 そのような場合、バックアップはあなたのセーフティネットになるので、バックアップを取ってください。

1. WordPress テーマを使用して無限スクロールを追加する (Neve)

Neve は、無限スクロール機能を提供する数少ない無料の WordPress テーマの 1 つです。 ブログ一覧ページ (または他のアーカイブ ページ) でのみ無限スクロールを有効にしたい場合に最適なソリューションです。

Neve を使用して無限スクロールを有効にするのは非常に簡単です。

WordPress Web サイトにテーマをインストールして有効にします。

次に、外観 → カスタマイズ → レイアウト → ブログ / アーカイブに移動します。

[順序とコンテンツ] オプションまで下にスクロールし、[投稿のページ付け] で [無限スクロール] を選択します。

[公開] ボタンをクリックして、設定を保存します。

ただし、個々の投稿やページで無限スクロールを有効にしたい場合は、プラグインを使用する必要があります. つまり、誰かが完全な 1 つのブログ投稿ページを開いて一番下までスクロールしたときに、サイトに別の完全な投稿をロードする必要があります。

次の 2 つのセクションでは、プラグインを使用して無限スクロールを実装する方法を紹介します。

2. WordPress の無限スクロール プラグインを使用する

Web サイトで無限スクロールを有効にするのに役立つプラグインは多数ありますが、最も人気のあるプラグインは次のとおりです。

1. 無限スクロールをキャッチ
2. YITH 無限スクロール
3. もっと読み込む

プラグインの使い方を説明する前に、各プラグインを簡単に見てみましょう。

無限スクロールをキャッチ

Catch Infinite Scroll はシンプルで無料の無限スクロール プラグインで、サイトのコンテンツを 1 つのページに水平方向に表示できます。

トリガーをスクロールではなくクリックに変更すると、サイトに [さらに読み込む] ボタンが追加されます。

カスタマイズが可能で、読み込みイメージ、色、フォント サイズ、および [さらに読み込む] ボタンのフォント ファミリなどを変更することを選択できます。

無料版では、Web サイトで無限スクロールを有効にできます。 ただし、色、フォント ファミリー、およびフォント サイズを変更できるようにするには、年会費 $24.99 のプレミアム バージョンを取得する必要があります。

無料のプラグインを使用するには、サイトにプラグインをインストールして有効にするだけで、準備完了です。

WordPress ダッシュボードのCatch Infinite Scrollに移動すると、新しい読み込み画像をアップロードし、さらに読み込むテキストと表示するコンテンツがなくなったときに表示されるテキストを変更できます。

YITH 無限スクロール

YITH Infinite Scrolling は無料のプラグインであり、以前のプラグインと同様に、YITH Infinite Scrolling には、ページネーションのタイプ (無限スクロールまたはさらに読み込むボタン) を選択するオプションも用意されています。

[さらに読み込む] ボタンのテキストを変更したり、ボタンにクラスを追加したり、新しいコンテンツを読み込むためにアニメーション (フェードイン、スライドインなど) を使用したりすることもできます。

独自のアップロード オプションとともに、選択できるロード イメージが多数あります。

私たちのお気に入りの 2 つの機能は、モバイル デバイスでの無限スクロールを有効または無効にするオプションと、新しいアイテムが読み込まれるたびにページの URL を変更するオプションです ( SEO にとって重要です)。

プラグインの無料版では、次の 2 つのことしか実行できません。

1. カスタム読み込み画像をアップロードします。
2. 投稿でのみ無限スクロールを有効にします。

すべてのアーカイブ ページで無限スクロールを有効にし、プラグインのすべての機能にアクセスするには、年間 59.99 ドルのプラグインのプレミアム バージョンが必要です。

YITH Infinite Scrolling の使用は非常に簡単です。 サイトに無料のプラグインをインストールして有効にするだけで、投稿の無限スクロールが可能になります。

YITH → Infinite Scrollingに移動してプラグイン構成をカスタマイズできますが、デフォルト設定は問題なく機能します。

もっと読み込む

Ajax Load More は複雑なプラグインで、AJAX フィルタリング、リピーター テンプレート、ショートコード ビルダー、カスタム問い合わせなどのオプションとともに無限スクロールを有効にできます。

以前のプラグインと比較すると、Ajax Load More の設定は少し複雑です。 使用するのに開発者である必要はありませんが、「クエリ パラメーター」や「リピーター テンプレート」などの用語を扱う必要があるため、初心者は別のプラグインを使い続けることをお勧めします。

ただし、その追加された複雑さの利点は、サイトでの無限スクロール動作を構成およびカスタマイズするための多数のオプションが得られることです.

したがって、投稿からページ、コメントなど、サイトのすべてを無限にスクロールできるようにしたい場合は、これを検討するのに適したオプションになる可能性があります.

WordPress の無限スクロールを始める

サイトを改善するその他の方法については、ユーザー エクスペリエンスを改善するための 7 つのヒントをご覧ください。

これで終わりです！ WordPress サイトに無限スクロールを追加する方法について質問がある場合は、以下のコメントでお知らせください。