WordPressのシンプルなページネーション(ページ番号)リンク

プラグインなどをつかわずにできるシンプルなページネーション(ページ番号)のリンクのテンプレートです。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です