WordPress構築でページャーを実装する際、プラグインを使用する方が多いかと思います。しかし、プラグインを使用せずとも簡単にページャーを実装する方法があるのでご紹介します。
コンテンツ
プラグインなしでページャーを実装する二つの方法
WordPressには、ページャーを表示する関数が２つ用意されています。
今回、全５ページで現在３ページ目を表示しているという前提で考えます。
the_posts_pagination()関数
the_posts_pagination()関数は、投稿の前と次のページのリンク先を表示する関数です。
この関数を呼び出すだけで、簡単にページャーを実装することができます。
PHPコード
<?php the_posts_pagination(); ?>
ページャーを設置したい場所に上記コードを入力するだけで、下画像のようにページャーを表示できます。
出力結果
下記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' => '<', //前のページへのリンクテキスト
'next_text' => '>', //後のページへのリンクテキスト
'screen_reader_text' => ' ', //スクリーンリーダー用のテキスト
);
the_posts_pagination( $args );
?>
the_posts_pagination()関数は、引数に配列を入れて出力設定をカスタマイズすることができます。
パラメータは複数ありますが、その中でも使用頻度の高いパラメータについて解説します。
mid_size
mid_sizeは、現在のページの左右にそれぞれ表示するページ番号の数を設定できるパラメータです。
デフォルトの数は２ですが、ページ数が増えてくると下画像のように横に長くなってしまします。故に、値を１に設定することもあるので、mid_sizeパラメータを使用し状況に応じて自由に設定できるようにしましょう。
prev_textとnext_text
prev_textは前のページへのリンクテキスト、next_textは後のページへのリンクテキストを設定できるパラメータです。
デフォルトは日本語になっています。
日本語ではなく矢印に変更する際、「前へ」を「<」に変更するなら「<」、「次へ」を「>」に変更するなら「>」に値を設定すると良いでしょう。
paginate_links()関数
paginate_links()関数もthe_posts_pagination()関数と同様、投稿の前と次のページのリンク先を表示する関数です。
PHPコード
<?php echo paginate_links(); ?>
上記コードで、下画像のように表示されます。
デフォルトで矢印が付与されている以外はthe_posts_pagination()関数とほぼ同じです。
出力結果
<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>
the_posts_pagination()関数との違いはこちらです。
- 出力する際に「echo」が必要。
- 「前へ」と「次へ」の部分にデフォルトで矢印が付いている。
- navタグなど囲いタグがない。
- デフォルトでスクリーンリーダー用テキストの記述がない。
カスタマイズ
paginate_links()関数もカスタマイズすることができます。
<?php $args = array( 'mid_size' => 1, //現在のページの左右にそれぞれ表示するページ番号の数 'prev_text' => '<', //前のページへのリンクテキスト 'next_text' => '>', //後のページへのリンクテキスト ); echo paginate_links( $args ); ?>
パラメータはthe_posts_pagination()関数の時に使用したものとほぼ同じなので、パラメータの解説は割愛します。
他に設定できるパラメータについて興味のある方は、下記サイトをご覧ください。
関数リファレンス/paginate links
まとめ
以上、プラグインなしでページャーを実装する２つの方法についてご紹介しました。
プラグインに頼らずとも、WordPressの関数を使えばページャーを実装することができます。
紹介した２つの関数の使い方はほぼ同じなので、自分のスタイルに合わせてどちらを使用するか、あらかじめ決めておくと良いでしょう。
