index.phpで、記事一覧の下にあるページネーションをWordPressと連動させます。
1.プラグインを追加する
今回ページネーションは「WP-PageNavi」というプラグインを使用して作成します。
管理画面 > プラグイン > 新規追加の画面を開きます。 右上の検索窓に「WP-PageNavi」と入力してプラグインのインストール＆有効化を行いましょう。
「WP-PageNavi」を出力するタグをBootstrapで組んだページネーション（navタグ）の上に張り付けてみて下さい。
<?php wp_pagenavi(); ?>
index.php
ブラウザで表示を確認しましょう。
元のデザインとは、かけ離れたものが出てきてしまいました。 こちらもヘッダーナビゲーションの時と同じく、プラグインによって書き出されるコードがBootstrapで組んだコードとは違うのでスタイルが全然違う状態になっています。
HTMLで組んだデザインに近付ける設定をしていきましょう。
2.プラグインの設定を変更する
まずは管理画面、プラグインの設定ページで変更できるところを直しましょう。 左端に表示されているページの総数（上記の画像であれば1/13）など必要のないボタンはプラグインの設定で変更することが可能です。
管理画面の設定からPageNaviをクリックして、PageNavi設定の画面を開いてください。
この画面で<?php wp_pagenavi(); ?>で出力する項目をカスタマイズすることが出来ます。
使いやすく、Bootstrapで作ったページに近い形を作るために以下の設定に変更しました。
- 総ページ数用テキスト・・・空にする
- 現在のページ用テキスト・・そのまま
- ページ用テキスト・・・・・そのまま
- 最初のページ用テキスト・・そのまま
- 最後のページ用テキスト・・そのまま
- 前のページ用テキスト・・・空にする
- 次のページ用テキスト・・・空にする
- 「前へ…」用テキスト・・・そのまま
- 「次へ…」用テキスト・・・そのまま
（最初と最後の項目を残したのは、前後ページは数字ボタンで移動できるためです）
最後に入力欄の下にあるページナビゲーション設定の項目で 表示するページ数を「３」に設定し、変更を保存します。
ブラウザで表示を確認すると、不要な項目が消え少しスッキリしました。
プラグインの入力項目について
今回のWP-PageNaviや、次回使うプラグインなどには、設定項目が多くあります。
どこのことかわからない、という項目は「TEST」などに打ち替えて、どこに反映されるのかをご自身で確認してください（※元々の入力されていたものは、テキストエディタ等にコピーして起きましょう）。
よりBootstrapのデザイン(HTML制作部分）に近づけたい場合は、調整してみましょう。
以下のように設定しても良いかもしれませんね。
- 最初のページ用テキスト・・そのまま
- 最後のページ用テキスト・・そのまま
- 前のページ用テキスト・・・Previous
- 次のページ用テキスト・・・Next
- 「前へ…」用テキスト・・・空にする
- 「次へ…」用テキスト・・・空にする
3.style.cssで調整
次に、bootstrapで設定してくれていたスタイルを作成中のstyle.cssに移して割り当てていきます。ブラウザの検証ツールを立ち上げてみて下さい。
Bootstrapページネーションの方を見ていくと、適用されているスタイルが分かります。これを丸ごとコピーして、作成中のstyle.cssに張り付けます。
↓
style.css
このスタイルがPageNaviが出力しているコードに反映されるように、セレクタを変更します。何をセレクタにするのかも検証ツールなどを使って調べてみましょう。
↓
style.css
保存してブラウザをリロードしてみると、完璧とは言えないもののスタイルが反映されていますね。
一つ一つが全幅なのは「display: block;」の影響だな、などあたりを付けて検証ツール上でcssの設定を変えてみて下さい。 無効化した部分、変更した部分はstyle.cssでも修正しましょう。
このような流れで、Bootstrapのページネーションと見合わせながらPageNaviのページネーションにスタイルを付けていきます。マウスを重ねた時の色の変化などもありますね。
Bootstrapでは左右の端が少し角丸になっているなど設定が難しい箇所もあります。 100％忠実に再現できなくても良いですが、デザインが崩れないようにある程度までstyle.cssを使って設定してみて下さい。
cssが完成したら、Bootstrapのページネーション部分のコードは削除します。
index.php
余白が無くなってしまうと思いますので、そこもcssで調整しインデントを整えておきましょう。 これでページネーションの設定は完了です。
Bootstrap風スタイル設定が上手く行かないという方は、下記のコードを参考にしてみてください。
style.css
/* PageNaviの調整 */
.wp-pagenavi {
display: flex;
justify-content: center;
margin: 2.5rem 0;
}
.wp-pagenavi a,
.wp-pagenavi span {
padding: .5rem .75rem;
margin-left: -1px;
color: #007bff;
background-color: #fff;
border: 1px solid #dee2e6;
}
.wp-pagenavi span.current{ /* 現在地 */
color: #fff;
background-color: #007bff;
}
.wp-pagenavi a:hover{
z-index: 2;
color: #0056b3;
text-decoration: none;
background-color: #e9ecef;
border-color: #dee2e6;
}