カスタム投稿の一覧ページで、ページネーションの機能を実装
//Pagenation
function pagination($pages = '', $range = 10) // $range = 2
{
$showitems = $range; //($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";
}
}
CSSのサンプルは以下のような感じ
/* アーカイブページネーション PC */
.navigation.pagination {
font-family: '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Helvetica, 'メイリオ', 'Meiryo', 'Osaka', 'arial', Arial, sans-serif;
margin-bottom: 50px;
}
.navigation.pagination .page-numbers {
}
.navigation.pagination .page-numbers li {
display: inline-block;
padding: 0 10px;
border-left: 1px solid #ccc;
line-height: 100%;
vertical-align: middle;
}
.navigation.pagination .page-numbers li:first-child {
border-left: none;
}
.navigation.pagination .page-numbers li .current {
font-size: 22px;
font-weight: bold;
}
.navigation.pagination .page-numbers li {
}
/* アーカイブページネーション SP */
.navigation.pagination {
font-family: '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic','ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Helvetica, 'メイリオ', 'Meiryo', 'Osaka', 'arial', Arial, sans-serif;
margin-bottom: 50px;
}
.navigation.pagination .page-numbers {
}
.navigation.pagination .page-numbers li {
display: inline-block;
padding: 0 10px;
border-left: 1px solid #ccc;
line-height: 100%;
vertical-align: middle;
}
.navigation.pagination .page-numbers li:first-child {
border-left: none;
}
.navigation.pagination .page-numbers li .current {
font-size: 22px;
font-weight: bold;
}
.navigation.pagination .page-numbers li {
}