【WordPress】プラグインを使用しないでページャーを自作する方法

WordPressのページャー・ページネーションをプラグインを使用しないでを自作する方法をご紹介します。

※テンプレートファイルを直接編集する場合などは、必ずバックアップを取ってから編集してください。
また、利用する場合は自己責任でお願いします。

ページャーの出力を設定

functions.phpに記述します。

if( !function_exists('pagination') ){
	function 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 ){ //全ページ数が空の場合は、1にする
				$pages = 1;
			}
		}

		if( 1 != $pages ){  //全ページ数が1以外の場合は以下を出力する
			echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
			if( $paged > 2 && $paged > $range+1 && $showitems < $pages ){
				echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
			}
			if( $paged > 1 && $showitems < $pages ){
				echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
			}
			for ($i=1; $i <= $pages; $i++){
				if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
					echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\"" . $page_no_index . ">" . $i . "</a>";
				}
			}

			if ( $paged < $pages && $showitems < $pages ){
				echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
			}
			if ( $paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages ){
				echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
			}
			echo "</div>\n";
		}
	}
}

ページャーを出力

ページャーを出力するテンプレートファイル（index.php・category.phpなど）に以下を記述します。

<?php if (function_exists("pagination")) {
	pagination($wp_query->max_num_pages);
} ?>

出力されるコード

<div class="pagination">
	<span>Page 6 of 30</span>
	<a href="http://example.com/">&laquo; First</a>
	<a href="http://example.com/page/5">&lsaquo; Previous</a>
	<a href="http://example.com/page/2" class="inactive">2</a>
	<a href="http://example.com/page/3" class="inactive">3</a>
	<a href="http://example.com/page/4" class="inactive">4</a>
	<a href="http://example.com/page/5" class="inactive">5</a>
	<span class="current">6</span>
	<a href="http://example.com/page/7" class="inactive">7</a>
	<a href="http://example.com/page/8" class="inactive">8</a>
	<a href="http://example.com/page/9" class="inactive">9</a>
	<a href="http://example.com/page/10" class="inactive">10</a>
	<a href="http://example.com/page/7">Next &rsaquo;</a>
	<a href="http://example.com/page/33">Last &raquo;</a>
</div>

新たにID名・クラス名を追記や変更する場合は、function.phpに記述している内容が出力されますので、自分好みに変更してみてください。
あとは、cssなどで編集すればデザインの幅が広がりますよね。
※functions.phpを編集する場合は必ずバックアップを取ってから行ってくださいね。

• Twitter
• Facebook