WordPress構築でページャーを実装する際、プラグインを使用する方が多いかと思います。しかし、プラグインを使用せずとも簡単にページャーを実装する方法があるのでご紹介します。

プラグインなしでページャーを実装する二つの方法

WordPressには、ページャーを表示する関数が2つ用意されています。
今回、全5ページで現在3ページ目を表示しているという前提で考えます。

the_posts_pagination()関数

the_posts_pagination()関数は、投稿の前と次のページのリンク先を表示する関数です。
この関数を呼び出すだけで、簡単にページャーを実装することができます。

PHPコード

<?php the_posts_pagination(); ?>

ページャーを設置したい場所に上記コードを入力するだけで、下画像のようにページャーを表示できます。

Image from Gyazo

出力結果

下記HTMLは、the_posts_pagination()関数を呼び出した出力結果です。

<nav class="navigation pagination" role="navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2> 
  <div class="nav-links">
  <a class="prev page-numbers" href="/blog/page/2/">前へ</a>
  <a class="page-numbers" href="/blog/">1</a>
  <a class="page-numbers" href="/blog/page/2/">2</a>
  <span aria-current="page" class="page-numbers current">3</span>
  <a class="page-numbers" href="/blog/page/4/">4</a>
  <a class="page-numbers" href="/blog/page/5/">5</a>
  <a class="next page-numbers" href="/blog/page/4/">次へ</a>
  </div>
</nav> 

カスタマイズ

<?php
  $args = array(
    'mid_size' => 1, //現在のページの左右にそれぞれ表示するページ番号の数
    'prev_text' => '&lt;', //前のページへのリンクテキスト
    'next_text' => '&gt;', //後のページへのリンクテキスト
    'screen_reader_text' => ' ', //スクリーンリーダー用のテキスト
    );
    the_posts_pagination( $args );
?>

the_posts_pagination()関数は、引数に配列を入れて出力設定をカスタマイズすることができます。
パラメータは複数ありますが、その中でも使用頻度の高いパラメータについて解説します。

mid_size

mid_sizeは、現在のページの左右にそれぞれ表示するページ番号の数を設定できるパラメータです。
デフォルトの数は2ですが、ページ数が増えてくると下画像のように横に長くなってしまします。故に、値を1に設定することもあるので、mid_sizeパラメータを使用し状況に応じて自由に設定できるようにしましょう。

Image from Gyazo

prev_textとnext_text

prev_textは前のページへのリンクテキスト、next_textは後のページへのリンクテキストを設定できるパラメータです。
デフォルトは日本語になっています。
日本語ではなく矢印に変更する際、「前へ」を「<」に変更するなら「&lt;」、「次へ」を「>」に変更するなら「&gt;」に値を設定すると良いでしょう。

Image from Gyazo

paginate_links()関数

paginate_links()関数もthe_posts_pagination()関数と同様、投稿の前と次のページのリンク先を表示する関数です。

PHPコード

<?php echo paginate_links(); ?>

上記コードで、下画像のように表示されます。
デフォルトで矢印が付与されている以外はthe_posts_pagination()関数とほぼ同じです。

Image from Gyazo

出力結果

<a class="prev page-numbers" href="/blog/page/2/">&laquo; 前へ</a>
<a class="page-numbers" href="/blog/">1</a>
<a class="page-numbers" href="/blog/page/2/">2</a>
<span aria-current="page" class="page-numbers current">3</span>
<a class="page-numbers" href="/blog/page/4/">4</a>
<a class="page-numbers" href="/blog/page/5/">5</a>
<a class="next page-numbers" href="/blog/page/4/">次へ &raquo;</a>

the_posts_pagination()関数との違いはこちらです。

  • 出力する際に「echo」が必要。
  • 「前へ」と「次へ」の部分にデフォルトで矢印が付いている。
  • navタグなど囲いタグがない。
  • デフォルトでスクリーンリーダー用テキストの記述がない。

カスタマイズ

paginate_links()関数もカスタマイズすることができます。

<?php
  $args = array(
    'mid_size' => 1, //現在のページの左右にそれぞれ表示するページ番号の数
    'prev_text' => '&lt;', //前のページへのリンクテキスト
    'next_text' => '&gt', //後のページへのリンクテキスト
  );
  echo paginate_links( $args );
?>

パラメータはthe_posts_pagination()関数の時に使用したものとほぼ同じなので、パラメータの解説は割愛します。

他に設定できるパラメータについて興味のある方は、下記サイトをご覧ください。
関数リファレンス/paginate links

まとめ

以上、プラグインなしでページャーを実装する2つの方法についてご紹介しました。
プラグインに頼らずとも、WordPressの関数を使えばページャーを実装することができます。
紹介した2つの関数の使い方はほぼ同じなので、自分のスタイルに合わせてどちらを使用するか、あらかじめ決めておくと良いでしょう。

参考
関数リファレンス/the posts pagination
関数リファレンス/paginate links