Web制作

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

2019.11.06

2022.11.24

Written by o-saka

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

やりたいこと

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

設置方法

それでは早速設置方法をご紹介します。特にカスタマイズの必要が無い方はコピペでOKです。

functions.php

function bootstrap_pagination () {
$args = array( 'type' => 'list' );
$paginate = paginate_links( $args );
$replace = [
"<ul class='page-numbers'>" => '<ul class="pagination">',
"<li>" => '<li class="page-item">',
"page-numbers" => 'page-link',
'<li class="page-item"><span aria' => '<li class="page-item active"><span aria',
];
$paginate = str_replace(array_keys($replace), array_values($replace), $paginate);
echo '<nav aria-label="Page navigation">'.$paginate.'</nav>';
}

テーマファイル（index.php、front-page.php、archive.php 、search.phpなど）の設置したい箇所

<?php bootstrap_pagination(); ?>

解説

funtctions.php

1行目

function bootstrap_pagination () {

はユーザー定義関数の指定になります。これをfunctions.phpで指定することで簡単にテーマファイルに指定した関数を呼び出すことができます。今回の場合、テーマファイルに「<?php bootstrap_pagination(); ?>」と記入するだけで、ページネーションが表示されるという仕組みです。名前の通りユーザーが定義するものなので「bootstrap_pagination」の箇所は「bootstrap_pn」「bs_pagination」など、他の関数と重複していなければ自分がわかりやすい任意のものでOKです。

2～3行目

$args = array( 'type' => 'list' );
$paginate = paginate_links( $args );

は、WordPressの「関数 / paginate links」です。極端な話、「<?php echo paginate_links(); ?>」さえ記述すればページネーションは表示されます

ここではまず$args = array( 'type' => 'list' ); で「リストタグ（ul、li）で出力」を指定して、次の行で$paginateに出力するページネーションの内容を格納しています。

4～10行目

$replace = [
"<ul class='page-numbers'>" => '<ul class="pagination">',
"<li>" => '<li class="page-item">', "page-numbers" => 'page-link',
'<li class="page-item"><span aria' => '<li class="page-item active"><span aria',
];
$paginate = str_replace(array_keys($replace), array_values($replace), $paginate);

はPHPのstr_replaceを用いて、出力されたページネーションをbootstrap4の記述に変換して、$paginateに格納しています。

11行目

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

echoでページネーションを出力します。

WordPressの「paginate links」のデフォルトのリスト出力だと、下記のように出力されます。

<ul class='page-numbers'>
<li><span aria-current='page' class='page-numbers current'>1</span></li>
<li><a class='page-numbers' href='【home_url】/page/2/'>2</a></li>
<li><a class='page-numbers' href='【home_url】/page/3/'>3</a></li>
<li><span class="page-numbers dots">&hellip;</span></li>
<li><a class='page-numbers' href='【home_url】/page/10/'>10</a></li>
<li><a class="next page-numbers" href="【home_url】/page/2/">次へ &raquo;</a></li>
</ul>

これをBootstrap4の記述に合わせて下記のように変換して出力するのが4～11行目の記述です。

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item active"><span aria-current='page' class='page-link current'>1</span></li>
<li class="page-item"><a class='page-link' href='【home_url】/page/2/'>2</a></li>
<li class="page-item"><a class='page-link' href='【home_url】/page/3/'>3</a></li>
<li class="page-item"><span class="page-link dots">&hellip;</span></li>
<li class="page-item"><a class='page-link' href='【home_url】/page/10/'>10</a></li>
<li class="page-item"><a class="next page-link" href="【home_url】/page/2/">次へ &raquo;</a></li>
</ul>
</nav>

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

カスタマイズ方法

上記を用いた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>';

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

【Bootstrap4】レスポンシブ表示・非表示の切り替え方法まとめ【Display property】
Bootstrapで良く使うけど忘れがちなCSSスタイルまとめ
Bootstrapをカスタマイズして軽量化する方法

[amazonjs asin=”4815602980″ locale=”JP” title=”本当によくわかるWordPressの教科書改訂2版はじめての人も、挫折した人も、本格サイトが必ず作れる”]