このブログにページネーションを作成したので、備忘のため記録。ワードプレスのプラグインの中にはページネーションを簡単に設置できるプラグインもあるようですが、なるべくプラグインは使わない方向で制作したいのと使用しているフレームワーク（MaterializeCSS）にページネーション用のCSSが用意されているので今回は自作しました。

functions.phpにページネーションの設定をする

下記のコードをfunctions.phpに記載しページネーション用のモジュールを作成します。functions.phpの上書きは慎重に行いましょう。class名はMaterializeCSSのページネーション用のものです。

//ページネーション
function responsive_pagination($pages = '', $range = 4){
  $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 '<ul class="pagination">';
    //先頭戻るボタン
    echo '<li class="waves-effect"><a href="'.get_pagenum_link(1).'"><i class="material-icons">first_page</i></li>';
    //1つ戻るボタン
    echo '<li class="waves-effect"><a href="'.get_pagenum_link($paged - 1).'"><i class="material-icons">chevron_left</i></a></li>';
    //番号つきページ送りボタン
    for ($i=1; $i <= $pages; $i++)     {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))       {
        echo ($paged == $i)? '<li class="active"><a>'.$i.'</a></li>':'<li class="waves-effect"><a href="'.get_pagenum_link($i).'" class="disabled" >'.$i.'</a></li>';
      }
    }
    //1つ進むボタン
    echo '<li class="waves-effect"><a href="'.get_pagenum_link($paged + 1).'"><i class="material-icons">chevron_right</i></a></li>';
    //最後尾進むボタン
    echo '<li class="waves-effect"><a href="'.get_pagenum_link($pages).'"><i class="material-icons">last_page</i></li>';
    echo '</ul>';
  }
}

現在のページ情報を取得してリスト形式で「先頭ページ」、「ひとつ前のページ」、「現在のページ」、「次のページ」、「最後のページ」を出力します。現在のページ情報によってリンクとCSSを変更するようにコードを書きます。

これで、responsive_paginationというモジュールが作成されます。これをhtmlで出力すればOKです。

テーマにページネーションのコードを配置する

下記のコードをページネーションを設置したい場所に配置します。トップページやカテゴリ・タグページ、検索結果ページなどでしょうか。

<!--ページネーション-->
<div class="pagination-box right">
 <?php if (function_exists('responsive_pagination')) {
  responsive_pagination($wp_query->max_num_pages);
} ?>
</div>

これでページネーションが完成しました。