WordPressのページネーションをプラグインなし、シンプルなデザインで実装。
この記事は、当サイトの作成用の（メモ）です。
参考になる方はどうぞ。
参考：出力されるコード
<div class="pagenation">
<ul>
<li class="prev"><a href="....">Prev</a></li>
<li><a href="....">1</a></li>
<li><a href="....">2</a></li>
<li><a href="....">3</a></li>
<li class="active">4</li>
<li><a href="....">5</a></li>
<li class="next"><a href="....">Next</a></li>
</ul>
</div>
functions.php
//Pagenation
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=\"pagenation\">\n";
echo "<ul>\n";
//Prev：現在のページ値が１より大きい場合は表示
if($paged > 1) echo "<li class=\"prev\"><a href='".get_pagenum_link($paged - 1)."'>Prev</a></li>\n";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
//三項演算子での条件分岐
echo ($paged == $i)? "<li class=\"active\">".$i."</li>\n":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>\n";
}
}
//Next：総ページ数より現在のページ値が小さい場合は表示
if ($paged < $pages) echo "<li class=\"next\"><a href=\"".get_pagenum_link($paged + 1)."\">Next</a></li>\n";
echo "</ul>\n";
echo "</div>\n";
}
}
ページネーション出力
<?php
//Pagenation
if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
}
?>
CSS
/*--------Pagenation----------------*/
.pagenation {
margin: 1em 0;
}
.pagenation:after, .pagenation ul:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.pagenation ul {
margin: 0;
}
.pagenation li {
float: left;
list-style: none outside none;
margin-left: 3px;
}
.pagenation li:first-child {
margin-left: 0;
}
.pagenation li.active {
background-color: #999999;
border-radius: 3px;
color: #FFFFFF;
cursor: not-allowed;
padding: 10px 20px;
}
.pagenation li a {
background: none repeat scroll 0 0 #CCCCCC;
border-radius: 3px;
color: #FFFFFF;
display: block;
padding: 10px 20px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
background-color: #444444;
color: #FFFFFF;
opacity: 0.8;
transition-duration: 500ms;
transition-property: all;
transition-timing-function: ease;
}
