プラグインなどをつかわずにできるシンプルなページネーション(ページ番号)のリンクのテンプレートです。
WordPressテンプレート
<div class="pagenation">
<ul>
<?php
$page_current_num = (!empty($paged))? $paged:1;
$page_last_num = $wp_query->max_num_pages;
if($page_current_num > 1){
echo sprintf('<li class="prev"><a href="%s">%s</a></li>',get_pagenum_link($page_current_num-1),'PREV');
}
$page_start_num = $page_current_num - NUM_PAGENATION_BEFORE_AFTER;
if($page_start_num < 1) $page_start_num = 1;
$page_end_num = $page_current_num + NUM_PAGENATION_BEFORE_AFTER;
if($page_end_num > $page_last_num) $page_end_num = $page_last_num;
for($i = $page_start_num;$i<=$page_end_num;$i++){
if($page_current_num==$i){
echo sprintf('<li class="active">%s</li>',$i);
}else{
echo sprintf('<li><a href="%s">%s</a></li>',get_pagenum_link($i),$i);
}
}
if($page_current_num < $page_last_num){
echo sprintf('<li class="next"><a href="%s">%s</a></li>',get_pagenum_link($page_current_num+1),'NEXT');
}
?>
</ul>
</div>
CSS(SASS)
//---------------------------------------------------pagination
.pagenation
padding: 40px 0
margin: auto
display: table
&:after
clear: both
content: "."
display: block
height: 0
visibility: hidden
ul
&:after
clear: both
content: "."
display: block
height: 0
visibility: hidden
text-align: center
margin: auto
li
float: left
list-style: none outside none
margin-left: 3px
&:first-child
margin-left: 0
&.active
background: #336699
color: #FFF
cursor: not-allowed
padding: 10px 20px
a
background: #F2F2F2
color: #336699
display: block
padding: 10px 20px
text-decoration: none
&:hover
background-color: #A1AABA
color: #FFF
opacity: 0.8
transition-duration: 500ms
transition-property: all
transition-timing-function: ease
コメントを残す