投稿一覧ページ（アーカイブページ）は、ワードプレスの管理画面から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;
}と記述することで、消すことができます。
お好きなデザインにアレンジしちゃいましょう！
