今回はWordPressを使ったサイトでの「ページネーション」の表示と
そのカスタマイズ方法についてです。
標準の設定
まずは、WordPressに標準で用意されている
ページネーションの表示とその見た目についてです
PHPの記述
<?php the_posts_pagination(); ?>
表示結果
このような表示になります。
見た目はタダのリンク要素のような見た目です
表示されるHTMLを変更する
先程の標準の表示から、HTMLの表示項目をカスタマイズしてみます
<?php the_posts_pagination(array(
'end_size' => 2,
'mid_size' => 2,
'show_all' => false,
'prev_next' => false,
'prev_text' => '',
'next_text' => '',
)); ?>
各オプションを設定することができます。
- end_size：両端に表示するボタンの数
- mid_size：現在のページ番号の両端に表示するボタンの数
- show_all：すべてのページ番号を表示する
- prev_next：｢前へ｣｢次へ｣のボタンの表示の有無
- prev_text：｢前へ｣の部分のテキスト
- next_text：｢次へ｣の部分のテキスト
end_size
両端に表示するボタンの数を指定します。
現在表示しているページを赤文字で表示するようにしました。
現在の選択ページは「3」です。
'end_size' => 2, を指定すると
「NEXT」の前2つのリンク要素が表示されるようになります。
同じように、「PREV」の後2つのリンク要素も表示対象になりますが
今回は元々表示されていた要素のため、見た目に変化はありません。
mid_size
現在のページ番号の両端に表示するボタンの数をしています。
先ほどと同じく、選択ページは「3」です。
'mid_size' => 2, を指定すると
現在表示している「3」の前後…1,2,4,5のリンク要素が表示されるようになります。
show_all
すべてのページ番号を表示します。
先ほどと同じく、選択ページは「3」です。
'show_all' => true, を指定すると
すべてのリンク要素が表示されるようになります。
このオプションは true か false で設定します。
prev_next
｢前へ｣｢次へ｣のボタンの表示の有無を指定します。
‘prev_next’ => false, を指定すると
「前へ」「次へ」のリンク要素が非表示になります。
このオプションは true か false で設定します。
prev_text, next_text
｢前へ｣｢次へ｣のの部分のテキストを指定します。
HTMLの指定もできるので、<i class="fa-solid fa-angles-left"></i>
のように、アイコンなどを仕込むこともできます
CSSで見た目を変える
the_posts_pagination(); で表示したページネーションは
もちろんCSSで見た目を変更することもできます。
