WordPress：プラグインを使わずにページネーションを実装する方法

WordPressにプラグインなしでページネーションを実装する方法と、CSSを使ったスタイル例のメモです。
「WP-PageNavi」などといったプラグインを使えば簡単にできますが、少しでもプラグインを減らしたいときや必要ない機能を取り除いたりしたい場合はこちらを用いた方が何かと使いやすいと思います。

以下で紹介している方法はfunctions.phpを使用しますので、テーマ内にない場合は作成してください。

ページネーションを設置する

まずfunctions.phpに以下を記述します。

functions.php

function pagination( $pages = '', $range = 2 ) {
  $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=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
    if ( $paged > 2 && $paged > $range+1 && $showitems < $pages ) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
    if ( $paged > 1 && $showitems < $pages ) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
    for ( $i=1; $i <= $pages; $i++ ) {
      if ( 1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ) ) {
        echo ( $paged == $i ) ? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
      }
    }
    if ( $paged < $pages && $showitems < $pages ) echo "<a href=\"" . get_pagenum_link( $paged + 1 ) . "\">Next &rsaquo;</a>";
    if ( $paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages ) echo "<a href='" . get_pagenum_link($pages) . "'>Last &raquo;</a>";
    echo "</div>\n";
  }
}

表示範囲を指定したい場合は、上記コード1行目にあるfunction pagination( $pages = '', $range = 2 )の部分で変更することができ、今回のコードでは2に設定しています。
また、idやclass名などを変更したい場合は20行目や28行目などの部分を。
「Previous」や「Next」などの英表記を「前へ」「次へ」といった日本語表記にしたい場合などは、21行目、22行目、32行目、33行目の部分で変更できます。

functions.phpに上記を記述後、ページネーションを設置したい部分に以下を記述します。

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

上記を記述することで下記のようなコードが出力されますので、あとはCSSで見栄えを整えて設置完了となります。
下記コードは、全7ページ中4ページ目にいる場合に出力されているものです。
実際には1行で出力されますが、見やすいように改行を入れています。

HTML

<div class="pagination">
  <span>Page 4 of 7</span>
  <a href="http://www.example.com/blog/">&laquo; First</a>
  <a href="http://www.example.com/blog/page/3">&lsaquo; Previous</a>
  <a class="inactive" href="http://www.example.com/blog/page/2">2</a>
  <a class="inactive" href="http://www.example.com/blog/page/3">3</a>
  <span class="current">4</span>
  <a class="inactive" href="http://www.example.com/blog/page/5">5</a>
  <a class="inactive" href="http://www.example.com/blog/page/6">6</a>
  <a href="http://www.example.com/blog/page/5">Next &rsaquo;</a>
  <a href="http://www.example.com/blog/page/7">Last &raquo;</a>
</div>

ページネーションのスタイル例

CSSを使ったページネーションのスタイル例を幾つか紹介します。
上で紹介したものと合わせて記述すればそのまま使用できますので、同じ見栄えを実装したい場合はCSSにそのままコピペしてください。
見た目はこんな感じで色を変更したい場合は、background、border、colorあたりを調整してみてください。
各画像は現在4ページ目を見ており、「Previous」にマウスオーバーしたときをキャプチャしたものです。

ソース元で紹介されているスタイル

CSS

.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 14px;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  width: auto;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  background: #555;
  color:#fff;
  text-decoration: none;
}
.pagination a:hover {
  background: #3279bb;
  color: #fff;
}
.pagination .current {
  padding: 6px 9px 5px 9px;
  background: #3279bb;
  color: #fff;
}

※font-sizeとline-heightは変更しています。

どこでも使えそうなシンプルなスタイル

CSS

.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 14px;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  width: auto;
  margin: 2px 2px 2px 0;
  padding: 5px 9px 5px 9px;
  background-color: #fff;
  color: #555;
  text-decoration: none;
}
.pagination a {
  border: 1px solid #ccc;
}
.pagination a:hover {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #fff;
}
.pagination .current {
  padding: 5px 9px 5px 9px;
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #fff;
}

Googleスタイル

CSS

.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 14px;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  width: auto;
  color: #1122cc;
  text-decoration: none;
}
.pagination a {
  margin-left: 10px;
}
.pagination a:hover{
  text-decoration: underline;
}
.pagination .current {
  margin-left: 10px;
  color: #222;
  font-weight: bold;
}

Flickrスタイル

CSS

.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 14px;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  width: auto;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  background-color: #fff;
  border: 1px solid #eee;
  color: #0063dc;
  text-decoration: none;
}
.pagination a:hover {
  background-color: #0063dc;
  color: #fff;
}
.pagination .current {
  padding: 6px 9px 5px 9px;
  color: #ff0084;
  font-weight: bold;
}

border-radius（角丸）を使用したスタイル

CSS

.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 14px;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  width: auto;
  margin: 2px 5px 2px 0;
  padding: 5px 10px 6px 10px;
  background-color: #eee;
  border: 1px solid #bbb;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  color: #333;
  text-decoration: none;
}
.pagination a:hover {
  background-color: #fff;
}
.pagination .current{
  background-color: #fff;
  font-weight: bold;
}

※IEなどの非対応ブラウザ有

linear-gradient（グラデーション）を使用したスタイル

CSS

.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 14px;
}
.pagination a {
  padding:5px 10px 6px 10px;
  background-color: #eee;
  background-color: #f9f9f9;
  background-image: -webkit-linear-gradient(top, #f9f9f9, #eaeaea);
  background-image: -moz-linear-gradient(top, #f9f9f9, #eaeaea);
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.pagination a:hover {
  background-color: #efefef;
  background-image: -webkit-linear-gradient(top, #eaeaea, #f9f9f9);
  background-image: -moz-linear-gradient(top, #eaeaea, #f9f9f9);
}
.pagination .current {
  padding:5px 10px 6px 10px;
  background-color: #444;
  background-image: -webkit-linear-gradient(top, #444, #555);
  background-image: -moz-linear-gradient(top, #444, #555);
  border: 1px solid #444;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
}

※IEなどの非対応ブラウザ有

How to Add WordPress Pagination without a Plugin [Enhanced] | Sparklette Studio