WordPressテーマにシンプルなページネーション（ページ送り）を実装するカスタマイズ方法です。
当ブログと同じ見た目で良ければ、2回のコピペで完了します。
目次
index.phpにコードを記述
テーマのindex.phpに以下のコードを追加します。
追加する位置は、index.phpのループ終了後(<?php endwhile; endif; ?>の後)であればどこでも大丈夫です。
<!--ページネーション-->
<div class="pagination">
<?php echo paginate_links( array(
'type' => 'list',
'mid_size' => '1',
'prev_text' => '<i class="fas fa-angle-left"></i>',
'next_text' => '<i class="fas fa-angle-right"></i>'
) ); ?>
</div>「mid_size」のところで現在のページ番号の両隣に、何個ずつの数字を表示するかを指定しています。
「1」という数字の部分を変えれば、表示する個数を変えることができます。
「前へ」「次へ」を表す部分はFont Awesomeのアイコンを使っています。
Font Awesomeの使い方はこちらの記事がわかりやすいです。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
style.cssにコードを記述
cssでデザインを整えます。
お使いのテーマのstyle.cssに以下のコードを追加してください。
/* ページネーション */
.pagination {
margin: 2rem 0;
text-align: right;
margin-right: 10%;
}
.pagination ul {
font-size: 0;
}
.pagination ul li {
font-size: 1.2rem;
display: inline-block;
margin: 0;
width: 2rem;
height: 3rem;
border: none;
line-height: 2rem;
color: #666666;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
font-style: italic;
text-align: center;
font-weight: 300;
}
.pagination ul li:last-child {
border: 0;
}
.pagination .current {
display: block;
padding: .4rem;
border-bottom: solid 1px #111;
max-width: 5px;
color: #333333;
}
.pagination ul li .prev,
.pagination ul li .next {
border: 0;
}
.pagination ul li a {
text-decoration: none;
color: #666;
border: none;
transition: ease-in-out, .2s;
display: block;
padding: .4rem;
max-width: 5px;
white-space: nowrap;
}
.pagination ul li a:hover {
opacity: .6;
}
.pagination .fa-angle-right:before,.pagination .fa-angle-left:before {
color: #999999;
}
/* スマホ表示 */
@media (max-width:599px) {
.pagination {
margin-right: 0;
}
.pagination ul li {
font-size: 1rem;
width: 1.5rem;
}
}かなりシンプルなデザインですが、現在のページの数字の色を少しだけ濃くし、下線を引くことで現在のページがわかるようになっています。
フォントはGoogle Fontsを使い、イタリックにすることで地味になりすぎないようにしています。
（Google Fontsを使うために事前にコードの記述が必要です。）
余白などはお好みで変えていただければと思います。
「ページネーション」というと数字を丸や四角で囲ったデザインが多いですが、下線だけのデザインは少ないので人と被りたくない方にもおすすめです。
シンプル・ミニマルなデザインのブログにはマッチするかと思います。
サービスメニュー
Postscript執筆後記
自分のブログのページネーションのデザインが崩れていたので、修正したついでに記事を書きました。たまにはコードをいじらないとやり方を忘れてしまいますね…
Something New一日一新
ページネーションのデザイン修正＼本を出版しました／
＼セルフマガジン無料送付／
