【コピペOK】WordPressにBootstrap4のページネーションを設置する方法【プラグイン無し・解説有り】

Bootstrap4を使用してWordPressテーマを構築する際に、Bootstrap4の「Pagenation」をプラグインを使用せずに設置する方法をご紹介します。コピペするだけで簡単に設置できますので是非ご活用ください。解説もあります。当ブログでもBootstrap4を使用していますので、この方法を用いてページネーションを表示させています。

  • Bootstrap4を使用してWordPressテーマを構築している方
  • WordPressテーマにページネーションを設置したい方
  • WordPressのテーマ作成・カスタマイズについて学びたい方

やりたいこと

WordPressのトップページやアーカイブページに、下記のようなBootstrap4のページネーションを設置します。

以上で解説を終わります。

カスタマイズ方法

上記を用いたbootstrap4ページネーションのカスタマイズ方法をご紹介します。

デフォルト

最初と最後のページに表示されるページ番号の数を変更する

2行目を下記のように変更します。デフォルトは「1」。

$args = array( 'type' => 'list', 'end_size' => 3 );

現在のページ番号の両側に表示されるページ番号の数を変更する

2行目を下記のように変更します。デフォルトは「2」。

$args = array( 'type' => 'list', 'mid_size' => 1 );

全てのページ番号を表示する

2行目を下記のように変更します。デフォルトは「false」。

$args = array( 'type' => 'list', 'show_all' => true );

「前へ」「次へ」のボタン表記を変更する

2行目を下記のように変更します。内容は任意で。デフォルトは「« 前へ」、「次へ »」。

$args = array( 'type' => 'list' , 'prev_text' => __('前へ戻る') , 'next_text' => __('次へ進む') );

「前へ」「次へ」のボタンを非表示にする

2行目を下記のように変更します。デフォルトは「true」。

$args = array( 'type' => 'list' , 'prev_next' => false );

ページ番号の前後に文字を付け加える

2行目を下記のように変更します。内容は任意で。デフォルトは「なし」。

$args = array( 'type' => 'list' , 'before_page_number' => 'No.' , 'after_page_number' => '番' );

ボタンのサイズを変更する

5行目を下記のように変更します。大きくする場合。

"<ul class='page-numbers'>" => '<ul class="pagination pagination-lg">',

小さくする場合。

"<ul class='page-numbers'>" => '<ul class="pagination pagination-sm">',

ボタンの色を変更する

7行目を下記のように変更、追記します。下記は一例。

"page-numbers" => 'page-link text-white bg-info border-warning',
"current" => 'border-danger text-danger bg-white',

bootstrap4のカラー指定方法

bootstrap4での色の指定は下記のよう指定することができます。

文字色
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
背景色
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
罫線
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white

レスポンシブに対応する

11行目を下記のように変更します。bootstrap4の「.overflow-auto」を追加することで、横幅がページネーションより小さい場合に、はみ出した部分がスクロール表示になります。

echo '<nav aria-label="Page navigation" class="overflow-auto">'.$paginate.'</nav>';

いかがでしたでしょうか。プラグイン無しでもコピペで簡単に設置できますので是非お試しください。

関連記事