今回は、ワードプレス（WordPress）でページネーション（ページナビ）を実装する方法を紹介します。
記事が増えてきたブログやメディアサイトでは、ページネーションの設置がほぼ必須といえます。
ページネーションを正しく設定することで、ユーザーが記事を探しやすくなり、サイトの回遊率向上やSEO対策にもつながります。
当記事では、
・プラグインを使って設定する方法
・プラグインを使わずに設定する方法
の両方を紹介し、それぞれの比較や注意点まで詳しくまとめています。
WordPressでページネーションの設定方法をお探しの方は、ぜひ参考にしてください。
ページネーションとは
ページネーションは、「ページ送り」「ページャー」「ページナビ」とも呼ばれ、大量のコンテンツを複数ページに分割して表示する仕組みです。
例えば、ブログの記事一覧やカテゴリーページ、検索結果ページなどで、記事を10件ずつ表示し、ページ番号で次のページに移動できるようにするのがページネーションです。
ページネーションには主に以下のような表示パターンがあります。
「1 2 3 … 10」のようにページ番号が表示されるタイプ。
現在のページ位置と全体のページ数が一目で分かるため、最も一般的です。
【前へ・次へリンク】
「← 前のページ」「次のページ →」のみのシンプルなタイプ。
ワードプレスのデフォルトのページ送りはこの形式です。
SEOの観点からは、数字付きのページネーションが推奨されています。
ページネーションを設置するメリット
ページネーションを設置することには、以下のようなメリットがあります。
- ユーザビリティの向上（目的の記事を見つけやすくする）
- ページの読み込み速度の改善（1ページに表示する記事数を制限できる）
- サイトの回遊率アップ（複数ページを閲覧してもらえる）
- SEO対策（Googleクローラーがサイト内のページを正しく巡回しやすくなる）
特に記事数が多くなってくると、全ての記事を1ページに表示するのはページの表示速度が遅くなる原因にもなります。
ページネーションで適切にページを分割し、ユーザーにとって使いやすいサイト構造にするのがおすすめです。
プラグイン「WP-PageNavi」を使ってページネーションを実装する方法
まずは、プラグインを使って簡単にページネーションを実装する方法を紹介します。
ページネーション用のプラグインとして最も人気があるのが「WP-PageNavi」です。
プログラミングの専門的な知識がなくても設定でき、管理画面から表示設定を簡単に変更できるのもポイントです。
WP-PageNaviのインストール方法
ワードプレスの管理画面にログインし、
「プラグイン」→「新規プラグインを追加」
と画面を移動します。
画面右上の検索フィールドに「WP-PageNavi」と入力すると、検索結果にプラグインが表示されます。
「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックします。
これでWP-PageNaviのインストールは完了です。
WP-PageNaviの設定方法
WP-PageNaviの有効化が完了すると、管理画面の「設定」メニューに「PageNavi」の項目が追加されます。
「設定」→「PageNavi」
と画面を移動してください。
このようなWP-PageNaviの設定画面が開くはずです。
設定画面は「ページナビゲーションテキスト」と「ページナビゲーション設定」の2つに分かれています。
それぞれについても説明しておきます。
ページナビゲーションテキスト
ページネーションとして表示されるテキストの内容を変更できます。
- 総ページ数用テキスト：「%CURRENT_PAGE% / %TOTAL_PAGES%」のように現在のページ数と総ページ数を表示
- 現在のページ用テキスト：現在開いているページのテキスト（デフォルトのままでOK）
- ページ用テキスト：各ページへのリンクテキスト（デフォルトのままでOK）
- 最初のページ用テキスト：最初のページへのリンクテキスト（例：「最初へ」）
- 最後のページ用テキスト：最後のページへのリンクテキスト（例：「最後へ」）
- 前のページ用テキスト：前のページへのリンクテキスト（例：「«」）
- 次のページ用テキスト：次のページへのリンクテキスト（例：「»」）
表示が不要な項目がある場合は、該当の入力フィールドを空にしてください。
その項目は表示されなくなります。
ページナビゲーション設定
ページネーションのスタイルや表示に関する設定を行えます。
- ナビゲーションスタイルを使用：プラグイン標準のCSSを使用するかどうか
- Page Navigation スタイル：「通常」または「ドロップダウンリスト」を選択
- 常にページナビゲーションを表示：1ページしかない場合でもナビゲーションを表示するか
- 表示するページ数：ページネーションに表示するページ番号の数
- 省略表示するページ数：省略される際に「…」で表示されるページ数
3～5程度に設定するのがおすすめです。
設定が完了したら「変更を保存」ボタンをクリックしてください。
テーマファイルにコードを追加する
WP-PageNaviの設定が完了したら、テーマファイルにページネーションを表示するためのコードを追加します。
記事一覧を表示しているテンプレートファイル（index.phpやarchive.phpなど）を開き、ワードプレスのループの後に以下のコードを追加します。
<?php if( function_exists(‘wp_pagenavi’) ) { wp_pagenavi(); } ?>
上記のコードをWordPressループ（endwhile; endif;）の直後に追加してください。
<?php if( function_exists(‘wp_pagenavi’) ) { wp_pagenavi( array(‘query’ => $custom_query) ); } ?>
引数にサブクエリの変数を渡さないとページネーションが正しく表示されません。
これでページネーションが表示されるようになります。
WP-PageNaviのデザインをカスタマイズする方法
WP-PageNaviではデフォルトのCSSが用意されています。
ただ、Webサイトのデザインに合わせてカスタマイズすることもできます。
その主な方法は、以下の2通りになります。
- プラグインのCSSファイルをテーマディレクトリにコピーして編集する
→ プラグインディレクトリにある「pagenavi-css.css」をテーマフォルダにコピーして編集すれば、プラグイン更新時に上書きされません。 - プラグインのCSSを無効化し、テーマのstyle.cssに独自スタイルを追加する
→ PageNaviの設定画面で「Page Navigation スタイル」を「いいえ」に変更し、テーマのCSSに独自のスタイルを記述します。
デザインを変更する際は、「.wp-pagenavi」「.current」「.page」「.previouspostslink」「.nextpostslink」などのクラス名に対してCSSを設定してください。
プラグインを使わずにページネーションを実装する方法
プラグインを使わずにページネーションを実装したい場合は、ワードプレスに標準で用意されている関数を使います。
the_posts_pagination()を使う方法
the_posts_pagination()は、WordPress 4.1以降で使用できるページネーション関数です。
この関数をテンプレートファイルに記述するだけで、ワードプレスが自動的にページネーションを生成してくれます。
記事一覧を表示しているテンプレートファイル（archive.phpやindex.phpなど）を開き、ワードプレスのループの後に以下のコードを追加します。
the_posts_pagination( array(
‘mid_size’ => 2,
‘prev_text’ => ‘«’,
‘next_text’ => ‘»’,
‘screen_reader_text’ => ‘ページナビゲーション’,
) );
?>
主なパラメータの説明
主なパラメータだけまとめておきます。
- mid_size：現在のページの前後に表示するページ番号の数（デフォルト：1）
- prev_text：「前のページ」リンクのテキスト
- next_text：「次のページ」リンクのテキスト
- screen_reader_text：スクリーンリーダー向けのテキスト
- show_all：全てのページ番号を表示するか（デフォルト：false）
- end_size：両端に表示するページ番号の数（デフォルト：1）
- prev_next：前後のページリンクを表示するか（デフォルト：true）
CSSでデザインを調整する
the_posts_pagination()が出力するHTMLには、以下のようなクラスが付与されます。
テーマのstyle.cssにこれらのクラスに対するスタイルを追加して、デザインを調整しましょう。
主なクラス名はこちらです。
- .navigation.pagination：ページネーション全体のラッパー
- .nav-links：リンク部分のラッパー
- .page-numbers：各ページ番号リンク
- .page-numbers.current：現在表示中のページ
- .prev.page-numbers：前のページリンク
- .next.page-numbers：次のページリンク
paginate_links()を使う方法
より細かいカスタマイズが必要な場合は、paginate_links()関数を使います。
この関数は、ページネーションのHTMLを文字列として返すため、出力方法を自由にコントロールできます。
echo paginate_links( array(
‘total’ => $wp_query->max_num_pages,
‘current’ => max( 1, get_query_var(‘paged’) ),
‘mid_size’ => 2,
‘prev_text’ => ‘« 前へ’,
‘next_text’ => ‘次へ »’,
) );
?>
paginate_links()はthe_posts_pagination()よりもパラメータが豊富で、カスタム投稿タイプやサブクエリなど、複雑な実装にも対応しやすいのが特徴です。
表示件数を変更する方法
ページネーションで1ページに表示する記事数は、ワードプレスの管理画面から設定できます。
「設定」→「表示設定」
と画面を移動し、「1ページに表示する最大投稿数」の数字を変更してください。
表示件数が少なすぎるとページ数が多くなり、多すぎるとページの読み込みが遅くなるため、10～20件程度が目安です。
プラグインあり・なしの比較
プラグインを使う方法と使わない方法、それぞれの特徴を比較してみましょう。
- メリット：設定が簡単で初心者でも導入しやすい。管理画面からテキストや表示ページ数を変更可能。
- デメリット：プラグインが増えることでサイトの表示速度に影響する可能性がある。プラグインの開発が終了するとメンテナンスされなくなるリスクがある。
- おすすめの人：HTML・CSSコーディングに詳しくない初心者。手軽にページネーションを導入したい方。
- メリット：プラグインに依存しないためサイトが軽くなる。HTML構造を自由にカスタマイズできる。プラグインの更新停止によるリスクがない。
- デメリット：PHPやCSSの知識が必要。テーマファイルを直接編集するため、ミスが発生するとエラーにつながる場合がある。
- おすすめの人：PHP・CSSの知識がある中級者以上。サイトの表示速度にこだわりたい方。デザインを細かくカスタマイズしたい方。
例えば、人気テーマの「Cocoon」「SWELL」「SANGO」「Lightning」などは、設定を変更するだけでページネーションの表示を調整できます。
詳しくは、お使いのテーマの公式サイトやドキュメントを確認してみることをおすすめします。
ページネーション設定時の注意点とよくあるエラー
ページネーションの実装では、思わぬエラーに遭遇することがあります。
ここでは、よくあるトラブルとその対処法をまとめます。
2ページ目以降が404エラーになる
ページネーションの中でも特によく発生するトラブルがこれです。
- 固定ページのスラッグ（URL）がワードプレスの予約語や他の投稿タイプのスラッグと競合している
- パーマリンク設定の問題
対処法：
- 管理画面の「設定」→「パーマリンク」を開き、何も変更せずに「変更を保存」をクリックしてリライトルールを更新する
- 固定ページのスラッグを変更して競合を避ける（例：「blog」「search」「news」などはカスタム投稿タイプやワードプレスの機能と競合しやすい）
2ページ目以降で同じ記事が表示される
ページを移動しても1ページ目と同じ内容が表示される場合があります。
サブクエリで「paged」パラメータが正しく取得できていない。
対処法：
WP_Queryの引数に以下のように「paged」を渡してください。
$paged = ( get_query_var(‘paged’) ) ? get_query_var(‘paged’) : 1;
この値をWP_Queryの「paged」パラメータに設定することで、正しいページの記事が表示されます。
ページネーションが表示されない
コードを追加してもページネーションが表示されない場合は、以下の点を確認してください。
- 記事数が「1ページに表示する最大投稿数」以下の場合、ページネーションは表示されません。テスト用に表示件数を少なくするか、記事数を増やしてみてください。
- WP-PageNaviを使っている場合、サブクエリではwp_pagenavi()の引数にクエリ変数を渡す必要があります。
- the_posts_pagination()はメインクエリでのみ動作します。固定ページやサブクエリでは動作しないため、paginate_links()を使用してください。
表示件数（posts_per_page）の不一致
WP-PageNaviを使う場合、管理画面の「表示設定」で設定した投稿数と、テーマファイルで指定した「posts_per_page」の値が一致していないとページネーションが正しく動作しません。
テーマファイル内で「’posts_per_page’ => 5」と記述し、管理画面の表示設定では「10件」に設定していると、
WP-PageNaviのページ数計算がずれてしまいます。
必ず両方の値を同じしてください。
テーマファイルの編集は子テーマで行う
テーマファイルを直接編集してページネーションを追加する場合は、必ず子テーマで作業してください。
テーマのアップデート時に全ての変更内容が上書きされて消えてしまいます。
子テーマを作成してからカスタマイズすることで、テーマ更新の影響を受けずに済みます。
ページネーションのSEOへの影響
ページネーションはSEO対策の観点からも重要な要素です。
Googleはページネーションされたページをどう扱うか
以前は「rel=”next”」「rel=”prev”」タグを使ってページ間の関係性をGoogleに伝えることが推奨されていました。
ですが、現在Googleは「rel=”next”」「rel=”prev”」タグをサポートしていないことを公式に発表しています。
ただし、Googleクローラーはページネーションのリンクをたどって各ページのコンテンツを個別にインデックスします。
そのため、ページネーション自体は引き続き有効なサイト構造になります。
ページネーションのSEO上のポイント
- 数字付きのページネーションを使い、クローラーが全ページにアクセスしやすくする
- 2ページ目以降が404エラーにならないよう正しく実装する
- 各ページのコンテンツが正しく表示されていることを確認する
- 無限スクロールのみの実装は避ける（クローラーがページを認識できない可能性がある）
最後に
今回は、ワードプレスでページナビ（ページネーション）を実装する方法を紹介しました。
ページネーションの実装には、
・プラグイン「WP-PageNavi」を使う方法
と
・ワードプレス標準関数を使う方法
の2つがあります。
それに対して、PHPやHTMLやCSSの知識がある方はthe_posts_pagination()やpaginate_links()を使うことで、より自由度の高い実装が可能です。
ワードプレスサイトにページネーションの設定を検討されている方は、ぜひ当記事を参考にしてください。
コメント