2017.05.09

メモ:WordPressのページネーションをカスタマイズする方法の一例

posts_photo

WPのテンプレートを作る際に毎回忘れちゃって、ついつい後回しにしてしまうページネーションのカスタマイズ方法をメモしておこうと思います。

paginationの追加

まずは下記のコードをfunction.phpに追加します。

/* $rangeの値で出力されるページナンバーの範囲を設定 */
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;
    }
  }

  /* ページ数が1じゃなければ */
  if(1 != $pages){
    echo "<div class=\"pagenation\"><ul>";

    /* 1番最初のページに戻るボタン */
    if($paged > 2 && $paged > $range+1 && $showitems < $pages){
      echo "<li class=\"pagerPrevAll\"><a href=\"".get_pagenum_link(1)."\">First</a></li>";
    }

    /* 1つ前のページへボタン */
    if($paged > 1 && $showitems < $pages){
      echo "<li class=\"pagerPrev\"><a href=\"".get_pagenum_link($paged - 1)."\">Prev</a></li>";
    }

    /* ページナンバーの出力。$pagedが一致した場合はcurrentを、一致しない場合はリンクを生成 */
    for ($i=1; $i <= $pages; $i++){
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
        echo ($paged == $i)? "<li><span class=\"current\">".$i."</span></li>":"<li><a href=\"".get_pagenum_link($i)."\">".$i."</a></li>";
      }
    }

    /* ページ数が続くことを示す3点リーダー */
    if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages){
      echo "<li><a class=\"dot\" href=\"".get_pagenum_link($paged + 1)."\">...</a></li>";
    }

    /* 1つ次のページへボタン */
    if ($paged < $pages && $showitems < $pages){
      echo "<li class=\"pagerNext\"><a href=\"".get_pagenum_link($paged + 1)."\">Next</a></li>";
    }

    /* 最後のページへ進むボタン */
    if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages){
      echo "<li class=\"pagerNextAll\"><a href=\"".get_pagenum_link($pages)."\">Last</a></li>";
    }

    echo "</ul></div>";
  }
}

必要に応じて、最初に戻るボタンなどは出力仕分けるといいと思います。

使い方

ページネーションを使用したいテンプレート(だいたいarchive.phpやcategory.php)に下記のコードを挿入すると、その位置に下記のHTMLタグが出力されます。

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
<div class="pagenation">
  <ul>
    <li class="pagerPrevAll"><a href="1ページ目へ戻るURL">First</a></li>
    <li class="pagerPrev"><a href="1つ前へ戻るURL">Prev</a></li>
    <li><span class="current">1</span></li>
    <li><a href="ページナンバーごとのURL">2</a></li>
    <li><a href="ページナンバーごとのURL">3</a></li>
    <li><a href="ページナンバーごとのURL">4</a></li>
    <li><a class="dot" href="次のページへのURL">…</a></li>
    <li class="pagerNext"><a href="次のページへ進むURL">Next</a></li>
    <li class="pagerNextAll"><a href="最後のページへ進むURL">Last</a></li>
  </ul>
</div>

この書き方の良いところはタグの整形がわかりやすくカスタマイズ出来るところかなと思います。

こちらを参考にさせていただきました。
WordPress:ページ送り(ページネーション)をプラグイン無しで設置【スマホも1行表示】
How to Add WordPress Pagination without a Plugin [Enhanced] – Sparklette Studio

エンジニアのためのWordPress開発入門


記事のタグ一覧:

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事