WordPress案件でのサイト制作においては、ほぼ必須と言える要件としてページネーションの実装があります。よく使うUIなので、いつもコードを使いまわすことが多いので、メモとして残しておきたいと思います。今回紹介するページネーションはプラグインを使わず、直接コードを書いて実装する形になるのですが、カスタマイズしやすいので気に入っています。   ページネーションの仕様についてですが、今回は次のような挙動をする一般的なページネーションになります。 ・「先頭ページ」「前のページ」「次のページ」「最終ページ」「現在のページから3つの目次」の最大で7つのリンクが表示される ・1ページ目では「先頭ページ」「前のページ」のリンクは非表示に ・最終ページでは「最終ページ」「次のページ」のリンクは非表示に ・2ページ目以降が存在しない場合はページネーション自体も非表示に ・目次の部分の表示リンク数は変数で調整できる   それでは実際のコードを見ていきたいと思います。まず、ページネーションを作成する上で必要となる情報があります。それは「合計ページ数」と「現在のページ順」になります。この2つの情報がないとページネーションは実装できません。 【PHP】

<?php
 global $wp_query;
 $pages = $wp_query->max_num_pages;
 $paged = get_query_var('paged');
 $paged == 0 ? $paged = 1: $paged = get_query_var('paged');
 $showItems = 3;
 if($pages != 0 && $pages != 1) {
  echo '<ul class="pagenation">';
  if($paged != 1) {
   echo '<li class="first"><a href="'.get_pagenum_link(1).'">&lt;&lt;</a></li>';
   echo '<li class="prev"><a href="'.get_pagenum_link($paged - 1).'">&lt;</a></li>';
  }
  for($index = 0; $index <= $showItems - 1; $index++) {
   if($index == 0) {
    echo '<li class="current"><a href="'.get_pagenum_link($paged).'">'.$paged.'</a></li>'; 
   } else {
    if($paged + $index <= $pages) {
     echo '<li><a href="'.get_pagenum_link($paged + $index).'">'.($paged + $index).'</a></li>'; 
    }
   }
  }
  if($paged != $pages) {
   echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'">&gt;</a></li>';
   echo '<li class="last"><a href="'.get_pagenum_link($pages).'">&gt;&gt;</a></li>';
  }
  echo '</ul>';
 }
?>

  ここでは合計ページ数を「$pages」現在のページ順を「$paged」と変数を定義しています。そこでまずは合計ページ数の情報を、WordPressにおいてグローバル変数として扱われる「$wp_query」から取得していきます。合計のページ数は$wp_queryの中にある「max_num_pages」という場所に格納されています。そして、現在のページ順の情報は「get_query_var()」という関数で引数に「paged」を指定することで取得できます。これでページネーション実装に必要となる2つの情報が取得できました。   現在のページ順で先頭ページの場合は0が返ってくるので、ややこしくならないよう先頭ページの場合は変数に1が入るようにしておきます。そして最初の条件分岐で、2ページ目が存在するかを判断します。存在する場合にはページネーション自体を出力するようにします。つまり、合計ページ数が1ページしか存在しない場合にはページネーション自体を表示させない形になります。   次の条件分岐では先頭ページかどうかを判断します。先頭ページでない場合のみ「先頭ページ」「前のページ」を出力します。そして、真ん中には現在のページからの目次を表示させます。事前に表示リンク数を変数に入れておき、その数だけfor文で繰り返していきます。ここでインデックス番号は0から始まるので、表示リンク数から1を引いた数を繰り返す点に注意します。最大ページになる直前で数を調整しないと、存在しないページ順が表示されてしまうので注意します。最後の条件分岐では最終ページかどうかを判断します。最終ページでない場合のみ「最終ページ」「次のページ」を出力します。   実際に出力されるHTMLは下記のようになります。（最大表示の場合）後はCSSなどでデザインに合わせて調整していきます。 【HTML】

<ul class="pagenation">
 <li class="first">
  <a href="先頭ページへのリンク">
   ＜＜
  </a>
 </li>
 <li class="prev">
  <a href="前のページへのリンク">
   ＜
  </a>
 </li>
 <li class="current">
  <a href="現在のページへのリンク">
   2
  </a>
 </li>
 <li>
  <a href="現在のページから1ページ先へのリンク">
   3
  </a>
 </li>
 <li>
  <a href="現在のページから2ページ先へのリンク">
   4
  </a>
 </li>
 <li class="next">
  <a href="次のページへのリンク">
   ＞
  </a>
 </li>
 <li class="last">
  <a href="最終ページへのリンク">
   ＞＞
  </a>
 </li>
</ul>

 

---

  これでページの目次に合わせたページネーションが完成しました。ちなみにfor文で展開する最初のリンクにcurrentなど現在のページ順を示すclass名などをHTML要素に設定しておくと、現在のページ順がわかりやすくスタイリングすることができますね。WordPressでページネーションを実装する場合には是非試してみてください。