WordPressページネーションの管理方法をお探しですか？
サイトのページネーションを調整することで、よりユーザーフレンドリーで見やすいウェブサイトを構築することができます。ですが、多くのWordPressテーマには、細かいページネーションの設定機能が用意されていないため、変更できる内容が限られています。
WordPressのページネーションを簡単に調整する方法はいくつかあり、上級者にはカスタムコードの作成、一般的なユーザーには優れたページネーションプラグインの使用がおすすめです。
この記事では、WordPressのページネーションについて詳しくご説明いたします。
早速見ていきましょう！
WordPressページネーションについて動画での解説もご用意しています。
WordPressページネーションとは
WordPressのページネーションとは、ウェブサイトのブログ記事などの一覧を個別のページに分割して表示することです。
例えば、100件のブログ記事がある場合、各ページに10件のブログ記事を表示するようにページネーション設定を行うと、ブログ記事の一覧が10件ずつ10ページに分割されます。
訪問者は、「次へ」や「前へ」のボタンを押すことで、ページ間を移動することができます。また、特定のページに飛べるよう、ページの番号付きリストが表示されることもあります。例えば、デフォルトの「Twenty Twenty-One」テーマでは、以下のようにページネーションが表示されます。
また、1つの投稿を複数のページに分割することもできるため、長編のコンテンツを公開する際にも役立ちます。
スニペットやプラグインを使用すると、ページネーションがサイト上でどのように機能するかをより詳細に管理することができます。この点については、後ほどご説明します。
WordPressページネーションの必要性
WordPressページネーションを活用したい理由は、大きく3つあります。
- ナビゲーションとユーザー体験の向上
- パフォーマンスの向上
- SEOクローラビリティの向上
それぞれ詳しく見ていきましょう。
ナビゲーションとユーザー体験の向上
WordPressのページネーションを改善する最大のメリットは、ユーザーがサイトをナビゲートしやすくなり、より良いユーザー体験を提供できるという点です。
ほとんどのWordPressテーマのページネーション設定では、限られたページしか選択することができず、別ページへの移動がしづらくなります。
例えば、「Twenty Twenty-One」テーマの場合、ユーザーが最初の投稿ページを閲覧する際のデフォルトのページネーションリンクは、以下のようになっています。
ユーザーは、最後のページ（この例では6ページ）や（「過去の投稿」をクリックして）次のページには移動できますが、3、4、5ページには直接移動することができません。
ユーザーが目的のページに移動しやすいよう、複数のページネーションリンクが表示されているKinstaブログと比較してみてください。
ユーザーがより古いページに進むと、さらに細かくページ選択が可能になり、必要に応じて簡単に別ページに飛んだり、また戻ってきたりすることができます。
パフォーマンスの向上
ページネーションの使用は、各ページで読み込む必要のあるデータ量を制限するため、WordPressサイトのパフォーマンスを向上させる戦術にもなります。
例えば、ブログ記事が50件あるとします。50件の記事をすべてブログのメインページに読み込もうとすると、データ量が多くなり、読み込みが遅くなる恐れがあります。
ページネーションを使って一覧を10記事ずつ5つのページに分ければ、各ページは5分の1のデータしか読み込む必要がないため、サイトの読み込み速度が上がります。
SEOクローラビリティの向上
ページネーションを効果的に使うことで、より多くのナビゲーションリンクを提供でき、Googlebotのような検索エンジンロボットがサイトをクロールしやすくなります。
わずかな違いではありますが、サイトのクローラビリティ向上のために微調整を加えることは、SEO強化につながります。
WordPressページネーションの手動管理方法
次の章で便利なWordPressのページネーションプラグインをいくつかご紹介しますが、WordPressには、ページネーションに関連した機能がいくつか内蔵されています。または、専門的知識があれば、自分でコードを記述してページネーションを調整することも可能です。
デフォルトの「Twenty Twenty-One」テーマを例にして、内蔵のページネーション管理機能を見ていきましょう。
1ページ目に表示するコンテンツ数を調整する
WordPressのデフォルトでは、1ページあたり10件の投稿が表示されます。つまり、25件の投稿がある場合は、合計3ページになり、最初の2ページには10件ずつ、最後のページには残りの5件が表示されます。
この数値を調整したい場合は、「設定」＞「表示設定」で「1ページに表示する最大投稿数」の値を変更してください。
WordPressの投稿やページを複数のページに分割する
これまでは、ブログの一覧ページを複数のページに分割することを中心にご説明してきましたが、WordPressでは、個々の投稿やページも様々なページに分割できるため、用途によっては便利でしょう。
WordPressのブロックエディタ（別名Gutenberg）を使用している場合は、「改ページブロック」を使用して改ページを追加する場所を選択できます。
従来のTinyMCEエディタを使用している場合は、以下のどちらかの方法で、改ページを追加する場所を選択できます。
- エディタにある「ビジュアル」タブで、改ページを追加したい場所にカーソルを置きます。次に、ショートカットキー「Alt + Shift + P」を使います。
<!--nextpage-->のスニペットをエディタにある「テキスト」タブにペーストして、手動で改ページを配置します。
PHPとCSSを使ってWordPressのページネーションの動作を調整する
専門的な知識がない場合、この方法はやや難易度が上がるため、ページネーションプラグインをご紹介する章まで読み飛ばしていただくのがおすすめです。
サイトのコードを微調整することに抵抗がなければ、PHPとCSSを使ってテーマのページネーションを調整することができます。
テーマのテンプレートファイルを編集することになるため、次にテーマを更新した際に変更内容が上書きされないよう、WordPressの子テーマを使用します。こちらについては別途、子テーマ設定方法についての徹底解説をご用意しています。
編集を始める前に、サイトのバックアップも取っておきましょう。
WordPressのテーマにページネーションを手動で追加したい場合は、「the_posts_pagination」関数が使えます。例えば、以下のようなスニペットです。
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( 'Previous Page', 'textdomain' ),
'next_text' => __( 'Next Page', 'textdomain' ),
) );このスニペットを、ページネーションを表示させたい子テーマのテンプレートファイルに直接貼り付けます。
それでは、「Twenty Twenty-One」のデフォルトのページネーションを残しつつ、スニペットを使ったページネーションを追加して、その違いを見てみましょう。「Page 1」のページネーションはテーマのデフォルトで、「1」「2」「3」のページネーションは、カスタムコードからきています。
コードで見ると以下のようになっています。デフォルトのページネーションと、カスタマイズしたページネーションの両方が確認できます。
既存のページネーションをカスタムのものに置き換えるのは、WordPressサイト上で行います。（注意：まずはステージングサイトで作業を行ってください。これはあくまで参考例です）テーマによっては、複数のファイルを編集する必要があります。
FTPクライアントでサーバーに接続し、専用のPHPエディターでテーマファイルを編集する方が作業しやすい場合もあります。
テーマのページネーションのスタイル調整には、カスタムCSSを追加します。
WordPressのページネーションプラグイン 7選
サイトのページネーションをより詳細に管理したい場合は、WordPressのページネーションプラグインを使用しましょう。今回は、代表的な7つのプラグインをご紹介します。
1. WP-PageNavi
WP-PageNaviは、WordPressのページネーションプラグインの中で最も人気があり、70万以上のサイトで使用されています。完全無料で使えるのも好評の理由です。
シンプルな設定画面で、サイトのページネーションの動作を管理することができ、テキストやページ番号の表示数などの調整が可能です。
ページネーションのデザインをより自由に変更したい場合は、サードパーティのプラグイン、Styles For WP Pagenavi Addonもおすすめです。
設定方法
その人気から、一部のWordPressテーマではWP-PageNaviを組み込みでサポートしています。現在使用されているテーマがサポートしている場合には、プラグインを有効化し、設定を行うだけでOKです。設定方法は、「設定」＞「PageNavi」で行います。
使用しているテーマがWP-PageNaviをサポートしていない場合は、手動でテーマのテンプレートファイルを編集し、プラグインを動作させる必要があるため、専門知識がない場合は、やや複雑な作業になります。
使用中のテーマのページネーションに使われているデフォルトのコードを探し、WP-PageNaviのカスタムスニペットに置き換える必要があります。この方法については、WP-PageNavi開発者がプラグインのWordPress.orgページで説明しています。
2. WP-Paginate
WP-Paginateは、独自のページネーションの設定に人気がある人気なもう1つのプラグインです。投稿ページはもちろん、コメント欄にもページネーションを追加することができるため、コメント欄の読み込み速度を上げることができます。
WP-PageNaviとは異なり、テーマのテンプレートファイルを直接編集する必要がないため、専門的知識がない場合には、こちらのプラグインの方が使いやすいかもしれません。PHPを使ってテーマのテンプレートファイルに手動でページネーションを設置する上級者向けの方法もあります。
このプラグインを使うと、以下のようなページネーションの設定が可能です。
- ラベルとボタン
- 配置
- ナビゲーションの表示件数
WordPress.orgで無料版を入手することができ、ほとんどのサイトに対応しています。19ドルの有料版では、より多くのプリセットスタイルとスタイルオプションを使用することができます。
設定方法
プラグインの設定は、「設定」＞「WP-Paginate」と進んで行います。
テーマのテンプレートファイルを編集せずにプラグインのページネーションを表示させたい場合は、「Location & Position（場所と位置）」の設定を以下のように変更してください。
- 必要な場所すべてに新しいページネーションが表示されるよう「Everywhere（すべて）」にチェックを入れます。
- 「Position（位置）」のドロップダウンから「Below the Content（コンテンツの下）」を選びます。
- 「Hide Standard Pagination（標準のページネーションを隠す）」にチェックを入れると、テーマの既存のページネーションが非表示になります。
3. Pagination by BestWebSoft
Pagination by BestWebSoftは、テーマのテンプレートファイルを編集することなく、サイトに新しいページネーションシステムを追加することができるプラグインです。
ただし、WP-Paginateと同様、配置をより詳細に管理したい場合には、テーマのテンプレートファイルを編集することも可能です。
このプラグインを使用すると、ページネーションの位置、スタイル、動作を簡単に調整することが可能になります。
無料版でもほとんどのサイトで問題なく利用できますが、20ドルの有料版では、ページネーションの種類が増え、人気テーマ「Divi」との互換性も組み込まれています。
設定方法
プラグインを設定するには、ダッシュボードに追加した「Pagination」タブに移動します。
このプラグインは、テーマの既存のページネーションを非表示にし、プラグインからの独自のページネーションに自動で置き換えるのがデフォルトの設定になっています。そのため、新しいページネーションのスタイルと動作の設定を行うだけで大丈夫です。
4. Ajax Load More
Ajax Load Moreを使用すると、新しいページをロードすることなく、より多くのコンテンツをロードするボタンを作成することができます。従来のページネーションだけでなく、ユニークな設定もあり、ページネーションを独自に管理することができます。
有料のアドオンを追加すれば、実際のページネーションボタンを作成することが可能になります。ユーザーが別ページに移動しても、ページが再読み込みされたと認識されることなく、URLが変更されるため、SEOに有利です。こちらからデモアカウントを見ることができます。
Ajax Load Moreは、無料版でページネーションを「Load More」ボタンに置き換えることができます。このボタンは、ユーザーが別のページに移動するためのページネーションリンクを追加する代わりに、ページを再読み込みせずに無限に記事が表示されていくものです。こちらからデモアカウントを見ることができます。
設定方法
このプラグインは、既存の投稿リストにページネーションを追加する代わりに、ページネーションを設定した投稿リストを新たに作成します。WordPressのダッシュボードにある「Ajax Load More」の画面で設定を行います。
標準のページネーションを設定したい場合は、「Paging」アドオンを購入し、インストールしてください。
5. Alphabetic Pagination
Alphabetic Paginationを使用すると、サイト上にアルファベット順のページネーションを実装することができます。
このプラグインは、数字でページ分けしたり、投稿を公開日順に並べるのではなく、アルファベットごとのページネーションを作成することができます。ユーザーが特定の文字をクリックすると、その文字から始まるすべてのコンテンツが表示されます。
設定方法
このプラグインを使用するには、「設定」＞「Alphabetic Pagination」と進み、設定を行います。
設定の「General（一般）」タブから、アルファベット順ページネーションを表示する場所を設定できます。
「Auto（自動）」を選択するのが一番シンプルな設定ですが、「Shortcodes（ショートコード）」タブにあるショートコードやPHP関数を使って、手動でアルファベット順のページネーションを配置することも可能です。
配置の設定が完了したら、「Styling」タブからページネーションのデザインを変更できます。
6. WP Show Posts
WP Show Postsは、独自のページネーション付きの投稿リストを作成することができる便利なプラグインです。
このプラグインのポイントは、既存のブログ記事リストにページネーションを追加するのではなく、独自のページネーション設定を含んだブログ記事リストを新たに作成する点です。
また、クエリビルダーが搭載されており、どの記事を表示するか（つまり、どの記事をページ分けするのか）を正確に選択することができます。
設定方法
プラグインを有効にしたら、「WP Show Posts」＞「新規追加」と進んで、新しい投稿リストを作成します。
表示するコンテンツを管理するために、すべての設定を確認するのがおすすめです。ページネーションの設定では、「投稿」タブの「ページ送り」にチェックを入れ、「ページあたり投稿数」を設定します。
すべての設定が完了したら、そのショートコードもしくはPHP関数を使って、投稿リストを追加することができます。
7. Pagination Styler for WooCommerce
Pagination Styler for WooCommerceは、その名の通り、WooCommerceストアに特化したページネーションプラグインです。
商品ページネーションの位置やスタイルの種類が豊富に用意されており、典型的な垂直に並ぶページネーションではなく、垂直に並ぶページネーションなど、全く異なるレイアウトも設定可能です。
設定方法
Pagination Styler for WooCommerceは、WooCommerceの既存のページネーションを独自のページネーションに置き換えて機能します。
プラグインの設定は、WordPressのダッシュボードから「BeRocket」>「Pagination Styler」から行います。
まとめ
ページネーションを使えば、WordPressサイトのコンテンツを複数のページに分割することができます。また、ユーザーや検索エンジンのナビゲーションをより簡単にし、各ページに読み込むデータを少なくすることで、パフォーマンスの向上が望めます。
すべてのWordPressには、ページネーション設定機能が最初から付いていますが、ほとんどのテーマのデフォルトのページネーションシステムには限りがあります。
カスタムコードを追加するか、今回ご紹介した7つのWordPressページネーションプラグインのどれかを使って、ページネーションの見直しと改善を行ってみてください。
WordPressのページネーションについて、その他ご不明点はございますか？以下のコメント欄でご意見をお聞かせください！
コメントを残す