
WordPressで簡単、プラグインなしでページネーション設置方法。
2018.04.28
カテゴリ:WEB制作
タグ:

Wordpressでサイト制作時には導入することが多いページネーション導入方法です。
「ページネーション 設置」などで検索しているとfunctions.phpを触るものなどがかなりたくさん出てきますが、Wordpressの関数があるので数行で簡単に表示可能です。
また、表示のカスタマイズも可能です。
細かい説明は省きますのでコピペして使ってください。
「ページネーション 設置」などで検索しているとfunctions.phpを触るものなどがかなりたくさん出てきますが、Wordpressの関数があるので数行で簡単に表示可能です。
また、表示のカスタマイズも可能です。
細かい説明は省きますのでコピペして使ってください。
コードについて
下記コードです。
ループの外に下記を設置してください。
「prev_text」「next_text」が矢印になります。表示をカスタマイズしたい場合は書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="pagination"> <?php $big = 9999999999; $arg = array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => 'page/%#%/', 'current' => max(1, $paged), 'prev_text' => '<i class="fa fa-angle-left"></i>', 'next_text' => '<i class="fa fa-angle-right"></i>' ); echo paginate_links($arg); ?> </div> |
上記にはfontawesomeのアイコンが入っていますので下記をheadタグの中に埋め込んでください。
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
出力されるHTML
出力されるコードは下記になります。
1 2 3 4 5 6 7 8 |
<div class="pagination"> <span aria-current='page' class='page-numbers current'>1</span> <a class='page-numbers' href='◯◯◯◯◯'>2</a> <a class='page-numbers' href='◯◯◯◯◯'>3</a> <span class="page-numbers dots">…</span> <a class='page-numbers' href='◯◯◯◯◯'>6</a> <a class="next page-numbers" href="◯◯◯◯◯"><i class="fa fa-angle-right"></i></a> </div> |
CSSでカスタマイズ

上のスタイルは下記になります。
必要に応じてスタイルを書き換えてください。
必要に応じてスタイルを書き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.pagination { margin: 60px auto 90px; padding: 10px 0; text-align: center } .pagination a { font-size: 9pt; line-height: 35px; text-align: center; letter-spacing: 0; display: inline-block; height: 35px; width: 35px; border-radius: 50%; background: #f3f3f3; transition: .3s } .pagination a:hover { color: #FFF; background: #323232; } .pagination span { font-size: 9pt; line-height: 35px; text-align: center; letter-spacing: 0; display: inline-block; height: 35px; width: 35px; border-radius: 50%; background: #f3f3f3 } .pagination span.dots { background: 0 } .pagination span.current { background: #323232; color: #fff } |
以上で、ページネーションの設置とカスタマイズが可能です。
必要なところに今回のコードを書くだけです。