Hara Daizo 
WordPressのページネーションは、投稿一覧や検索結果などを複数ページへ分割し、「1 2 3 … 次へ」のように移動できるようにするナビゲーションです。記事数が増えたサイトでは、すべての投稿を1ページへ並べるより、一定件数ごとに区切る方が読み込み量と探しやすさを管理しやすくなります。
テーマが標準でページネーションを出している場合は、まずその機能を使います。自作テーマやカスタム一覧で必要になったときに、WordPress標準関数やQuery LoopのPaginationブロック、必要に応じてプラグインを検討してください。
WordPressのページネーションとは？設置するメリット
ページネーションが必要になる代表例は、ブログ一覧、カテゴリー、タグ、検索結果、カスタム投稿タイプのアーカイブです。1ページあたりの投稿数を決め、残りを2ページ目以降へ送ります。
- 記事数が多くても一覧ページの長さを一定に保てる
- ユーザーが前後・ページ番号で一覧を移動できる
- 大量の記事カードを一度に描画する負荷を抑えやすい
- 検索結果やアーカイブで現在位置を把握しやすい
記事の投稿・一覧管理そのものはWordPressの記事投稿方法で扱っています。この記事では一覧を「複数ページに分けて移動する仕組み」に絞ります。
まずテーマやQuery Loopにページネーションがあるか確認する
市販テーマやブロックテーマでは、ページネーションが標準で実装されていることがあります。ブロックテーマのQuery LoopではPaginationブロックを組み合わせ、前へ・ページ番号・次へを配置できます。テーマ機能で要件を満たせるなら、PHPを追加する必要はありません。
クラシックテーマでは、アーカイブテンプレートにthe_posts_pagination()などがすでに記述されている場合があります。独自コードを追加する前に、テンプレートとテーマ設定を確認し、同じページネーションを二重表示しないようにします。
WordPress標準関数でページネーションを表示する
the_posts_paginationを使う
通常のメインクエリに対してはthe_posts_pagination()が分かりやすい選択肢です。現在ページと総ページ数をWordPressが参照し、必要なときだけページ番号を出力します。
<?php
the_posts_pagination(
array(
'mid_size' => 2,
'prev_text' => '前へ',
'next_text' => '次へ',
)
);
?>メインクエリが1ページ分しかない場合はページネーションが出ません。まず「表示されない＝コードが壊れている」と決めつけず、総ページ数が2以上あるかを確認します。
paginate_linksでリンク配列を細かく制御する
独自の一覧やカスタムクエリでページ番号を組み立てたい場合はpaginate_links()を使えます。現在ページ、総ページ数、前後リンク、表示範囲などを指定できます。
$current = max( 1, get_query_var( 'paged' ) );
echo paginate_links(
array(
'current' => $current,
'total' => $wp_query->max_num_pages,
'mid_size' => 2,
'prev_text' => '前へ',
'next_text' => '次へ',
)
);実際には出力をエスケープ・構造化する方法や、カスタムWP_Queryの変数名に合わせた調整が必要です。functions.phpを使った共通関数化はfunctions.phpの実装方法へ分離します。
カスタムWP_Queryでページネーションを実装する
独自の投稿一覧でWP_Queryを作る場合は、現在のページ番号をクエリへ渡し、そのクエリのmax_num_pagesをページネーションへ使います。
$paged = max( 1, get_query_var( 'paged' ) );
$query = new WP_Query(
array(
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged,
)
);ループが終わったらwp_reset_postdata()でグローバルな投稿データを戻します。固定フロントページ内で独自一覧を作る場合など、pagedではなくpage側を確認する必要があるケースもあります。
また、offsetを使って先頭の数件を飛ばす設計は、標準のページ計算と衝突しやすいため注意が必要です。先頭記事だけ別表示したい場合は、除外IDやクエリ全体の設計を見直す方が安定します。
プラグインでページネーションを追加する場合
テーマの出力をコードで変更できない場合や、管理画面からラベル・表示形式を調整したい場合はプラグインが候補です。ただし、テーマ側に標準ページネーションがあるなら、まず非表示・置換方法を確認し、二重出力にならないようにします。
- 現在のWordPressバージョンで更新が継続しているか
- 使用テーマとの置換方法が明記されているか
- アーカイブ・検索・カスタム投稿など必要な画面に対応するか
- HTML構造とアクセシビリティを確認できるか
- 削除したとき標準表示へ戻せるか
functions.phpでページネーションを共通化する場合
複数のテンプレートで同じページネーションを使うなら、表示処理をfunctions.php側の関数へまとめる方法があります。ただし、functions.phpへ直接長い一覧クエリまで詰め込むのではなく、「ページリンクを生成する共通処理」だけにすると責任範囲が分かりやすくなります。
function site_pagination( WP_Query $query ) {
$links = paginate_links(
array(
'current' => max( 1, get_query_var( 'paged' ) ),
'total' => $query->max_num_pages,
'mid_size' => 2,
'prev_text' => '前へ',
'next_text' => '次へ',
)
);
if ( ! $links ) {
return;
}
echo '<nav class="pagination" aria-label="投稿一覧のページ送り">';
echo wp_kses_post( $links );
echo '</nav>';
}テンプレート側では、対象のWP_Queryを渡して呼び出します。関数名はテーマやプラグインと衝突しない固有名にし、子テーマで管理します。functions.phpの安全な編集や配置方法は専用記事で確認してください。
ページネーションのデザインをCSSで調整する
WordPress標準関数はナビゲーション用のHTMLとクラスを出力するため、テーマのCSSで余白、色、現在ページの強調などを調整できます。HTMLを無理に書き換える前に、ブラウザーの開発者ツールで実際のクラス名を確認します。
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
margin: 0.25rem;
}
.navigation.pagination .page-numbers.current {
font-weight: 700;
}上は構造の例です。使用テーマによってクラスやデザインが異なるため、そのまま当てるのではなく実際のHTMLへ合わせてください。スマートフォンでは番号が横にあふれないか、リンクのタップ領域が狭すぎないかも確認します。
ページネーションが表示されないときの確認
- 投稿数が1ページあたりの表示件数を超えているか確認する
max_num_pagesが2以上になっているか確認する- カスタムクエリへ現在ページの
pagedを渡しているか確認する - 固定フロントページ等で
page変数が必要なケースではないか確認する - テンプレート内でページネーションをループの外へ適切に配置しているか確認する
- テーマCSSで
.pagination等がdisplay:noneになっていないか確認する - キャッシュやURL書き換え設定を切り分け、2ページ目URLが404にならないか確認する
2ページ目以降が同じ記事になる
現在ページの値がクエリへ渡っていないと、どのURLでも1ページ目と同じ結果になることがあります。get_query_var( 'paged' )などから取得した値がWP_Queryのpagedへ入っているかを確認します。
2ページ目が404になる
投稿タイプのrewrite、固定ページのスラッグ、パーマリンク、独自ルーティングが衝突している可能性があります。まず「設定→パーマリンク」で設定を再保存する前に、現在URLとテンプレート階層を確認し、独自rewriteを使っている場合はそのルールを調べます。
ページネーション実装時のSEO・アクセシビリティ
ページネーションはユーザーが一覧を移動するための通常リンクとして実装します。各ページのURLへクロール可能なa要素を出し、JavaScriptだけに依存して移動できない構成は避けます。WordPress標準関数はナビゲーションのアクセシビリティを考慮したマークアップを出すため、独自HTMLへ置き換える場合も同等の役割を保ちます。
一覧の2ページ目以降を一律noindexにするなどのSEO処理は、サイト構造や検索意図によって判断が変わります。ページネーション実装とインデックス制御を混同せず、記事への内部リンクが検索エンジンからたどれる状態を維持してください。
よくある質問
はい。テーマやQuery LoopのPaginationブロック、the_posts_pagination()、paginate_links()などWordPress標準機能で実装できます。
標準関数は総ページ数が1以下なら出力しないことがあります。テスト時は投稿数を1ページあたりの表示件数より多くして確認してください。
用途で決めます。閲覧を連続させたい一覧では無限スクロールが合う場合がありますが、URL共有・現在位置・末尾への移動を重視するなら番号付きページネーションが分かりやすいことがあります。
まとめ
WordPressのページネーションは、まずテーマやQuery Loopの標準機能を確認し、必要ならthe_posts_pagination()やpaginate_links()で実装します。カスタムWP_Queryでは現在ページとmax_num_pagesを正しく扱い、表示されないときは投稿数、paged、URL、CSSを順に確認してください。独自コードを増やす前にWordPress標準のナビゲーションを活かす方が保守しやすくなります。