WordPressのページネーションの作り方

WordPressでサイト作成をする場合、ページネーションが必要になることは多いと思います。そんなページネーションの作り方メモです。

the_posts_pagination でページネーションを出力

WordPressではページネーションを簡単に出力してくれる the_posts_pagination() というテンプレートタグが用意されています。

the_posts_pagination() はページ番号と「前へ」「次へ」といったページ送りリンクを出力します。

このコードを記載するだけでページネーションの機能をつけることができます。

<ul>
  <?php while(have_posts()): the_post(); ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>
<!-- ページネーション -->
<?php the_posts_pagination(); ?>

the_posts_pagination の出力内容

出力されるHTMLは以下のようなものです。(以下のコードは1ページ目の場合)

<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="カテゴリーまでのパス/page/2/">2</a>
    <a class="next page-numbers" href="カテゴリーまでのパス/page/2/">次へ</a>
  </div>
</nav>
<h2 class="screen-reader-text">投稿ナビゲーション</h2>

この部分はスクリーンリーダー用のテキストです。元々表示されないようにCSSが当てられていますので気にならないかと思いますが、アクセシビリティとして必要なものです。
分かりやすい別のテキストに変更するならいいと思うのですが、出力させるマークアップをすっきりさせる目的での削除はしない方が良いでしょう。

デフォルトではテキストがそのまま横並びに表示されるだけです。テキストの間隔を調整したり現在のページをわかりやすくしたりなど、スタイルを当てたい場合は出力されるクラスを元にCSSでデザインを作っていきます。

出力内容をカスタマイズする

the_posts_pagination() で出力する内容をカスタマイズすることもできます。パラメーターはデフォルトで以下のものが設定されています。

※WordPress6.3 のコードで確認。WordPressを日本語にしている場合は Previous や Next などは日本語に翻訳されます。

'base'               => $pagenum_link, // http://example.com/all_posts.php%_% : %_% is replaced by format (below).
'format'             => $format, // ?page=%#% : %#% is replaced by the page number.
'total'              => $total,
'current'            => $current,
'aria_current'       => 'page',
'show_all'           => false,
'prev_next'          => true,
'prev_text'          => __( '« Previous' ),
'next_text'          => __( 'Next »' ),
'end_size'           => 1,
'mid_size'           => 2,
'type'               => 'plain',
'add_args'           => array(), // Array of query args to add.
'add_fragment'       => '',
'before_page_number' => '',
'after_page_number'  => '',

「前へ」「次へ」のテキスト表示

「前へ」「次へ」のテキストを変更したい場合は以下のように記述します。

<?php
  the_posts_pagination(
    array(
      'prev_text' => '<',
      'next_text' => '>',
    );
  );
?>

テキストだけでなくhtmlタグの記述もOKで、画像やアイコンテキストなどを使用したい場合にも使えます。

<?php
  the_posts_pagination(
    array(
      'prev_text' => '<img src="画像パス" alt="<" width="24" height="24">',
      'next_text' => '<img src="画像パス" alt=">" width="24" height="24">',
    );
  );
?>

ページネーションを番号だけの表示にすることもできます。 'prev_next' => false, にすると前後への移動ボタンが表示されなくなります。

フィルターフックで出力されるHTML全体を変更

funcsitons.php にコードを追加して全体のHTMLを変更することもできます。

例えばページネーション全体を囲っているnavタグやページネーションのリンク部分を囲っているクラスを変更、スクリーンリーダー用のテキストやそれを囲むタグを変更する場合はこちら。

function custom_pagination( $template ) {
  $template = '
  <nav class="%1$s custom_pagination" aria-label="%4$s">
      <p class="screen-reader-text">%2$s</p>
      <div class="my_nav_links">%3$s</div>
  </nav>';
  return $template;
}
add_filter('navigation_markup_template','custom_pagination');

%1$s%2$s というのはフォーマット文字列で、以下のものが使用されています。

%1$sナビゲーションクラス
(pagination)
%2$sスクリーンリーダー用テキスト
(投稿ナビゲーション)
%3$sページネーションのHTMLコード
%4$saria-label属性の値
(投稿)

【PR】

プログラミング言語の人気オンラインコース

the_posts_navigation でページネーションを出力

the_posts_navigation() はページ番号は生成されず、前後のページ送りリンクを出力します。デフォルトのテキストは「過去の投稿」「新しい投稿」です。

【the_posts_navigation で出力されるHTML】(以下のコードは2ページ目の場合)

<nav class="navigation posts-navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <div class="nav-previous"><a href="カテゴリーまでのパス/page/3/">過去の投稿</a></div>
    <div class="nav-next"><a href="カテゴリーまでのパス/">新しい投稿</a></div>
  </div>
</nav>

出力内容をカスタマイズする

the_posts_navigation() で出力する内容をカスタマイズすることもできます。パラメーターはデフォルトで以下のものが設定されています。

※WordPress6.3 のコードで確認。WordPressの言語を日本語にしている場合は翻訳されます。

'prev_text'          => __( 'Older posts' ),
'next_text'          => __( 'Newer posts' ),
'screen_reader_text' => __( 'Posts navigation' ),
'aria_label'         => __( 'Posts' ),
'class'              => 'posts-navigation',

表示されるテキストやスクリーンリーダーテキスト、navタグのクラスとarea-label属性のテキストを変更することができます。

the_posts_navigation() の「posts」部分が「post」になった the_post_navigation() というテンプレートタグもあります。こちらは記事ページで前後の記事のリンクを表示させることができる関数です。

previous_posts_link, next_posts_link でページネーションを出力

the_posts_navigation() だと調整がしづらい…という場合に活用できるのが、previous_posts_link()next_posts_link() です。

<ul>
  <?php while(have_posts()): the_post(); ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>
<!-- ページネーション -->
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?>

【previous_posts_link と next_posts_link で出力されるHTML】(以下のコードは2ページ目の場合)

<a href="カテゴリーまでのパス">前のページへ</a>
<a href="カテゴリーまでのパス/page/3/">次のページへ</a>

これらのコードは the_posts_navigation() とは違ってそれぞれ「前のページへ」「次のページへ」というリンクテキストのみ出力されます。
そのためその他のHTMLコードを自分の思い通りにマークアップしやすいのが使用するメリットです。

ページネーションのスタイルによって使い分けていきましょう。

ページネーションが表示されない?

記事が1ページの表示件数に満たない場合はこのテンプレートタグを記述してもページネーションは表示されません。
例えば投稿設定で10件の表示にしているなら10件以上あった場合にページネーションが出力されます。

一覧のページネーションで2ページ以降「ページが見つかりません」になる

1ページ目は問題なく表示されるのに、ページネーションのリンクをクリックすると「ページが見つかりません」いわゆる404エラーになってしまうことがあります。私の場合、カテゴリー一覧ではなく別ページへ飛ばされてしまうこともありました。

私がこの状態になった時の設定環境で対処法をご紹介します。もし同じような条件の場合参考にしてみてください。

【パーマリンク設定とアクセスURL】

  • パーマリンク設定を /%category%/%postname%/
  • カテゴリー一覧ページのアクセスは //example.local/uncategorized/

この状態でページネーションのリンクをクリックすると、リンク先は //example.local/uncategorized/page/2/ になります。しかしこの設定でこのURLだと404になってしまいます。

正しく表示させるためには //example.local/category/uncategorized/page/2/ というURLでアクセスする必要があります。

the_posts_pagination() で出力されるリンクはアクセスしているURLに /page/ページ番号/ を追加したものになっているため、必ずしもアクセスできるURLではないことがあります。

この場合の解決法として以下の方法があります。

  • 一覧ページのアクセスリンクを //example.local/category/uncategorized/ にする。
  • /cateogry/ の部分をなくす。

カテゴリー : WordPress

TOPへ