WordPressで[投稿をさらに読み込む]ボタンを追加する方法
公開: 2018-06-25ブロガー兼コンテンツクリエーターとして、あなたは人々を惹きつけ、あなたの投稿を読んでもらいたいと思っています。 これを行うには多くの方法があります:優れた検索またはタグ付けシステム、最近の投稿リンクを含むサイドバー、読者がページの下部に到達した後の古い投稿のギャラリーなど。
もう1つの優れた方法は、「さらに投稿を読み込む」ボタンを使用することです。これは、無限スクロールとも呼ばれます。 これにより、興味のある読者があなたのコンテンツを好きなだけ見ているようになります。 プラグインをダウンロードしたり、コーディング作業をしたりする場合は、この貴重な機能をWordPressサイトに簡単に追加できます。 始めましょう。
なぜ無限スクロール?

ユーザーが次のページに移動すると、サイト全体をリロードする必要があります。 ナビゲーションバー、背景など—おそらくこれらの要素はキャッシュされていますが、さらに数秒待つ必要があります。 無限スクロールでは、新しい投稿のみをロードする必要がありますが、これには少し時間がかかります。
さらに、無限のスクロールは訪問者を読み続けます。 古い投稿を見つけるために検索する必要がある場合は、読み続けることができない場合があります。 しかし、そこにボタンがあると、彼らはもう少し長く立ち往生するかもしれません。
WordPressにさらにロードボタンを追加する準備ができている場合は、覚えておくべきことがいくつかあります。
- テンプレートファイルやコードを編集する前に、必ずWordPressサイトをバックアップしてください。 または、メインサイトに変更を加える前に、子テーマを使用して実験してください。
- WordPressプラグインをインストールするには、WordPress管理エリアに移動し、[プラグイン]の下にある[新規追加]ボタンをクリックします。 そこから、必要なプラグインを検索し、インストールしてアクティブ化します。 そんなに簡単!
- それが機能しない場合は、プラグインを見つけた場所からダウンロードしてください。 もう一度「新規追加」に移動しますが、今回は「アップロード」をクリックしてファイルをアップロードします。 次に、プラグインをインストールしてアクティブ化します。
- これらのメソッドが機能していないように見える場合、一部のプラグインには他のインストール手順が付属しています。
プラグインなし
プラグインの人ではありませんか? 自分でこれを行いたい場合は、心配する必要はありません。 これを自分でコーディングしたり、独自のプラグインを作成したりする場合は、このガイドまたはこのガイドに従ってください。 どちらも、この機能を自分で設定するのに役立ちますが、プラグインが提供できる追加の機能や簡単なカスタマイズを見逃している可能性があります。

これらのチュートリアルには多くの恐ろしいコードが含まれていますが、指示に従う限り、それほど難しくはありません。 十分な投稿がない場合にボタンが表示されないようにするためのいくつかのパラメーターを設定し、ベースコードを設定し、CSSできれいにします。
簡単にロードもっと

プラグインを好む場合は、これを選択するのが最適です。 Easy Load Moreは、その名前が示すように、遅延読み込みプラグインです。 Ajaxを使用して同じページに追加の投稿をロードし、テーマファイルをほとんど編集する必要がありません。 プラグインは、最小限のマークを残すように特別に作成されており、最小限のカスタマイズ可能なデフォルトボタン、小さなJavascriptサイズ、SVGでレンダリングされたアイコンの読み込みにより、画像ファイルをダウンロードする必要がありません。
プラグインをダウンロードしたら、セットアップはとても簡単です。 まず、プラグインメニューの設定ページからプラグインを設定する必要があります。 次に、無限スクロールが必要なページを見つけて、テーマのテンプレートファイルに「load_more_button()」関数を追加します。 カスタムテンプレートを使用して、ホームページからアーカイブページまでの任意のページで機能します。

Ajax Load More
より高度なものをお探しの場合、Ajax LoadMoreには多くの追加機能が付属しています。

他のページ、投稿、またはコメントのカスタムクエリを作成できるショートコードビルダーがあります。 クエリパラメータは、読み込まれる投稿が特定のカテゴリまたは投稿タイプに分類される可能性があることを意味し、特定の投稿を除外することもできます。 プラグインがテーマと完全に一致するようにテンプレートを作成することもできます。
これらすべての機能に加えて、機能をさらに拡張するアドオンがあります。 投稿をプリロードしたり、遅延ロードをページに置き換えたり、プラグインの外観とレイアウトを変更したりできます。
Ajax Load Moreは上級ユーザーが広範囲にカスタマイズおよび調整できますが、設定するのはかなり小さな試練です。 ショートコードビルダーを使用してカスタムショートコードを作成し、コンテンツエディターから直接、またはテンプレートファイルに配置してサイトに追加するだけです。 そして、それはあなたがする必要があるすべてです!
WooCommerceの製品をさらにロードする

Eコマースを使用する場合、この特殊なタイプのロードモアボタンは、同様のAjaxコーディングを使用して無限の製品をロードします。 複数のWooCommerceプラグインと互換性があります。 無料版では、ボタンといくつかの基本的なカスタマイズ機能を備えた無限スクロールにアクセスできます。 有料プラグインには、アニメーション、ボタンのカスタマイズ、モバイルデバイス向けのさまざまな読み込みなど、複数の遅延読み込みオプションがあります。
シンプルロードもっと
シンプルで簡単にアクティブ化できるものが必要な場合は、Simple LoadMoreで作業を完了できます。 ホームページで自動的にアクティブになるので、必要なものがすべてあれば、インストールしてセットアップするだけで完了です。

他のページで必要な場合は、簡単な設定を行い、ボタンを配置するページのテンプレートファイルに関数「simple_more_button()」またはショートコード「[load_morebutton_text =” ABC”]」を追加します。
もっと何でもロード
単純なjQueryload moreプラグインを試したい場合は、これをチェックしてください。 Load More Anythingは、どこでも、どのページでも、どのコンテンツでも機能します。 投稿、コメント、製品、画像—何でも、どこでも。
これには、少し技術的な知識が必要です。 テーマファイルをいじる必要はありませんが、ボタンを表示する場所とコンテンツを取得する場所に関連する「div」タグを見つける必要があります。 最も簡単な方法は、ボタンを配置する場所で「要素の検査」を使用し、正しいdiv、class、またはasideタグを見つけようとすることです。 Web開発者でない場合、またはInspect Elementをナビゲートする方法がわからない場合は、これをスキップすることをお勧めします。

読者をより多くの負荷で簡単に引き込む
そんなに難しくなかったですよね? 無限スクロールは、訪問者が複数のページを読み込んだり、ナビゲーションリンクを経由したりすることなく、より多くのコンテンツに簡単にアクセスできるようにするための優れた方法です。 シンプルで、起こりうる混乱を排除します。 あなたのウェブサイトにまだもっとロードするボタンがないなら、あなたは何を待っていますか?
このガイドが役に立った場合は、 FacebookやTwitterでWordPressのヒントやチュートリアルをチェックしてみませんか? そして、私たちから見たいWordPressチュートリアルがあれば、下のコメントで知らせてください。
