WordPress ページネーション（ページ送り）実装！プラグイン無しでfunctions.phpに直接記述

企業サイトに新着情報機能を実装する場合、または単にブログサイトを運営するにあたっては、ページネーション（ページ送り）機能が必須になる。一般的に、『WP-PageNavi』などのプラグインを使うケースが多いが、わざわざプラグインを使わなくてもfunctions.phpに直接記述することで、独自のページネーションが構築可能だ。そのほうが出力HTMLの融通がきくのでよいだろう。

functions.phpに記述

まずは、functions.phpに下記のように記述する。

function pagination($pages = '', $range = 3) {
 $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 "
".$paged."/".$pages."";
  if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "...";
  if($paged > 1 && $showitems < $pages) echo "前";
  for ($i=1;
   $i <= $pages;
   $i++)
  {
   if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
   {
    echo ($paged == $i)? "".$i."":"".$i."";
   }
  }
  if ($paged < $pages && $showitems < $pages) echo "次";
  if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "...";
  echo "
\n";
 }
}

index.php／archive.phpなどに記述

続いて、ページネーションを実装したい箇所に、下記のように記述する。

<?php if (function_exists("pagination")):?>
 <?php pagination($additional_loop->max_num_pages);?>
<?php endif;?>

以上で、ページ送り機能が実装できたはずだ。

余談だが、「pagination」ではなく「pagenation」と間違えて書いてしまわないように注意。（「page」と「paging」の違い。）

おまけのCSS

CSSは適宜ご自由に。

.pagination {
 font-size: 12px;
}
.pagination a {
 background: #f0f0f0;
 text-align: center;
 text-decoration: none;
 line-height: 1;
 margin: 0 4px 2px 0;
 padding: 10px 13px;
 display: inline-block;
}
.pagination a:hover {
 color: #fff;
 background: red;
}
.pagination span {
 text-decoration: none;
 padding: 10px 13px;
 display: inline-block;
}
.pagination .pagination-all {
 margin: 0 4px 0 0;
}
.pagination .current {
 margin: 0 4px 0 0;
}
.pagination .pagination-prev,
.pagination .pagination-next {
 color: #fff;
 padding: 0;
}
.pagination .pagination-prev {
 margin: 0 16px 0 0;
}
.pagination .pagination-next {
 margin: 0 4px 0 16px;
}
.pagination .pagination-prev a,
.pagination .pagination-next a {
 margin: 0;
}