コピペで使えるページネーションです。
多少編集が必要かと思いますが、WordPressでも使えると思います。
まずはデモページをご覧ください。
デモページを見る
HTMLはシンプルにリスト形式です。
HTML
<li><a class="prev" href="#">前へ</a></li>
<li><span aria-current="page">1</span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a class="next" href="#">次へ</a></li>
</ul>
「aria-current=”page”」は現在のページを意味しています。
CSS
.pagination {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 10px
}
.pagination li a,
.pagination li span {
display: block;
color: #333;
padding: 5px 15px;
background-color: #fff;
border: 1px solid #999;
}
.pagination li span {
color: #fff;
background-color: #333;
}
.pagination li a:hover {
color: #fff;
background-color: #333;
}
.pagination li a.prev::before{
font-family: 'Font Awesome 5 Free';
content: "\f053";
font-size: 0.9rem;
padding-right: 10px;
font-weight: 900;
}
.pagination li a.next::after{
font-family: 'Font Awesome 5 Free';
content: "\f054";
font-size: 0.9rem;
padding-left: 10px;
font-weight: 900;
}
「ul class="pagination"」に「display: flex;」を指定し、「li」を横並びにします。
「li」には、枠線を付けたり装飾します。
「前へ」と「次へ」には、「Font Awesome」で矢印アイコンを付けています。
そのため、コードを変更する事で簡単にアイコンを変更する事ができます。
色や余白などは、お好みで変更してください。