プラグイン不要!WordPressのページャー(ページネーション)機能を簡単に実装する方法
更新日:カテゴリ:WordPress

プラグインは使いたくない人向けに、ページャー(ページネーション)機能を簡単に実装する方法をご紹介します。
ページャーを簡単に実装する方法
「WP-PageNavi を使わずにナビゲーション表示」という記事を参考にさせて頂いて、少しアレンジして実装してみました。
Kowappaでもこのページャーを使っていますのでご参考まで。
※2013年1月現在
テンプレート
<div class="pager"> <?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){ $paginate_format = ''; $paginate_base = add_query_arg('paged','%#%'); } else{ $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/','paged');; $paginate_base .= '%_%'; } echo paginate_links(array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $wp_query->max_num_pages, 'mid_size' => 4, 'current' => ($paged ? $paged : 1), 'prev_text' => '«', 'next_text' => '»', )); ?> </div>
テンプレート(index.phpやhome.phpなど)のページャーを挿入したい箇所に上記を記述。
※ページャーの表示する数を変更したい時は「mid_size」の数字を変えてください。
CSS
.pager{ text-align:center; } a.page-numbers, .pager .current{ background:rgba(0,0,0,0.02); border:solid 1px rgba(0,0,0,0.1); border-radius:5px; padding:5px 8px; margin:0 2px; } .pager .current{ background:rgba(0,0,0,1); border:solid 1px rgba(0,0,0,1); color:rgba(255,255,255,1); }
CSS(style.cssなど)に上記を記述。
上記はKowappaのスタイルですので、あとは自由にCSSを変えてあげればOKです。
余談ですが
ページャーの呼び方って何が一般的なのでしょうか。
ページャーだったり、ページネーションだったり、ページナビゲーションだったり。
なんとなく、デザイナーはページャー、プログラマーはページネーションっていう人が多いような気がします。