このサイトのブログ一覧ページもそうですが記事数が多くなるとページネーション（ページ送り）が必要になってきます。

ただこのページネーションが案外くせ者で一筋縄では行かないわけです。

それ用のプラグイン（「WP-PageNavi」なんかは有名ですね。）を使えば簡単だったりもしますが、バージョンアップのことなどを考えると、できるならプラグインは使わずに実装をしたいところです。

今回はその方法を備忘録的にまとめておきます。

ページネーションの実装方法

まずfunctions.phpに下記のコードを追記してください。

function pagination($pages = '', $range = 1)
{
     $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=\"container03\">
<ul class=\"pager01\">";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";
 
         for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "
<li class=\"current\"><a>".$i."</a></li>

":"
<li><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>

";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">&rsaquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo "</ul>
</div>

\n";
     }
}

次にページネーションを表示したいphpファイルのページネーションを表示したい箇所に次のコードを追記してください。

作り方によってファイル名は変わりますが一般的にはarchive.php、category.phpあたりでしょうか。

<?php if (function_exists("pagination")) { pagination($additional_loop->max_num_pages);
} ?>

これでひとまず画面にページネーションが表示されます。
ただ、この状態ではただ文字が並んでいるだけなので、cssで調整してあげる必要があります。

このサイトで使用しているcssを一例としてあげると下記のcssになります。

.pager01 {
  text-align: center;
  margin-bottom: 80px; 
}
@media screen and (max-width: 640px) {
  .pager01 {
    margin-bottom: 50px; 
    } 
  }
.pager01 li {
  display: inline-block;
  margin: 0 15px; 
}
@media screen and (max-width: 640px) {
  .pager01 li {
    margin: 0 10px; 
    } 
  }
.pager01 li.current a {
  background: #000;
  color: #fff;
  display: block;
  padding: 15px;
  border-radius: 50%;
  line-height: 7px; 
}

これで下記のようなページネーションが表示されます。

ひとまずコピペで実装できるのでまずはお試しください。