閉じる

WordPressのページネーションをthe_posts_paginationで実装する手順とカスタマイズ解説

広告

WordPressでブログやニュースサイトを運営する際、記事の数が増えてくると避けて通れないのがページネーションの実装です。

大量の記事を一つのページにすべて表示してしまうと、ページの読み込み速度が低下し、ユーザーの閲覧体験を著しく損なう恐れがあります。

現在のWeb開発において、標準的かつ効率的にページ分割を行うための関数がthe_posts_paginationです。

この記事では、最新のWordPress環境に合わせたthe_posts_paginationの実装手順から、詳細なカスタマイズ方法、そしてデザインを整えるためのテクニックまで詳しく解説します。

目次 [ close ]
  1. WordPressのページネーションの重要性と基本概念
  2. the_posts_paginationの基本的な実装方法
    1. 基本コードの記述
    2. 出力されるHTMLの構造
  3. カスタマイズのための引数（パラメータ）解説
    1. 主要なパラメータ一覧
    2. 実践的なカスタマイズ例
  4. デザインを整えるためのCSSスタイリング
    1. 推奨されるCSSコード
  5. WP_Queryでページネーションを動作させる方法
    1. カスタムクエリでの実装手順
  6. ページネーション実装時のよくある注意点
    1. 表示件数の設定ミス
    2. URL構造の影響
  7. アクセシビリティへの配慮
  8. まとめ

WordPressのページネーションの重要性と基本概念

ページネーションは、サイトの回遊性を高めるために非常に重要な役割を果たします。

ユーザーが過去の記事をスムーズに探せるようにすることで、直帰率の低下やPV数の向上を期待できるからです。

WordPressには古くからposts_nav_linkやprevious_posts_linkといった関数が存在していました。

しかし、これらは「前へ」「次へ」といった単純なリンクしか生成できず、現在のWebサイトに求められる利便性としては不十分な側面があります。

現代のWordPress開発では、数字付きのページ番号リストを自動生成してくれるthe_posts_pagination関数を使用するのが一般的です。

この関数は、HTML5に準拠したマークアップを出力し、アクセシビリティにも配慮された設計となっています。

また、検索エンジン（SEO）にとっても、ページ同士のつながりを論理的に示すことができるため、構造化されたサイト作りには欠かせません。

特に2026年現在のWeb標準では、モバイルフレンドリーであることや、セマンティックなタグ構成がより厳格に求められています。

the_posts_paginationを正しく使いこなすことは、技術的なSEO対策の一環としても非常に有効な手段と言えるでしょう。

the_posts_paginationの基本的な実装方法

まずは、最もシンプルな形でページネーションを表示させる方法を確認しましょう。

この関数は、主にindex.phpやarchive.php、search.phpといった、記事一覧を表示するテンプレートファイルで使用します。

基本コードの記述

以下のコードを、記事一覧のループ（while ( have_posts() )）が終了した直後に記述してください。

PHP
<?php
// ページネーションを表示する
the_posts_pagination();
?>

この一行を記述するだけで、WordPressは現在の表示ページと総ページ数を自動的に判別し、適切なリンクを表示してくれます。

出力されるHTMLの構造

the_posts_paginationを実行すると、ブラウザには以下のようなHTML構造が出力されます。

HTML
<nav class="navigation pagination" aria-label="投稿">
    <h2 class="screen-reader-text">投稿ナビゲーション</h2>
    <div class="nav-links">
        <span aria-current="page" class="page-numbers current">1</span>
        <a class="page-numbers" href="https://example.com/page/2">2</a>
        <a class="page-numbers" href="https://example.com/page/3">3</a>
        <span class="page-numbers dots">&hellip;</span>
        <a class="page-numbers" href="https://example.com/page/10">10</a>
        <a class="next page-numbers" href="https://example.com/page/2">次へ</a>
    </div>
</nav>

デフォルトでは、視覚障害者向けのスクリーンリーダー用テキスト（screen-reader-text）が含まれていることがわかります。

これはアクセシビリティを確保するための重要な要素ですが、デザイン上はCSSで非表示にされることが一般的です。

カスタマイズのための引数（パラメータ）解説

the_posts_paginationの魅力は、配列形式で引数を渡すことで、表示内容を細かく制御できる点にあります。

サイトのデザインやターゲット層に合わせて、最適なパラメータを設定しましょう。

主要なパラメータ一覧

よく使用されるパラメータを以下の表にまとめました。

パラメータ名型説明
mid_sizeint現在のページ番号の左右に表示するページ番号の数（デフォルトは1）
prev_textstring「前へ」リンクに表示するテキスト
next_textstring「次へ」リンクに表示するテキスト
screen_reader_textstringスクリーンリーダー用の見出しテキスト
aria_labelstringnav要素に付与されるaria-label属性の値
show_allboolすべてのページ番号を表示するか（デフォルトはfalse）

実践的なカスタマイズ例

次に、具体的なカスタマイズコードの例を紹介します。

例えば、ページ番号を多めに表示し、テキストを矢印記号に変更したい場合は以下のように記述します。

PHP
<?php
the_posts_pagination( array(
    'mid_size'           => 2, // 現在のページの両隣に2つずつ表示
    'prev_text'          => '<span>&laquo; 前へ</span>',
    'next_text'          => '<span>次へ &raquo;</span>',
    'screen_reader_text' => 'ページ移動',
) );
?>

このように設定することで、デフォルトよりも使い勝手の良いナビゲーションを構築することが可能です。

特にmid_sizeを調整することで、ページ数が多いサイトでもコンパクトかつ機能的な表示を維持できます。

デザインを整えるためのCSSスタイリング

the_posts_paginationが出力するHTMLには、あらかじめクラス名が付与されているため、CSSでのスタイリングが容易です。

ここでは、一般的によく使われるモダンなボタン型デザインのスタイルを紹介します。

推奨されるCSSコード

以下のスタイルをテーマのstyle.cssに追加してみてください。

CSS
/* ページネーション全体のコンテナ */
.pagination {
    margin: 40px 0;
    text-align: center;
}

/* スクリーンリーダー用テキストを非表示にする */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* リンクと現在のページ番号の共通スタイル */
.nav-links .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background-color: #f7f7f7;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

/* ホバー時のスタイル */
.nav-links a.page-numbers:hover {
    background-color: #cf2e2e;
    color: #fff;
}

/* 現在表示中のページ番号 */
.nav-links .page-numbers.current {
    background-color: #333;
    color: #fff;
    font-weight: bold;
}

/* 省略記号（...）のスタイル */
.nav-links .dots {
    background: none;
    border: none;
}

このCSSを適用することで、標準的なテキストリンクから、クリックしやすいボタン形式のデザインへとアップグレードされます。

ユーザーがモバイル端末からアクセスする場合を考慮し、パディング（余白）を十分に確保しておくことが大切です。

また、transitionプロパティを加えることで、操作時の心地よいフィードバックを提供できます。

WP_Queryでページネーションを動作させる方法

メインクエリではなく、WP_Queryを使って独自の条件で記事一覧を表示している場合、the_posts_paginationはそのままでは正しく動作しません。

なぜなら、この関数はグローバル変数の$wp_queryを参照するように作られているからです。

カスタムクエリでの実装手順

独自のクエリでページネーションを動かすには、現在何ページ目かを示すpagedパラメータを正しく渡す必要があります。

以下の手順でコードを構成してください。

PHP
<?php
// 現在のページ番号を取得
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

// カスタムクエリの設定
$args = array(
    'post_type'      => 'post',
    'posts_per_page' => 5,
    'paged'          => $paged, // ページ番号を指定
);

$custom_query = new WP_Query( $args );

if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 記事の内容を表示
    endwhile;

    // カスタムクエリ用のページネーション
    echo get_the_posts_pagination( array(
        'total'   => $custom_query->max_num_pages,
        'current' => $paged,
    ) );

    wp_reset_postdata(); // クエリをリセット
endif;
?>

ここではthe_posts_paginationではなく、get_the_posts_paginationを使用して内容を取得し、エコーしている点に注目してください。

引数のtotalに、カスタムクエリの全ページ数（max_num_pages）を明示的に指定することが最大のポイントです。

これを忘れると、2ページ目以降が表示されない、あるいは404エラーになるといったトラブルの原因となります。

ページネーション実装時のよくある注意点

実装が完了しても、環境によっては正しく動作しないケースがいくつか考えられます。

特に多いのが、WordPressの表示設定とテンプレート内の数値の不一致です。

表示件数の設定ミス

WordPress管理画面の「設定 ＞ 表示設定」にある「1ページに表示する最大投稿数」と、コード内のposts_per_pageは同じ数値にするのが安全です。

ここが異なっていると、ページ送りは表示されるものの、クリックした先で「記事が見つかりません」といったエラーが発生しやすくなります。

もし特定のアーカイブページだけ表示件数を変えたい場合は、テンプレートファイル内ではなくfunctions.phpでpre_get_postsアクションフックを利用することをおすすめします。

URL構造の影響

パーマリンク設定を「基本」以外にしている場合、ページネーションのURLは/page/2/のようになります。

サーバーの設定やプラグインの影響で、このURL構造が正しくリダイレクトされないことがあります。

もしページネーションが動作しない場合は、一度パーマリンク設定を保存し直す（リフレッシュする）ことで解決する場合が多いです。

アクセシビリティへの配慮

2026年のWeb制作において、アクセシビリティへの対応はもはやオプションではなく必須事項です。

the_posts_paginationは標準でnav要素を使用しており、スクリーンリーダーが「ここはナビゲーションである」と認識できるようになっています。

さらに使いやすくするために、aria_labelをページの種類ごとに使い分けることも検討しましょう。

例えば、「ブログ記事のページ一覧」や「検索結果のページ一覧」のように具体的であれば、目がいき届かないユーザーにとっても親切な設計となります。

また、フォーカス時の視認性を確保するために、CSSで:focus擬似クラスに対しても適切なスタイルを定義しておいてください。

「誰にとっても使いやすいページネーション」を目指すことは、結果としてサイト全体の品質を高めることにつながります。

まとめ

WordPressのページネーション実装において、the_posts_paginationは非常に強力で柔軟なツールです。

基本的な実装だけであれば数行のコードで済みますが、引数を活用することで、サイトの個性に合わせた自由なカスタマイズが可能になります。

特にWP_Queryを使用する際のpagedパラメータの扱いや、CSSによるボタンデザインへの調整は、プロの現場でも多用されるテクニックです。

また、単に見栄えを整えるだけでなく、アクセシビリティやSEOの観点からも正しいマークアップを心がけることが、長く愛されるWebサイトを作る秘訣となります。

本記事で紹介した手順を参考に、ぜひあなたのサイトにも使いやすく美しいページネーションを実装してみてください。

正しく実装されたページネーションは、ユーザーを次の素晴らしいコンテンツへと導く架け橋となってくれるはずです。

URLをコピーしました！