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一日一新

ページネーションのデザイン修正

\本を出版しました/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

『独立は最強の解決法』という理念のもと、長期的な視野と絶妙なバランス感覚で人生を楽しむことをサポートする、ひとりビジネス専門税理士。ひとり社長。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『知識・経験ゼロでも独立して人生を楽しむ方法』