プラグイン不要！WordPressのページャー（ページネーション）機能を簡単に実装する方法

更新日：2013.01.07カテゴリ：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です。

余談ですが

ページャーの呼び方って何が一般的なのでしょうか。
ページャーだったり、ページネーションだったり、ページナビゲーションだったり。
なんとなく、デザイナーはページャー、プログラマーはページネーションっていう人が多いような気がします。