【WordPress】プラグインなしで一覧ページのページネーションをシンプルに実装する方法

2020/10/5

こんにちは、松井です。

WordPressはプラグインの豊富さが利点ですが、簡単にプラグインできるためカスタマイズや制御するのが知識がないとかえって大変です。

一覧ページに簡単に設置できるとして有名なものには、Wp-PageNaviがありますが、プラグインなしでも簡単に独自のページネーションが作成できるので、その記述をまとめましたのでご活用ください。

loop-{slag}.php などの一覧表示ページにページネーションを設置

まずはページネーションを表示させたいloopするファイルにページネーションの記述をします。

   <!-- ページネーション -->
    <?php
    if (function_exists("pagination")) {
        pagination($additional_loop->max_num_pages);
    }
    ?>

function.php側でページネーションの設定

次に、function.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=\"pager\">\n";
		 echo "<ul class=\"pagination\">\n";
		 //Prev：現在のページ値が１より大きい場合は表示
         if($paged > 1) echo "<li class=\"pre\"><a href='".get_pagenum_link($paged - 1)."'><span>«</span></a></li>\n";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                //三項演算子での条件分岐
                echo ($paged == $i)? "<li><a class=\"active\" href='".get_pagenum_link($i)."'><span>".$i."</span></a></li>\n":"<li><a href='".get_pagenum_link($i)."'><span>".$i."</span></a></li>\n";
             }
         }
		//Next：総ページ数より現在のページ値が小さい場合は表示
		if ($paged < $pages) echo "<li class=\"next\"><a href=\"".get_pagenum_link($paged + 1)."\"><span>»</span></a></li>\n";
		echo "</ul>\n";
		echo "</div>\n";
     }
}

ページネーションのCSSファイルを作成

最後に、CSSファイルで見た目の部分を整えていきます。このページネーションの実装では、スマホ時やレスポンシブ時でも対応したものになっています。完成形は、このような形です。

任意でボタンのカラーやmax-widthなどの幅は、自由に設定ください。css調整できれば完了です。きちんと実装できているか確認してみてください。なにかうまくいかないところなどあれば、ご連絡ください。

.pager {
  padding-top: 40px;
}
.pager .pagination {
  text-align: center;
  line-height: 0;
}
.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  text-align: center;
  position: relative;
  border-radius: 2px;
}
@media (max-width: 750px) {
  .pager .pagination li {
    display: none;
  }
}
.pager .pagination li a {
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}
.pager .pagination li a span {
  display: table-cell;
  vertical-align: middle;
  transform: none;
}
.pager .pagination li a:hover {
  color: #fff;
  background: #22AB39;
}
.pager .pagination li .active {
  color: #fff;
  background: #22AB39;
}
@media (max-width: 750px) {
  .pager .pagination .pre,
  .pager .pagination .next {
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }
  .pager .pagination .pre a,
  .pager .pagination .next a {
    width: 100%;
    text-align: center;
  }
  .pager .pagination .pre span:after {
    content: "　前の10件へ";
  }
  .pager .pagination .next span:before {
    content: " 次の10件へ　";
  }
}

参考サイト

ナコさんのブログがすごく簡単でわかりやすく書かれていたので、自分が使うものだけを新たに作り直し記事を書いています。ページャーなど部分に拘りたいという方は、色々とチャレンジしてみるのもよいかと思いますが、ページャーのように機能を優先すべきところは、サクッとやれるように、自分の中でストックしておくと結構便利です。