初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
WordPress

【WordPress】ページャー(ページネーション)の実装方法【paginate_links】

【WordPress】ページャー アーカイブページにページャーを設置しよう!

投稿一覧ページ(アーカイブページ)は、ワードプレスの管理画面から1ページの最大投稿表示件数を設定することができます。

設定した件数に対して、その件数を超える記事が存在する時、ページャーを実装しないと次のページへ行くことができません

せっかく苦労して作成した記事、古いものまでしっかり見てもらいましょう!

コードのコピー方法

コード右上のアイコンをクリックすることでコピーできます。

それでは本文へ、レッツゴー!

ページャーのサンプルコード

ページャーを設置したい箇所に、下記をコピペすることで実装することができます。

<?php echo paginate_links( array (
    'type' => 'plain',
    'mid_size' => 1,
    'prev_next' => true,
    'prev_text' => '前へ',
    'next_text' => '次へ'
)); ?>

実際の記事件数が設定した件数に満たない場合、ページャーは自動的に出力を控えてくれます
えらい!

それでは、細かい設定を見ていきましょう。

typeで出力されるHTMLのタグが変わる

typeには3種類あります。

  • plain
  • list
  • array

シンプルな構造で出力されるplain

現在のページはspanタグ、他はaタグで囲まれただけの状態で出力されます。

14ページ中、4ページ目を見ている時、HTMLではこのように出力されます。

<a class="prev page-numbers" href="URL/page/3/">前へ</a>
<a class="page-numbers" href="URL/">1</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="URL/page/3/">3</a>
<span aria-current="page" class="page-numbers current">4</span>
<a class="page-numbers" href="URL/page/5/">5</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="URL/page/14/">14</a>
<a class="next page-numbers" href="URL/page/5/">次へ</a>

リスト形式で出力されるlist

先ほどのplainがさらに、ulタグとliタグで囲まれた状態で出力されます。

同じ条件で出力されるHTMLを確認するとこんな感じになります。

<ul class='page-numbers'>
	<li><a class="prev page-numbers" href="URL/page/3/">前へ</a></li>
	<li><a class="page-numbers" href="URL/">1</a></li>
	<li><span class="page-numbers dots">…</span></li>
	<li><a class="page-numbers" href="URL/page/3/">3</a></li>
	<li><span aria-current="page" class="page-numbers current">4</span></li>
	<li><a class="page-numbers" href="URL/page/5/">5</a></li>
	<li><span class="page-numbers dots">…</span></li>
	<li><a class="page-numbers" href="URL/page/14/">14</a></li>
	<li><a class="next page-numbers" href="URL/page/5/">次へ</a></li>
</ul>

カスタマイズが自由にできるarray

arrayは少しややこしいのと、正直plainとlistで事足りるので今回は割愛します。

mid_sizeで表示されるページの件数を調整

mid_sizeは、現在のページの両サイドに出てくるページの数を設定できます。

mid_sizeを1にすると、
前へ 1 … 3 4 5 … 14 次へ

mid_sizeを2にすると、
前へ 1 2 3 4 5 6 … 14 次へ

といった感じになります。

prev_nextでページャー両サイドに「前へ」「次へ」を設置

prev_next を true にすることで、両サイドに「前へ」「次へ」のリンクが設置されます。
「前へ」と「次へ」のテキストは、prev_text と next_text で編集することができます。

prev_next を falseにすると両サイドのリンクは消えます
そのためprev_text と next_text も実質不要になるため、falseの場合この2行は消してしまっても問題ありません。

ページャーのデザインを変更する

ページャーは出力の際、既にクラスが付与された状態で出力されます。
そのため、普通にCSSでデザインを変更することができます。

例えば数字の数字のに出てくる「…」を消したいのであれば、

.page-numbers.dots {
    display: none;
}

と記述することで、消すことができます。

お好きなデザインにアレンジしちゃいましょう!