前のバージョンだと「<< 次の記事 – 前の記事 >>」な感じだったのですが、ページ総数が分からないといった不便さがありました。なので、ページ番号を表示させるよう、コリスさんの記事を参考に改造しました。
ページネーションのコードを変更
/* 変更前 */
<?php posts_nav_link(); ?>
/* 変更後 */
<?php if (function_exists("pagination")) { pagination($wp_query->max_num_pages); } ?>
functions.phpに追加
function pagination($pages = '', $range = 4)
{
$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 id=\"pagination\">";
for ($i=1; $i <= $pages; $i++)
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
echo "</div>\n";
}
}
ページ番号が中央揃えになるようクラス、IDを定義
#pagination
{
width: 100%;
height: auto;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
}
#pagination .current{
display:inline-block;
width: 50px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 10px;
padding-left: 10px;
color: rgb(255,255,255);
border: 1px solid rgb(255,255,255);
border-radius: 5px;
}
#pagination .inactive
{
display: inline-block;
width: 50px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 10px;
padding-left: 10px;
color: rgb(89,89,89);
border-radius: 5px;
background-color: rgb(255,255,255);
}
コメントを残す