ページネーションを実装してみよう！|ためになるWordPressブログ

こんにちは。ページネーションというのはこれですね。

投稿の一覧や検索結果ページなどにあるページを表示するやつです。

このページネーションを実装するには

the_posts_pagination()

というWordPress関数を使います。

それでは実装する方法を見ていきましょう！

the_posts_pagination()とは
the_posts_pagination()でできること
the_posts_pagination()の実装方法
まとめ

the_posts_pagination()とは

ではthe_posts_pagination()の使い方ですがWordPress Codexにはこうあります。

投稿ページネーション関数は投稿の前と次のページへリンクするページ番号のセットを出力します。投稿リスト（index.php など）やアーカイブ（archive.php など）で使われます。
the_posts_pagination() – WordPress Codex

このようにページ番号とリンクを出力する関数です。

そこで一つ注意していただきたいのがこのthe_posts_pagination()はメインループのみで機能する関数となります。

詳しい説明は省きますが、ページ内にループが複数ある場合、WordPressでいうメインループで作動するということです。
サブループでページネーションを追加するにはより複雑な設定が必要になります。

とはいえ記事一覧ページや検索結果ページでは基本的にメインループのみ使用することなりますのでそう問題はないでしょう。

the_posts_pagination()でできること

the_posts_pagination()では前述のとおりページネーションを出力しますがその機能としていくつか設定できます。

現在のページの左右に表示するページ番号の数を設定できる。
「Next」や「>」など前や次へ進むリンクを設定できる。
スクリーンリーダー用テキスト(読み上げ用テキスト)を設定できる。

これらのことがthe_posts_pagination()ではパラメータとして設定できます。

the_posts_pagination()の実装方法

ではthe_posts_pagination()を使ってページネーションを実装してみましょう。

the_posts_pagination()ではパラメータを配列で指定しますので、この例ではまず$argsという変数を作って中身に配列を入れます。

WordPress Codexにあるとおり、the_posts_pagination()で設定できる配列は

mid_size
prev_text
next_text
screen_reader_text

の４つです。

使い方はWordPress Codexより引用します。

・mid_size (整数) – 現在のページの左右にそれぞれ表示するページ番号の数。デフォルトは1。
・prev_text (文字列) – 投稿の前のセットへのリンクテキスト。デフォルトは「Previous」。
・next_text (文字列) – 投稿の次のセットへのリンクテキスト。デフォルトは「Next」。
・screen_reader_text (文字列) – スクリーンリーダー用テキスト。デフォルトは「Posts navigation」。
the_posts_pagination()- WordPress Codex

ではこれを踏まえてコードを見てみましょう。

<?php
  $args = array(
      'mid-size' => 1,
      'prev_text' => '«',
      'next_text' => '»',
      'screen_reader_text' => 'ページナビゲーション'
  );
  the_posts_pagination($args); ?>

こんな感じでコードを書くとこのように表示されます。
(CSSは省略しています。)