WordPressページネーション完全ガイド｜表示されない原因から実装・カスタマイズ方法まで解説

はじめに

WordPressでブログやメディアサイトを運営していると、投稿一覧、カテゴリーページ、タグページ、検索結果ページなどで「ページネーション」を設置する場面が出てきます。ページネーションとは、記事一覧を1ページにすべて表示するのではなく、複数ページに分割して「1、2、3」「次へ」「前へ」のように移動できるようにする仕組みです。

特に記事数が増えてくると、ページネーションはユーザーの回遊性、表示速度、SEO、管理のしやすさに大きく関わります。一方で、WordPressではテンプレートファイルやWP_Queryの書き方によって「ページネーションが表示されない」「2ページ目が404になる」「固定ページだけ動かない」といったトラブルも起こりやすいです。

この記事では、WordPressのページネーションの基本から、プラグインなしでの実装方法、表示されない原因、CSSカスタマイズ、SEOで注意すべきポイントまで詳しく解説します。

1. WordPressのページネーションとは？基本の役割と種類

1-1. ページネーションの意味とWordPressで使われる場面

ページネーションとは、一覧ページや長いコンテンツを複数のページに分割し、ユーザーが順番に移動できるようにするナビゲーションのことです。WordPressでは、主に以下のような場面で使われます。

投稿一覧ページでは、トップページやブログ一覧に表示する記事数が多くなったときに、2ページ目、3ページ目へ移動するためにページネーションを設置します。カテゴリーページでは、特定カテゴリーに属する記事が多い場合に、一覧を分割して表示します。タグページ、著者アーカイブ、日付アーカイブ、検索結果ページでも同じように、該当する投稿が多い場合にページ送りが必要になります。

また、カスタム投稿タイプの一覧や、WP_Queryで独自に作成した記事一覧にもページネーションを実装できます。コーポレートサイトであれば「お知らせ一覧」「施工事例一覧」「イベント一覧」などに使われることが多いです。

1-2. 「次へ・前へ」と「番号付きページネーション」の違い

WordPressのページネーションには、大きく分けて「次へ・前へ」形式と「番号付きページネーション」形式があります。

「次へ・前へ」形式は、現在のページから前後のページへ移動するシンプルな形式です。たとえば「前のページ」「次のページ」だけを表示するため、デザインがすっきりしやすく、古いブログ形式のサイトやシンプルなテーマでよく使われます。

一方、番号付きページネーションは「1 2 3 4 … 次へ」のようにページ番号を表示する形式です。ユーザーが現在どのあたりを見ているのか把握しやすく、目的のページへ移動しやすいのが特徴です。記事数が多いメディアサイトや、カテゴリーページ、検索結果ページでは番号付きページネーションの方が使いやすいケースが多いです。

WordPressでは、previous_posts_link()やnext_posts_link()を使うと前後リンクを実装でき、paginate_links()やthe_posts_pagination()を使うと番号付きページネーションを作成できます。the_posts_pagination()は投稿一覧のページ送りを表示する関数で、内部的にはページネーション用のリンクを生成します。WordPress Developer Resources

1-3. 投稿一覧・カテゴリーページ・検索結果・固定ページでの違い

WordPressのページネーションは、表示するテンプレートによって動作の考え方が少し異なります。

投稿一覧、カテゴリーページ、タグページ、検索結果ページなどのアーカイブ系ページでは、WordPressのメインクエリが自動的に現在のページ番号や総ページ数を持っています。そのため、テンプレート内のループ後にthe_posts_pagination()を記述するだけでページネーションが表示されることがあります。

一方、固定ページ内に独自の記事一覧を作る場合や、カスタム投稿タイプをWP_Queryで取得する場合は、ページ番号を自分で取得してクエリに渡す必要があります。ここで重要になるのがpagedやpageといったクエリ変数です。

特に固定ページでは、通常のアーカイブページと同じ感覚でpagedだけを使うと、ページ送りがうまく動かない場合があります。固定ページでページネーションを作る場合は、現在のページ番号をget_query_var('paged')だけでなく、必要に応じてget_query_var('page')からも取得するのがポイントです。

1-4. ページネーションを設置するメリット

ページネーションを設置するメリットは、主に4つあります。

1つ目は、ページの表示速度を改善しやすいことです。大量の記事を1ページにすべて表示すると、HTMLの量や画像の読み込みが増え、ページ表示が重くなります。ページネーションで表示件数を分ければ、1ページあたりの読み込み量を抑えられます。

2つ目は、ユーザーが記事を探しやすくなることです。カテゴリーページや検索結果ページで「次へ」「2ページ目」「3ページ目」へ移動できれば、ユーザーは過去記事を探しやすくなります。

3つ目は、内部リンク構造を整えられることです。ページネーションリンクによって一覧ページ同士がつながるため、クローラーが深い階層の記事へ到達しやすくなります。

4つ目は、サイト全体の見た目を整理できることです。記事数が多いサイトでも、一覧ページを適切な件数で分割することで、情報が見やすくなります。

2. WordPressでページネーションを実装する主な方法

2-1. WordPress標準機能で実装する方法

WordPressには、ページネーションを実装するための標準関数が用意されています。代表的なものは以下です。

the_posts_pagination()は、投稿一覧やアーカイブページで番号付きページネーションを簡単に表示できる関数です。paginate_links()は、より細かくページネーションのHTMLやリンクを制御したい場合に使います。previous_posts_link()とnext_posts_link()は、前後のページへ移動するリンクを表示したい場合に使います。

つまり、シンプルに実装したい場合はthe_posts_pagination()、カスタマイズ性を重視する場合はpaginate_links()、前後リンクだけでよい場合はprevious_posts_link()とnext_posts_link()を使うと考えるとわかりやすいです。

2-2. paginate_links()で番号付きページネーションを作る方法

paginate_links()は、WordPressで番号付きページネーションを自作するときによく使われる関数です。ページネーションリンクのベースURL、現在のページ、総ページ数、前後テキスト、出力形式などを細かく指定できます。WordPress公式リファレンスでも、baseやformatなどの引数を使ってページネーションリンクを生成する関数として説明されています。WordPress Developer Resources

基本的なコードは以下のようになります。

PHP
<?php
global $wp_query;

$big = 999999999;

echo paginate_links(array(
  'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
  'format'    => '?paged=%#%',
  'current'   => max(1, get_query_var('paged')),
  'total'     => $wp_query->max_num_pages,
  'prev_text' => '前へ',
  'next_text' => '次へ',
));
?>

このコードでは、現在のページ番号をcurrentに、総ページ数をtotalに渡しています。$wp_query->max_num_pagesは、現在のクエリで何ページ分の投稿があるかを表す値です。

paginate_links()は自由度が高いため、HTML構造やCSSクラスを調整したい場合に向いています。typeにlistを指定すれば、ulとliを使ったリスト形式のページネーションを出力することもできます。

2-3. the_posts_pagination()を使う方法

the_posts_pagination()は、WordPressのメインクエリに対して番号付きページネーションを表示する関数です。アーカイブページや投稿一覧ページで、ループの後に記述するだけで使えることが多いです。

PHP
<?php
the_posts_pagination(array(
  'mid_size'  => 2,
  'prev_text' => '前へ',
  'next_text' => '次へ',
));
?>

mid_sizeは、現在のページ番号の前後に表示するページ番号の数を指定します。たとえば現在が5ページ目の場合、mid_sizeを2にすると、3、4、5、6、7のように現在ページ周辺の番号が表示されやすくなります。

the_posts_pagination()は手軽ですが、基本的にはメインクエリ向けです。WP_Queryで作った独自ループに対して使う場合は、期待通りに動かないことがあります。その場合はpaginate_links()を使って、totalにカスタムクエリのmax_num_pagesを指定する方法が適しています。

2-4. previous_posts_link()・next_posts_link()を使う方法

番号付きページネーションではなく、「前へ」「次へ」だけを表示したい場合は、previous_posts_link()とnext_posts_link()を使います。

PHP
<div class="post-nav">
  <div class="post-nav__prev">
    <?php previous_posts_link('前のページへ'); ?>
  </div>
  <div class="post-nav__next">
    <?php next_posts_link('次のページへ'); ?>
  </div>
</div>

この方法は、古い記事・新しい記事へ順番に移動させたいブログや、ページ番号をあまり目立たせたくないサイトに向いています。

ただし、記事数が多いサイトでは、ユーザーが目的のページへ直接移動しづらいというデメリットがあります。メディアサイトや検索結果ページでは、番号付きページネーションの方が使いやすい場合が多いです。

2-5. プラグインで簡単に導入する方法

コードを編集したくない場合は、ページネーション用プラグインを使う方法もあります。代表的なプラグインには、WP-PageNaviやWP-Paginateがあります。

プラグインを使うメリットは、管理画面から設定しやすく、デザインや表示形式を簡単に変更できることです。PHPの知識が少ない場合や、既存テーマのコードを大きく変更したくない場合には便利です。

一方で、プラグインを追加するとサイトの管理対象が増えます。テーマとの相性や、CSSの競合、将来的なメンテナンスも考える必要があります。シンプルなページネーションであれば、WordPress標準関数で実装した方が軽量で管理しやすいこともあります。

2-6. テーマに最初からあるページネーションを使う方法

有料テーマや高機能な無料テーマでは、最初からページネーション機能が用意されていることがあります。この場合、テーマ設定画面から表示形式を選んだり、カスタマイザーでデザインを調整できたりします。

テーマにページネーション機能がある場合は、まずテーマの設定を確認しましょう。すでにテーマ側でページネーションが出力されているのに、自分でテンプレートに追加すると、ページネーションが二重に表示されることがあります。

また、テーマ独自の関数でページネーションを出力している場合、the_posts_pagination()やpaginate_links()を追加してもデザインが揃わないことがあります。既存テーマを使う場合は、テーマのテンプレート構造を確認したうえで実装することが重要です。

3. プラグインなしでページネーションを実装する手順

3-1. functions.phpではなくテンプレートファイルに記述する基本

WordPressのページネーションは、基本的にfunctions.phpではなく、表示したいテンプレートファイルに記述します。

たとえば、投稿一覧ページに表示したい場合はindex.phpやhome.php、カテゴリーページに表示したい場合はcategory.php、アーカイブページ全体に表示したい場合はarchive.phpに記述します。

functions.phpは関数の定義やテーマ機能の追加に使うファイルです。ページネーションそのものの表示コードをfunctions.phpに直接書いても、意図した場所には表示されません。ページネーションは、記事一覧のループが終わった直後に配置するのが基本です。

3-2. archive.php・category.php・index.phpに追加する方法

アーカイブ系ページでは、以下のようにループの後にthe_posts_pagination()を追加します。

PHP
<?php if (have_posts()) : ?>
  <div class="post-list">
    <?php while (have_posts()) : the_post(); ?>
      <article class="post-item">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      </article>
    <?php endwhile; ?>
  </div>

  <?php
  the_posts_pagination(array(
    'mid_size'  => 2,
    'prev_text' => '前へ',
    'next_text' => '次へ',
  ));
  ?>

<?php else : ?>
  <p>記事が見つかりませんでした。</p>
<?php endif; ?>

ポイントは、whileループの終了後、endifの前にページネーションを置くことです。ループの中に入れてしまうと、記事ごとにページネーションが表示されるなど、意図しない出力になる可能性があります。

3-3. 固定ページテンプレートで実装する方法

固定ページに独自の記事一覧を作る場合は、カスタムテンプレートを作成し、その中でWP_Queryを使います。

固定ページでは、現在のページ番号の取得に注意が必要です。以下のようにpagedとpageの両方を考慮すると、固定ページでもページネーションが動きやすくなります。

PHP
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : get_query_var('page');
$paged = $paged ? $paged : 1;

$args = array(
  'post_type'      => 'post',
  'posts_per_page' => 10,
  'paged'          => $paged,
);

$custom_query = new WP_Query($args);
?>

<?php if ($custom_query->have_posts()) : ?>
  <div class="post-list">
    <?php while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
      <article class="post-item">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      </article>
    <?php endwhile; ?>
  </div>

  <div class="pagination">
    <?php
    echo paginate_links(array(
      'total'     => $custom_query->max_num_pages,
      'current'   => $paged,
      'prev_text' => '前へ',
      'next_text' => '次へ',
    ));
    ?>
  </div>

  <?php wp_reset_postdata(); ?>

<?php else : ?>
  <p>記事が見つかりませんでした。</p>
<?php endif; ?>

固定ページでページネーションが表示されない場合は、まず$pagedの取得方法を確認しましょう。

3-4. WP_Queryを使ったカスタム投稿一覧で実装する方法

カスタム投稿タイプの一覧にページネーションを付ける場合も、基本はWP_Queryとpaginate_links()を組み合わせます。

たとえば、newsというカスタム投稿タイプの一覧を表示する場合は、以下のように書きます。

PHP
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;

$args = array(
  'post_type'      => 'news',
  'posts_per_page' => 10,
  'paged'          => $paged,
);

$news_query = new WP_Query($args);
?>

<?php if ($news_query->have_posts()) : ?>
  <div class="news-list">
    <?php while ($news_query->have_posts()) : $news_query->the_post(); ?>
      <article class="news-item">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      </article>
    <?php endwhile; ?>
  </div>

  <nav class="pagination">
    <?php
    echo paginate_links(array(
      'total'     => $news_query->max_num_pages,
      'current'   => $paged,
      'prev_text' => '前へ',
      'next_text' => '次へ',
    ));
    ?>
  </nav>

  <?php wp_reset_postdata(); ?>

<?php else : ?>
  <p>お知らせはありません。</p>
<?php endif; ?>

WP_Queryでは、posts_per_pageで1ページあたりの表示件数を指定し、pagedで現在のページ番号を渡します。WordPress公式リファレンスでも、WP_Queryのposts_per_pageやpagedはページ送りに関わる重要なパラメータとして説明されています。WordPress Developer Resources

3-5. 実装時に必要な$pagedの設定方法

ページネーションを正しく動かすには、現在のページ番号を取得してWP_Queryに渡す必要があります。これが$pagedです。

通常のアーカイブページでは、以下の書き方で取得できます。

PHP
$paged = get_query_var('paged') ? get_query_var('paged') : 1;

固定ページでは、以下のようにpageも考慮します。

PHP
$paged = get_query_var('paged') ? get_query_var('paged') : get_query_var('page');
$paged = $paged ? $paged : 1;

$pagedを設定しないままWP_Queryを実行すると、2ページ目へ移動しても1ページ目と同じ投稿が表示されたり、ページネーションリンクだけが表示されて中身が切り替わらなかったりします。

ページネーションがうまく動かないときは、まず$pagedが正しく取得できているか確認しましょう。

3-6. コピペ用コード例と設置場所

プラグインなしで番号付きページネーションを実装する場合の基本コードは以下です。archive.php、category.php、index.phpなどの記事一覧ループの後に設置します。

PHP
<?php if (have_posts()) : ?>

  <?php while (have_posts()) : the_post(); ?>
    <article>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <p><?php the_excerpt(); ?></p>
    </article>
  <?php endwhile; ?>

  <nav class="pagination">
    <?php
    the_posts_pagination(array(
      'mid_size'  => 2,
      'prev_text' => '前へ',
      'next_text' => '次へ',
    ));
    ?>
  </nav>

<?php else : ?>
  <p>記事がありません。</p>
<?php endif; ?>

WP_Queryを使う場合は、以下のコードを使います。

PHP
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;

$args = array(
  'post_type'      => 'post',
  'posts_per_page' => 10,
  'paged'          => $paged,
);

$query = new WP_Query($args);
?>

<?php if ($query->have_posts()) : ?>

  <?php while ($query->have_posts()) : $query->the_post(); ?>
    <article>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <p><?php the_excerpt(); ?></p>
    </article>
  <?php endwhile; ?>

  <nav class="pagination">
    <?php
    echo paginate_links(array(
      'total'     => $query->max_num_pages,
      'current'   => $paged,
      'prev_text' => '前へ',
      'next_text' => '次へ',
    ));
    ?>
  </nav>

  <?php wp_reset_postdata(); ?>

<?php else : ?>
  <p>記事がありません。</p>
<?php endif; ?>

設置場所は、必ずループの後です。ページネーションは「一覧の続きへ移動するためのリンク」なので、記事一覧を出力した直後に配置するのが自然です。

4. WordPressページネーションが表示されない原因と対処法

4-1. ページネーションが表示されない主な原因一覧

WordPressでページネーションが表示されない場合、主な原因は以下です。

投稿数が1ページあたりの表示件数を超えていない、テンプレートファイルに記述する場所が間違っている、WP_Queryにpagedを渡していない、固定ページでpageとpagedを混同している、offsetを使ってページ送りが崩れている、パーマリンク設定が原因で2ページ目が404になる、テーマやプラグインが干渉している、といったケースがよくあります。

原因を特定するときは、まず「ページネーションが出力されていない」のか、「出力はされているがCSSで見えない」のか、「リンク先が404になる」のかを分けて確認しましょう。

4-2. 投稿数が1ページあたりの表示件数を超えていない

ページネーションは、2ページ目以降が存在するときに表示されます。たとえば1ページあたり10件表示の設定で、投稿が8件しかない場合、ページネーションは表示されません。

まずは、WordPress管理画面の「設定」→「表示設定」にある「1ページに表示する最大投稿数」を確認しましょう。表示件数が10件で、対象の投稿数が10件以下であれば、ページネーションが出ないのは正常です。

テストするときは、一時的に表示件数を少なくすると確認しやすいです。たとえば1ページあたり2件に設定し、投稿が5件以上あれば、ページネーションが表示されるか確認できます。

4-3. ループ処理やWP_Queryの指定が間違っている

ページネーションが表示されない原因として、ループ処理やWP_Queryの指定ミスもよくあります。

特にカスタムクエリを使う場合、posts_per_pageやpagedを正しく指定していないと、総ページ数が計算されず、ページネーションが出ないことがあります。

PHP
$args = array(
  'post_type'      => 'post',
  'posts_per_page' => 10,
  'paged'          => $paged,
);

このように、pagedを必ずクエリに含めることが重要です。

また、WP_Queryを使った後は、最後にwp_reset_postdata()を記述します。これを忘れると、後続のテンプレートタグが意図しない投稿データを参照する場合があります。

4-4. pagedパラメータが正しく取得できていない

ページネーションで最も多いトラブルのひとつが、pagedパラメータの取得ミスです。

以下のように現在のページ番号を取得します。

PHP
$paged = get_query_var('paged') ? get_query_var('paged') : 1;

この値が常に1になっている場合、2ページ目へ移動してもクエリは1ページ目として処理されます。その結果、同じ記事一覧が表示されたり、ページネーションが正しく切り替わらなかったりします。

確認用に、開発環境で一時的に以下を出力してみるのも有効です。

PHP
<?php echo $paged; ?>

2ページ目で2、3ページ目で3と表示されれば、ページ番号は取得できています。

4-5. 固定ページでpageとpagedを混同している

固定ページでページネーションを実装するときは、pagedだけではうまく動かない場合があります。固定ページでは、ページ分割や階層構造の関係でpageが使われることがあるためです。

固定ページテンプレートでは、以下のように書くと安定しやすくなります。

PHP
$paged = get_query_var('paged') ? get_query_var('paged') : get_query_var('page');
$paged = $paged ? $paged : 1;

「投稿一覧では動くのに、固定ページに設置した一覧では動かない」という場合は、この部分を確認しましょう。

4-6. offset指定によってページ送りが崩れている

WP_Queryでoffsetを使っている場合、ページネーションが崩れることがあります。

たとえば、最初の1件だけ除外して一覧を表示したい場合にoffset => 1を指定すると、ページごとの投稿数と実際の取得位置がずれ、2ページ目以降の表示がおかしくなることがあります。

PHP
$args = array(
  'posts_per_page' => 10,
  'offset'         => 1,
  'paged'          => $paged,
);

このような指定は、ページネーションと相性がよくありません。特定の記事を除外したい場合は、post__not_inを使うなど、別の方法を検討しましょう。

PHP
$args = array(
  'posts_per_page' => 10,
  'paged'          => $paged,
  'post__not_in'   => array(123),
);

ページネーションを正しく保ちたい場合、offsetの利用は慎重に判断する必要があります。

4-7. パーマリンク設定が原因で2ページ目が404になる

ページネーション自体は表示されているのに、2ページ目へ移動すると404になる場合は、パーマリンク設定が原因のことがあります。

この場合、まず管理画面の「設定」→「パーマリンク」を開き、何も変更せずに「変更を保存」をクリックします。これにより、WordPressのリライトルールが再生成され、404が解消することがあります。

また、カスタム投稿タイプを使っている場合は、has_archiveの設定やスラッグの重複も確認しましょう。固定ページのスラッグとカスタム投稿タイプのスラッグが重複していると、2ページ目以降のURL解釈がうまくいかないことがあります。

4-8. テーマやプラグインの干渉を確認する方法

ページネーションが突然表示されなくなった場合は、テーマやプラグインの干渉も疑いましょう。

まず、最近追加・更新したプラグインを一時的に停止して確認します。特にSEOプラグイン、キャッシュプラグイン、リダイレクト系プラグイン、一覧表示を変更するプラグインは、ページネーションに影響することがあります。

次に、テーマをWordPressの標準テーマに切り替えて確認します。標準テーマでは動作するのに現在のテーマでは動かない場合、テーマ側のテンプレートや関数に原因がある可能性が高いです。

本番サイトで直接検証するのが不安な場合は、ステージング環境やローカル環境で確認しましょう。

5. ページネーションのデザインをカスタマイズする方法

5-1. HTML構造とCSSクラスを確認する

ページネーションのデザインを変更する前に、まず出力されているHTML構造とCSSクラスを確認しましょう。

ブラウザの検証ツールを使うと、ページネーション部分にどのようなタグやクラスが付いているか確認できます。the_posts_pagination()では、テーマやWordPressの出力に応じてnav、div、a、spanなどの要素が使われます。

たとえば、以下のような構造になることがあります。

HTML
<nav class="navigation pagination">
  <div class="nav-links">
    <span class="page-numbers current">1</span>
    <a class="page-numbers" href="/page/2/">2</a>
    <a class="next page-numbers" href="/page/2/">次へ</a>
  </div>
</nav>

現在のページにはcurrent、各リンクにはpage-numbers、次ページリンクにはnextといったクラスが付くため、CSSで個別にデザインできます。

5-2. CSSで番号・余白・背景色・枠線を調整する

基本的なページネーションのCSS例は以下です。

CSS
.pagination {
  margin-top: 40px;
  text-align: center;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1;
}

番号のサイズ、余白、枠線、角丸を調整することで、サイト全体のデザインに馴染ませることができます。

テーマによっては、すでにページネーション用のCSSが書かれていることがあります。その場合、CSSの優先順位によって自分のスタイルが反映されないことがあるため、検証ツールでどのCSSが適用されているか確認しましょう。

5-3. 現在のページだけデザインを変える方法

現在表示しているページ番号だけデザインを変えるには、.currentクラスを指定します。

CSS
.pagination .page-numbers.current {
  background: #333;
  color: #fff;
  border-color: #333;
}

現在ページを目立たせることで、ユーザーは自分が何ページ目を見ているのか把握しやすくなります。

アクセシビリティを考えるなら、色だけでなく、太字や背景、枠線など複数の視覚的な違いを付けるとよいです。

5-4. スマホ表示に対応したレスポンシブ調整

スマホでは横幅が狭いため、ページ番号が多いと折り返しやはみ出しが起こることがあります。ページネーションは、スマホ表示を前提に調整しておきましょう。

CSS
@media (max-width: 600px) {
  .pagination .nav-links {
    gap: 6px;
  }

  .pagination .page-numbers {
    min-width: 34px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .pagination .page-numbers.dots {
    display: none;
  }
}

スマホでは、ページ番号をすべて見せるよりも、現在ページの前後や「前へ」「次へ」を優先した方が使いやすい場合があります。mid_sizeやend_sizeを調整して、表示する番号の数を減らすのも有効です。

5-5. 矢印・省略記号・「前へ」「次へ」の表示を変える方法

the_posts_pagination()では、prev_textとnext_textを指定することで、「前へ」「次へ」の表示を変更できます。

PHP
<?php
the_posts_pagination(array(
  'mid_size'  => 1,
  'prev_text' => '← 前へ',
  'next_text' => '次へ →',
));
?>

paginate_links()でも同じように指定できます。

PHP
echo paginate_links(array(
  'total'     => $query->max_num_pages,
  'current'   => $paged,
  'prev_text' => '«',
  'next_text' => '»',
));

矢印だけにするとデザインはすっきりしますが、ユーザーに意味が伝わりにくい場合があります。特にアクセシビリティを重視するなら、「前へ」「次へ」のテキストを含めた方が親切です。

5-6. テーマに合わせたデザイン例

シンプルなメディアサイトであれば、白背景に薄い枠線、現在ページだけ濃い背景にするデザインが使いやすいです。

CSS
.pagination .page-numbers {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}

.pagination .page-numbers.current {
  background: #222;
  color: #fff;
}

コーポレートサイトであれば、ブランドカラーに合わせて現在ページやホバー時の色を変えると統一感が出ます。

CSS
.pagination .page-numbers:hover {
  background: #f5f5f5;
}

.pagination .page-numbers.current {
  background: #0068b7;
  border-color: #0068b7;
  color: #fff;
}

ミニマルなデザインにしたい場合は、枠線をなくし、文字と下線だけで表現する方法もあります。

CSS
.pagination .page-numbers {
  border: none;
  background: transparent;
}

.pagination .page-numbers.current {
  font-weight: bold;
  text-decoration: underline;
}

ページネーションは目立ちすぎても邪魔になりますが、見つけにくいと回遊率が下がります。サイト全体のデザインに合わせつつ、ユーザーが迷わず操作できる見た目にしましょう。

6. プラグインでWordPressページネーションを導入する方法

6-1. プラグインを使うべきケース

プラグインを使ったページネーションは、PHPテンプレートを編集したくない場合や、管理画面から表示形式を調整したい場合に向いています。

たとえば、子テーマを作っていない、テーマファイルを直接編集するのが不安、HTMLやCSSの知識が少ない、短時間でページネーションを整えたい、といった場合はプラグインが便利です。

一方で、すでにテーマにページネーション機能がある場合や、軽量なサイトを目指している場合は、プラグインを増やさず標準関数で実装する方が適していることもあります。

6-2. WP-PageNaviの特徴と使い方

WP-PageNaviは、WordPressのページネーション系プラグインとしてよく知られています。番号付きページネーションを導入しやすく、表示テキストやページ番号の見せ方を調整できます。

基本的な使い方は、プラグインをインストールして有効化し、テーマ内のページネーション表示箇所に専用関数を記述する流れです。テーマによっては、自動的に既存のページネーションと置き換えられる場合もあります。

ただし、テーマ側のテンプレート編集が必要になることもあります。導入前に、現在のテーマがWP-PageNaviに対応しているか、またはテンプレートに関数を追加できる構造か確認しましょう。

6-3. WP-Paginateの特徴と使い方

WP-Paginateも、ページネーションを簡単に追加できるプラグインです。投稿一覧だけでなく、コメントのページネーションに対応できる場合もあります。

管理画面から表示形式やラベルを調整できるため、コードを細かく書かずに見た目を整えたい場合に便利です。

ただし、プラグインのCSSがテーマのデザインと合わない場合は、追加CSSで調整が必要です。導入後は、PC表示とスマホ表示の両方で確認しましょう。

6-4. プラグイン導入時の注意点

ページネーションプラグインを導入するときは、以下の点に注意しましょう。

まず、既存のページネーションと二重表示になっていないか確認します。テーマに標準のページネーションがある場合、プラグインの出力と重複することがあります。

次に、CSSの競合を確認します。プラグインが独自のCSSを読み込む場合、テーマのスタイルとぶつかって表示が崩れることがあります。

また、キャッシュプラグインを利用している場合は、ページネーションのURLや2ページ目以降の表示が正しくキャッシュされているか確認しましょう。表示が変わらない場合は、キャッシュを削除して再確認します。

6-5. プラグインなし実装との違い

プラグインなしで実装する場合は、コードの理解が必要ですが、出力内容を細かく制御できます。不要な機能を追加せずに済むため、軽量に保ちやすいのもメリットです。

プラグインを使う場合は、導入が簡単で管理画面から調整しやすい反面、プラグインの更新や互換性、CSS競合を管理する必要があります。

長期的にサイトを運用するなら、シンプルなページネーションはWordPress標準関数で実装し、特殊な要件がある場合だけプラグインを検討するのがおすすめです。

7. SEOに強いページネーション設計のポイント

7-1. ページネーションがSEOに与える影響

ページネーションは、SEOにも関係します。記事一覧が複数ページに分かれている場合、クローラーが2ページ目以降をたどれる構造になっていないと、古い記事や深い階層の記事が見つかりにくくなる可能性があります。

また、ページネーションによって一覧ページが増えるため、重複コンテンツやcanonical設定にも注意が必要です。Googleはページ分割された各URLを個別のURLとして扱うため、ページごとに適切なURLを持たせることが重要です。Google Search Centralでは、ページ分割されたURLにはそれぞれ固有のURLを持たせ、1ページ目だけをcanonicalに指定しないことが推奨されています。Google for Developers

7-2. 内部リンク構造を改善する考え方

ページネーションは、内部リンクの一部です。1ページ目から2ページ目、3ページ目へリンクがつながることで、クローラーが過去記事へ到達しやすくなります。

特に記事数が多いサイトでは、トップページやカテゴリートップから古い記事までのクリック階層が深くなりがちです。ページネーションを適切に設置すれば、一覧ページを経由して過去記事へたどれる導線を作れます。

ただし、ページ番号が多すぎる場合、すべての番号を表示すると見づらくなります。現在ページの前後、最初のページ、最後のページを適切に表示し、ユーザーとクローラーの両方が移動しやすい構造にしましょう。

7-3. noindex・canonical設定で注意すべきこと

ページネーションページに対して、安易にnoindexを設定するのは注意が必要です。2ページ目以降をすべてnoindexにすると、検索結果には出なくなる一方で、過去記事へのクロール導線が弱くなる可能性があります。

また、2ページ目以降のcanonicalをすべて1ページ目に向ける設定も避けた方がよいです。ページごとに掲載されている記事が異なる場合、それぞれ別の一覧ページとして扱うのが自然です。

Googleのドキュメントでも、noindexは検索結果に表示させないための指定として説明されています。使う場合は「そのページを検索結果に出したくない」という明確な意図があるときに限定しましょう。Google for Developers

7-4. 重複コンテンツを避けるページ分割の考え方

ページネーションで重複コンテンツを避けるには、各ページに異なる記事一覧が表示されるようにすることが重要です。

たとえば、1ページ目と2ページ目で同じ記事が重複して表示されている場合、WP_Queryのpagedやoffsetの指定が間違っている可能性があります。ページごとに異なる記事が表示されるように、クエリを正しく設定しましょう。

また、一覧ページに長すぎる本文を表示すると、個別記事ページとの重複感が強くなることがあります。アーカイブページでは全文ではなく抜粋を表示する、アイキャッチ画像とタイトルを中心にするなど、個別記事ページとの差別化も意識しましょう。

7-5. クロールしやすいURL構造にする方法

WordPressのページネーションURLは、パーマリンク設定によって形式が変わります。一般的には、以下のようなURLになります。

https://example.com/page/2/
https://example.com/category/news/page/2/

検索結果ページでは、以下のようにクエリパラメータが含まれることもあります。

https://example.com/?s=keyword&paged=2

SEOを考えるなら、ページネーションURLが正しくリンクとして出力され、クリックできる状態になっていることが大切です。JavaScriptだけでページを切り替える実装にすると、環境によってはクロールや共有がしにくくなる場合があります。

基本的には、各ページに固有のURLを持たせ、通常のaタグでリンクを出力する設計が望ましいです。

7-6. ユーザビリティとSEOを両立する設計

SEOに強いページネーションは、ユーザーにとっても使いやすいページネーションです。

現在のページがわかる、前後のページへ移動しやすい、スマホでもタップしやすい、リンク先が404にならない、表示速度が重くならない、こうした基本を満たすことが重要です。

また、ページネーションだけに頼るのではなく、カテゴリーナビゲーション、関連記事、サイト内検索、パンくずリストなども組み合わせると、内部リンク構造がより強くなります。

ページネーションは単なる装飾ではなく、ユーザーと検索エンジンの両方にサイト構造を伝える重要なナビゲーションです。

8. ページネーション実装後の確認・テスト方法

8-1. 2ページ目以降が正しく表示されるか確認する

ページネーションを実装したら、まず2ページ目以降が正しく表示されるか確認しましょう。

1ページ目から2ページ目へ移動し、表示される記事が変わっているか確認します。次に、3ページ目、最終ページも確認します。どのページでも同じ記事が表示される場合は、pagedが正しくクエリに渡っていない可能性があります。

また、最終ページで記事数が少なくなるのは正常です。たとえば全23件の記事を10件ずつ表示する場合、3ページ目は3件になります。

8-2. カテゴリー・タグ・検索結果ページで確認する

ページネーションは、トップページだけでなく、カテゴリーページ、タグページ、検索結果ページでも確認しましょう。

カテゴリーページでは、カテゴリーごとに投稿数が異なるため、ページネーションが出るカテゴリーと出ないカテゴリーがあります。投稿数が少ないカテゴリーではページネーションが出なくても問題ありません。

検索結果ページでは、検索キーワードによって総件数が変わります。件数が多いキーワードで検索し、2ページ目以降へ移動できるか確認しましょう。

8-3. スマホ表示で崩れていないか確認する

ページネーションは、スマホでの操作性も重要です。

番号が小さすぎないか、タップしやすい余白があるか、横にはみ出していないか、現在ページがわかりやすいかを確認します。

特にページ番号が多い場合、スマホでは折り返しが発生します。折り返しても見た目が崩れないように、flex-wrap: wrap;を指定しておくと安心です。

8-4. 404エラーやリダイレクトの有無を確認する

2ページ目以降のURLが404になっていないか確認しましょう。

以下のようなURLにアクセスして、正常に表示されるか確認します。

/category/news/page/2/
/page/2/

404になる場合は、パーマリンク設定を保存し直す、カスタム投稿タイプのスラッグを確認する、固定ページとのスラッグ重複を確認する、リダイレクトプラグインの設定を確認する、といった対応が必要です。

また、意図しないURLへリダイレクトされていないかも確認しましょう。SEOプラグインやリダイレクト系プラグインが、ページネーションURLを正規化してしまうことがあります。

8-5. Search Consoleでインデックス状況を確認する

公開後は、Google Search ConsoleでページネーションURLのクロール状況やインデックス状況を確認しましょう。

URL検査を使えば、特定のページネーションURLがGoogleに認識されているか確認できます。また、カバレッジやページのインデックス登録状況を見ることで、noindexやcanonicalの設定ミスに気づける場合があります。

特にSEOプラグインを使っている場合、2ページ目以降に意図せずnoindexが付いていないか確認しておくと安心です。

9. WordPressページネーションに関するよくある質問

9-1. ページネーションと無限スクロールはどちらがよい？

ページネーションと無限スクロールには、それぞれメリットがあります。

ページネーションは、ユーザーが現在位置を把握しやすく、URLを共有しやすいのが特徴です。SEOやサイト構造のわかりやすさを重視する場合にも向いています。

無限スクロールは、SNSのように次々とコンテンツを見せたい場合に適しています。ただし、フッターに到達しにくい、特定の位置を共有しづらい、実装によってはクロールしにくいといった課題があります。

ブログ、メディア、カテゴリーページ、検索結果ページでは、基本的にはページネーションの方が管理しやすく、SEO面でも扱いやすいです。

9-2. 固定ページでページネーションは使える？

固定ページでもページネーションは使えます。

ただし、通常の投稿一覧やカテゴリーページとは異なり、WP_Queryで独自に記事一覧を作ることが多いため、pagedやpageの取得に注意が必要です。

固定ページで実装する場合は、以下のように現在ページを取得します。

PHP
$paged = get_query_var('paged') ? get_query_var('paged') : get_query_var('page');
$paged = $paged ? $paged : 1;

そのうえで、WP_Queryの引数に'paged' => $pagedを指定します。

9-3. カスタム投稿タイプでもページネーションは使える？

カスタム投稿タイプでもページネーションは使えます。

post_typeに対象のカスタム投稿タイプ名を指定し、posts_per_pageとpagedを設定します。

PHP
$args = array(
  'post_type'      => 'works',
  'posts_per_page' => 12,
  'paged'          => $paged,
);

その後、paginate_links()のtotalにカスタムクエリのmax_num_pagesを指定すれば、カスタム投稿タイプの一覧にもページネーションを表示できます。

9-4. ページネーションが2ページ目だけ表示されない原因は？

2ページ目だけ表示されない、または2ページ目が404になる場合は、以下を確認しましょう。

まず、pagedが正しく取得できているか確認します。次に、WP_Queryにpagedを渡しているか確認します。固定ページの場合は、pageも考慮しているか確認します。

さらに、パーマリンク設定を保存し直し、リライトルールを再生成します。カスタム投稿タイプの場合は、スラッグの重複やhas_archiveの設定も確認しましょう。

9-5. プラグインと自作実装はどちらがおすすめ？

シンプルなページネーションであれば、自作実装がおすすめです。WordPress標準関数を使えば、余計なプラグインを増やさずに済み、表示内容も細かく調整できます。

一方、コード編集に不安がある場合や、管理画面から簡単に設定したい場合はプラグインが便利です。

長期的に管理しやすいのは、テーマに合ったシンプルな実装です。既存テーマにページネーション機能がある場合は、まずテーマ標準機能を活用し、不足がある場合に自作やプラグインを検討しましょう。

9-6. ページネーションを非表示にする方法は？

ページネーションを非表示にしたい場合は、テンプレート内のページネーション出力コードを削除するか、コメントアウトします。

PHP
<?php // the_posts_pagination(); ?>

CSSで非表示にする方法もあります。

CSS
.pagination {
  display: none;
}

ただし、CSSで非表示にしてもHTML自体は出力されます。完全に不要な場合は、テンプレートから出力コードを削除した方がよいです。

また、ページネーションを非表示にすると、2ページ目以降の記事へ移動しづらくなります。記事数が多いサイトでは、ユーザーの回遊性やクローラビリティに影響する可能性があるため、非表示にする前に本当に必要ないか検討しましょう。

まとめ

WordPressのページネーションは、投稿一覧やカテゴリーページ、検索結果ページ、カスタム投稿一覧を使いやすくするために欠かせない機能です。記事数が増えたサイトでは、ページ表示の軽量化、ユーザーの回遊性向上、内部リンク構造の改善にも役立ちます。

実装方法としては、the_posts_pagination()を使う方法、paginate_links()で自作する方法、previous_posts_link()とnext_posts_link()で前後リンクを表示する方法、プラグインを使う方法があります。アーカイブページではthe_posts_pagination()、WP_Queryを使ったカスタム一覧ではpaginate_links()を使うと実装しやすいです。

ページネーションが表示されない場合は、投稿数、設置場所、WP_Queryの指定、pagedの取得、固定ページでのpageとの違い、offset、パーマリンク設定、テーマやプラグインの干渉を順番に確認しましょう。

SEOを意識する場合は、2ページ目以降にも固有のURLを持たせ、安易に1ページ目へcanonicalを向けたり、すべてnoindexにしたりしないことが大切です。ユーザーが使いやすく、検索エンジンにもたどりやすいページネーションを設計することで、WordPressサイト全体の品質を高められます。