WordPressでレスポンシブ対応のページネーションを作る

先日このブログのテーマをレスポンシブにしたのですが、それまで別々のテーマでページネーションを書き分けていたので、1つのコードでやるにはどうしたらいいのかなとごねごねした結果をメモります！

構想

スマホではこんな感じに見えて、

ブラウザ幅が600px以上になったらこうなる感じ。最後のページ数はもちろん可変ですし（当たり前だ）、現在地から前後何ページ分出力するかも変えられます。そのへんはNaoyaさんのコードがすばらしいからです！

参考サイト

• WordPress：プラグインを使わずにページネーションを実装する方法 | NxWorld

こちらのコードを元に作らせていただきました。Naoyaさんいつもありがとうございます！！

出力コード

実際にはこのようなつくりになっていて、クラスをつけてブラウザの大きさによって表示したり非表示したりしてます。

HTML

<div class="pagination">
	<a href='https://ateitexe.com/'>1</a>
	<a href='https://ateitexe.com/page/6/' class="mb_page_navi">‹ Previous</a>
	<span class="pc_page_navi">…</span>
	<a href='https://ateitexe.com/page/3/' class="pc_page_navi">3</a>
	<a href='https://ateitexe.com/page/4/' class="pc_page_navi">4</a>
	<a href='https://ateitexe.com/page/5/' class="pc_page_navi">5</a>
	<a href='https://ateitexe.com/page/6/' class="pc_page_navi">6</a>
	<span class="current">7</span>
	<a href='https://ateitexe.com/page/8/' class="pc_page_navi">8</a>
	<a href='https://ateitexe.com/page/9/' class="pc_page_navi">9</a>
	<a href='https://ateitexe.com/page/10/' class="pc_page_navi">10</a>
	<a href='https://ateitexe.com/page/11/' class="pc_page_navi">11</a>
	<span class="pc_page_navi">…</span>
	<a href="https://ateitexe.com/page/8/" class="mb_page_navi">Next ›</a>
	<a href='https://ateitexe.com/page/37/'>37</a>
</div>

なので、HTMLはこんな感じ。

実装コード

上記のHTMLを出力するべく、こんな関数を作りました。

functions.php

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 ) $pages = 1;
	}
	if ( 1 != $pages ) {
		echo "<div class=\"pagination\">\n";
		echo ( $paged == 1 ) ? "\t<span class=\"current\">1</span>\n":"\t<a href='".get_pagenum_link(1)."'>1</a>\n";
		if ( $paged > 2 ) echo "\t<a href='".get_pagenum_link($paged - 1)."' class=\"mb_page_navi\">‹ Previous</a>\n";
		for ( $i = 2; $i <= $pages - 1; $i++ ) {
			if ( !( $i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems ) {
				echo ( $paged == $i ) ? "\t<span class=\"current\">".$i."</span>\n":"\t<a href='".get_pagenum_link( $i )."' class=\"pc_page_navi\">".$i."</a>\n";
			} else if ( $i == 2 || $i == $pages - 1 ) {
				echo "\t<span class=\"pc_page_navi\">…</span>\n";
			}
		}
		if ( $paged < $pages - 1 ) echo "\t<a href=\"" . get_pagenum_link( $paged + 1 ) . "\" class=\"mb_page_navi\">Next ›</a>\n";
		echo ( $paged == $pages ) ? "\t<span class=\"current\">". $pages ."</span>\n": "\t<a href='".get_pagenum_link( $pages )."'>". $pages ."</a>\n";
		echo "</div>\n";
	}
}

1行目の$range = 4の数値を変えると、PCレイアウトで現在地から前後何ページ表示するかを変更できます。

2～9行目は、下準備です。何ページ分出力するかとか、最後のページが何かとか。

10行目からページネーションを出力していますが、総ページ数が1ページを超えているのが条件です。

11～13行目で、開始タグ、1ページ目のリンク、モバイル用の「Previous」の出力をしています。「Previous」は現在地が2ページより後の場合にしか出てきません。

14～20行目が主にPC用の中身の部分。2ページから最終-1ページまでをループして、範囲に入っていればリンクを、範囲外で2ページもしくは最終-1ページの場合は「…」を出力したりしています。

21～23行目では、モバイル用の「Next」、最終ページのリンク、閉じタグの出力をしています。「Next」は現在地が最終-1より前の場合にしか出てきません。

index.phpなど

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

ページネーションを呼び出すコード。ここはNaoyaさんのコードそのままです！　すみません！！　ありがとうございます！！

style.css

.pagination {
	font-size: 1.1em;
	overflow: hidden;
}
.pagination span, .pagination a {
	display: block;
	float: left;
	width: auto;
	margin-right: 0.5em;
	padding: 0.2em 0.8em;
	background-color: #eee;
	border: 1px solid #bbb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #333;
	text-decoration: none;
}
.pagination a:hover {
	background-color: #fff;
}
.pagination .current{
	background-color: #fff;
	font-weight: bold;
}
.pagination .pc_page_navi{display: none;}

@media screen and (min-width:600px) {
	.pagination .mb_page_navi{ display: none; }
	.pagination .pc_page_navi{ display: block; }
}

後はCSSで、メディアクエリを使ってブラウザの大きさで表示と非表示を切り替えます（ハイライト部）。

その他の見え方はお好みでって感じなので、例として現在のこのブログのコードです。実際はWebフォントとかも使ってるんですが、細かい部分は割愛してます。