以下で紹介している方法はfunctions.php
を使用しますので、テーマ内にない場合は作成してください。
ページネーションを設置する
まずfunctions.php
に以下を記述します。
functions.php
function pagination( $pages = '', $range = 2 ) {
$showitems = ( $range * 2 )+1;
global $paged;
if ( empty( $paged ) ) $paged = 1;
if ( $pages == '' ) {
global $wp_query;
$pages = $wp_query->max_num_pages;
if ( !$pages ) {
$pages = 1;
}
}
if ( 1 != $pages ) {
echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
if ( $paged > 2 && $paged > $range+1 && $showitems < $pages ) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if ( $paged > 1 && $showitems < $pages ) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
for ( $i=1; $i <= $pages; $i++ ) {
if ( 1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ) ) {
echo ( $paged == $i ) ? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ( $paged < $pages && $showitems < $pages ) echo "<a href=\"" . get_pagenum_link( $paged + 1 ) . "\">Next ›</a>";
if ( $paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages ) echo "<a href='" . get_pagenum_link($pages) . "'>Last »</a>";
echo "</div>\n";
}
}
表示範囲を指定したい場合は、上記コード1行目にあるfunction pagination( $pages = '', $range = 2 )
の部分で変更することができ、今回のコードでは2
に設定しています。
また、idやclass名などを変更したい場合は20行目や28行目などの部分を。
「Previous」や「Next」などの英表記を「前へ」「次へ」といった日本語表記にしたい場合などは、21行目、22行目、32行目、33行目の部分で変更できます。
functions.php
に上記を記述後、ページネーションを設置したい部分に以下を記述します。
<?php
if ( function_exists( "pagination" ) ) {
pagination( $additional_loop->max_num_pages );
}
?>
上記を記述することで下記のようなコードが出力されますので、あとはCSSで見栄えを整えて設置完了となります。
下記コードは、全7ページ中4ページ目にいる場合に出力されているものです。
実際には1行で出力されますが、見やすいように改行を入れています。
HTML
<div class="pagination">
<span>Page 4 of 7</span>
<a href="http://www.example.com/blog/">« First</a>
<a href="http://www.example.com/blog/page/3">‹ Previous</a>
<a class="inactive" href="http://www.example.com/blog/page/2">2</a>
<a class="inactive" href="http://www.example.com/blog/page/3">3</a>
<span class="current">4</span>
<a class="inactive" href="http://www.example.com/blog/page/5">5</a>
<a class="inactive" href="http://www.example.com/blog/page/6">6</a>
<a href="http://www.example.com/blog/page/5">Next ›</a>
<a href="http://www.example.com/blog/page/7">Last »</a>
</div>
ページネーションのスタイル例
CSSを使ったページネーションのスタイル例を幾つか紹介します。
上で紹介したものと合わせて記述すればそのまま使用できますので、同じ見栄えを実装したい場合はCSSにそのままコピペしてください。
見た目はこんな感じで色を変更したい場合は、background
、border
、color
あたりを調整してみてください。
各画像は現在4ページ目を見ており、「Previous」にマウスオーバーしたときをキャプチャしたものです。
ソース元で紹介されているスタイル

CSS
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
}
.pagination span, .pagination a {
display: block;
float: left;
width: auto;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
background: #555;
color:#fff;
text-decoration: none;
}
.pagination a:hover {
background: #3279bb;
color: #fff;
}
.pagination .current {
padding: 6px 9px 5px 9px;
background: #3279bb;
color: #fff;
}
※font-size
とline-height
は変更しています。
どこでも使えそうなシンプルなスタイル

CSS
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
}
.pagination span, .pagination a {
display: block;
float: left;
width: auto;
margin: 2px 2px 2px 0;
padding: 5px 9px 5px 9px;
background-color: #fff;
color: #555;
text-decoration: none;
}
.pagination a {
border: 1px solid #ccc;
}
.pagination a:hover {
background-color: #ccc;
border: 1px solid #ccc;
color: #fff;
}
.pagination .current {
padding: 5px 9px 5px 9px;
background-color: #ccc;
border: 1px solid #ccc;
color: #fff;
}
Googleスタイル

CSS
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
}
.pagination span, .pagination a {
display: block;
float: left;
width: auto;
color: #1122cc;
text-decoration: none;
}
.pagination a {
margin-left: 10px;
}
.pagination a:hover{
text-decoration: underline;
}
.pagination .current {
margin-left: 10px;
color: #222;
font-weight: bold;
}
Flickrスタイル

CSS
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
}
.pagination span, .pagination a {
display: block;
float: left;
width: auto;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
background-color: #fff;
border: 1px solid #eee;
color: #0063dc;
text-decoration: none;
}
.pagination a:hover {
background-color: #0063dc;
color: #fff;
}
.pagination .current {
padding: 6px 9px 5px 9px;
color: #ff0084;
font-weight: bold;
}
border-radius(角丸)を使用したスタイル

CSS
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
}
.pagination span, .pagination a {
display: block;
float: left;
width: auto;
margin: 2px 5px 2px 0;
padding: 5px 10px 6px 10px;
background-color: #eee;
border: 1px solid #bbb;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
color: #333;
text-decoration: none;
}
.pagination a:hover {
background-color: #fff;
}
.pagination .current{
background-color: #fff;
font-weight: bold;
}
※IEなどの非対応ブラウザ有
linear-gradient(グラデーション)を使用したスタイル

CSS
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
}
.pagination a {
padding:5px 10px 6px 10px;
background-color: #eee;
background-color: #f9f9f9;
background-image: -webkit-linear-gradient(top, #f9f9f9, #eaeaea);
background-image: -moz-linear-gradient(top, #f9f9f9, #eaeaea);
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.pagination a:hover {
background-color: #efefef;
background-image: -webkit-linear-gradient(top, #eaeaea, #f9f9f9);
background-image: -moz-linear-gradient(top, #eaeaea, #f9f9f9);
}
.pagination .current {
padding:5px 10px 6px 10px;
background-color: #444;
background-image: -webkit-linear-gradient(top, #444, #555);
background-image: -moz-linear-gradient(top, #444, #555);
border: 1px solid #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
}
※IEなどの非対応ブラウザ有