プラグインを利用せずにページナビゲーションを表示する

旧テーマでは「前のページ」「次のページ」のリンクしか表示していませんでしたが、WordPressテーマのリニューアルに伴い、下のイメージのようなページナビゲーションを追加しました。

ページナビゲーション

プラグインを利用せずに実現できないかと探してみたところ、とても参考になる記事を発見しました。ありがとうございます。
Yuriko.Net:
WP-PageNavi を使わずにナビゲーション表示

紹介されているコードを index.php や archive.php などの適切な場所に追加することで簡単にページナビゲーションを実現できます。
当ブログでは記事一覧用のテンプレートファイルを用意して、それを include するようにしていたので、そこに追加しました。

<?php global $wp_rewrite; if($wp_query->max_num_pages > 1){
   $p_base = get_pagenum_link(1);
   if(strpos($p_base, '?') || ! $wp_rewrite->using_permalinks()){
      $p_format = '';
      $p_base = add_query_arg('paged', '%#%');
   } else {
      $p_format = (substr($p_base, -1, 1) == '/' ? '' : '/') .
      user_trailingslashit('page/%#%/', 'paged');
      $p_base .= '%_%';
   }
   $current = ($paged ? $paged : 1);
   if($current < 5){
      $midsize = 7 - $current;
   } else {
      $mst = $wp_query->max_num_pages - $current + 1;
      $midsize = ($mst < 5) ? (7 - $mst) : 3;
   }
   echo "<nav class='page-navi'>\n";
   echo paginate_links( array(
      'base' => $p_base,
      'format' => $p_format,
      'total' => $wp_query->max_num_pages,
      'prev_text' => '前へ<i class="icon-arrow-left"></i>',
      'next_text' => '<i class="icon-arrow-right"></i>次へ',
      'end_size' => 1,
      'mid_size' => $midsize,
      'current' => $current ));
   echo "\n</nav>\n";
} ?>

紹介されているコードを一部修正しています。

  • <div>ではなく<nav>に変更しました。
  • 1ページしかないとき空の<nav>ブロックを出力しないようにしました。
  • カレントページ周辺が7ページ分"位"表示されるように調整しています。
  • prev_text、next_textにFontAwesomeのアイコンを表示しています。

スタイルシートは以下のような感じ。

.page-navi {
   margin: 1em auto; line-height: 2em; text-align: center;
}
a.page-numbers, .page-navi .current {
   padding: 2px .5em; vertical-align: middle;
   color: #36c; font-size: smaller;
   border: solid 1px #ccc;
   transition: background linear 0.2s, border linear 0.2s;
}
a.page-numbers:hover {
   color: #00f; background: #c9e0f0;
   border-color: #36c;
   transition: none;
}
.page-navi .current {
   font-size: 120%; font-weight: bold;
   color: #fff; text-shadow: 1px 1px 1px #035;
   background: #59c; border-color: #328ab2;
   box-shadow: 1px 1px 2px #ccc;
}
.page-navi .next, .page-navi .prev {
   border: none; font-weight: bold;
}
.page-navi a.next:hover, .page-navi a.prev:hover {
   background-color: transparent; color: #c59;
}

WordPressのプラグインはとっても便利ですが、たくさん追加するとWordPressが重くなるみたいなので、プラグインを利用せずに実現できるのであれば、そっちの方が良いのではないかと思っています。
メンテナンスする手間が増えますが。


COMMENT

コメントをどうぞ

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)