WordPressのページネーション
公開: 2023-02-12
WordPress の投稿とページのデフォルトの前/次のナビゲーション機能は、場合によってはうまく機能します。 ただし、これは最も直感的な方法ではありません。 これは、多くのコンテンツが公開されている Web サイトに特に当てはまります。
ページネーション (コンテンツを個別のページに分割する機能) は、Web サイトのデザインを改良し、訪問者がコンテンツをナビゲートする方法を改善できるオプションの 1 つです。 このテクニックには実用性と美的魅力の両方があり、Web 全体でますます人気が高まっています。
この投稿では、ページネーションを紹介し、それを WordPress に追加するさまざまな方法について説明します。 これは、プラグイン、Ajax、またはカスタム設定を使用して行うことができます。 始めましょう！
WordPress にページネーションを追加する
WordPress Web サイトにページネーションを追加する場合、2 つの主要な方法に出くわします。 1 つ目はプラグインを使用する方法で、2 つ目は Ajax を使用する方法です。 これらのアプローチの両方についてすぐに詳しく説明し、同様に行うことができるカスタム調整をいくつか紹介します. その前に、WordPress でページネーションを使用する主な方法について考えてみましょう。
WordPress のブログのページネーション
ページネーションは、WordPress Web サイトのブログ セクションで最も一般的に使用されます。 個々の投稿に適用することも、ブログ カテゴリ ページを統合する方法として使用することもできます。
ブログのページネーションは、Web サイトとその訪問者の両方に多くのメリットをもたらします。 たとえば、ページネーションは検索エンジンのランキングを上げることができます。 これは、Web サイトを指すリンクの数が増える (つまり、ページが増える) ためです。
訪問者にとって、ページネーションはナビゲーションをより簡単にします。 投稿やページにデフォルトの前/次のナビゲーション方法を使用する代わりに、ページネーションにより、読者は特定のページ番号をクリックできます。 つまり、投稿やページの検索に費やす時間が減り、コンテンツの操作により多くの時間を費やすことができます。
ページネーションプラグイン
WordPress でページネーションを使用する最も簡単な方法は、ページネーション プラグインを使用することです。 多くのオプションが存在しますが、上位のソリューションのいくつかを詳しく見てみましょう。
まずはWP-Paginateです。 このプラグインを使用すると、ブログ ページ、検索ページ、ホームページなど、サイトのどこにでも番号付きのボタンを追加できます。 これにより、ユーザー エクスペリエンスが向上し (目的のページにスキップできるようになるため)、Web サイトの外観が向上します。
さらに、WP-Paginate を使用すると、ページ ボタンや特定の値 ( Page RangeやPage Gapなど) をカスタマイズできます。 これは、ページネーションの主要な要素を制御できることを意味します。
次に、WP-PageNavi を簡単に見てみましょう。 WP-Paginate と同様に、このプラグインを使用すると、WordPress サイトのどこにでもページ番号を追加できます. ただし、以前のプラグインとは異なり、少し設定が必要です。
どちらの WordPress ページネーション プラグインでも、デフォルトの前/次のナビゲーションから、より高度な番号付きシステムに切り替えることができます。 必要に応じて、独自のカスタム CSS を追加することもできます。 ただし、同じ目的を達成する別の方法があります。
WordPress の Ajax ページネーション
Asynchronous JavaScript And XML (AJAX) は、開発者が非同期 Web アプリケーションを作成できるようにする一連のプログラミング手法です。 つまり、Ajax はバックグラウンドで実行されるため、ページの外観を損なうことなく、サーバーから情報を送受信します。 Ajax は、ページ全体をリロードせずに動的なページ コンテンツを変更するために使用されます。 これは一般的に無限スクロールで見られますが、ページネーションにも当てはまります。
Ajax ページネーションを使用すると、ユーザー エクスペリエンスを中断することなく、Web サイトを新しいコンテンツ (ブログ投稿など) で頻繁に更新できます。 読者は、ページにいる間にあなたが投稿した最新のコンテンツをすべて見ることができますが、毎回リロードされるわけではありません。 さらに、ユーザーが次のページをクリックしたときに、ページが完全に再読み込みされるまで待つ必要はありません。
プラグインなしの Ajax ページネーション
上記で、WordPress Web サイトにページネーションを追加できるプラグイン オプションをいくつか紹介しました。 ただし、Ajax のページネーションは、プラグインを使用せずに行うことができます。
このプロセスにはかなりのコーディングが必要であることを理解することが重要です。 つまり、最初に子テーマを作成することを真剣に検討する必要があります。 そうすれば、デフォルトのコードに干渉することなく、現在の Web サイトのテーマに変更を加えることができます。 これにより、重大なミスを犯す可能性が減り、独自のコードをテーマ ファイルに簡単に追加できるようになります。
子テーマを設定したら、サイトにページネーションを追加するための 3 つの主な手順があります。 プロセスの概要は次のとおりです。
- イベントを作成します。 ここで、Web サイトのどのアクション (ページ番号をクリックするなど) がプロセスの JavaScript 部分をトリガーするかを決定します。
- Ajax 呼び出しを作成します。 JavaScript が「有効化」されると、データのリクエストが Web サーバーに送信されます。
- WordPress と通信します。 最後に、サーバーの応答によって、WordPress がどのように機能するかが決まります。 この場合、ページ全体をリロードせずにコンテンツの新しいページを呼び出します。
Ajax がページネーションを改善する方法は簡単に理解できます。 これらの手順はすべて数秒で完了し、サイトのユーザー エクスペリエンスが大幅に向上します。
カスタム ページネーション
Ajax を使用したくない場合は、WordPress Web サイトのカスタム ページネーションを構築する他の方法があるかどうか疑問に思うかもしれません。 プラグインはいくつかの便利な機能を提供しますが、サイトのページネーション機能を自分で変更することもできます.
たとえば、ページごとに表示される投稿の数を変更できます。 WordPress はデフォルトを 10 に設定していますが、これはほぼ任意の数に変更できます。 これを行うには、 [設定] > [閲覧] > [ブログ ページを最大で表示]に移動します。 ここで、値を直接増減できます。
多くのユーザーが気付いていないもう 1 つのカスタム ページネーション機能は、1 つの投稿を複数のページに分割する機能です。 これは、リスト記事やその他の種類の長いコンテンツに最適です。 この機能を実装するには、分割したいコンテンツの間に <!– nextpage –> を ( Text Editorで) 追加するだけです。
上級ユーザーの場合は、CSS ( styles.cssファイル内) を試して、ページネーションをさらにカスタマイズすることもできます。 背景やフォントの色、パディング要素、ホバー効果などの要素を変更できます。 ちょっとした作業で、サイトのページネーションを好きなように設定できます!
Web サイトに追加できる興味深い要素について知りたいですか? WP Engine をフォローすると、WordPress のニュースや新機能に関する記事がたくさん見つかります。 WP Engine をさらに活用するには、専用のサポートと効果的な Web サイトを運営するために必要なほぼすべてを提供するマネージド ホスティング プランを確認することもできます。