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

WordPress

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

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

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

the_posts_pagination()

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

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

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

の4つです。

使い方は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は省略しています。)

pagination image

mid-sizeは”1″で指定しいますので1ページ目を表示しているこの状態では隣の2ページ目までしか表示されません。
それ以上のページについてはnext_textで設定した”>>”が表示されています。

mid-sizeについてはWordPress側の設定でデフォルトが”1″なので「’mid-size’ => 1,」については実際は書く必要がないですね。

まとめ

いかがでしたでしょうか。

検索結果ページについてはページネーションが事実上必須になるので必ず実装できるようにしておきましょう。
検索フォームの設置については以下の記事も参考にどうぞ。

コメント

タイトルとURLをコピーしました