WordPressでページネーションを追加+固定ページバージョン(プラグインなし)

WordPressでページネーションを追加+固定ページバージョン(プラグインなし)

ページネーションとは

ページネーションは、ページャーやページング、ページ送りとも呼ばれ、検索結果などでページ下部によくある「次へ」や数字が並んで、そのページへ移動するためのボタンです。
ユーザーが目的のページを探しやすくするために必要不可欠なパーツですので、検索結果や記事一覧ページなどには必ず設置しましょう。

ページネーションの設置

search.phpやcategory.phpページで表示させる(固定ページではない)場合のページネーション設置方法です。
固定ページの場合はこちら

では早速ソースコードを見ていきましょう。

functions.php

functions.php
function my_pagination($pages = '', $range = 2) {
	$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($pages != 1) {
		echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
		if($paged > 1) {
			echo '<li class="pagination-item pagination-prev"><a href="' . get_pagenum_link($paged - 1) . '"><i class="fas fa-chevron-left"></i></a></li>';
		}
		for($i = 1; $i <= $pages; $i++) {
			if(!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems) {
				echo($paged == $i) ? '<li class="pagination-item pagination-item-current">' . $i . '</li>' : '<li class="pagination-item"><a href="' . get_pagenum_link($i) . '">' . $i . '</a></li>';
			}
		}
		if($paged < $pages) {
			echo '<li class="pagination-item pagination-item-next"><a href="' . get_pagenum_link($paged + 1) . '"><i class="fas fa-chevron-right"></i></a></li>';
		}
		echo '</ul>';
	}
}
MEMO
数字の部分を変更したい場合は、1行目の$range = 2の数字の部分を変更すると任意の数に変更できます。

上記コードをfunctions.phpに貼り付けてsearch.phpなどで呼び出してあげます。
呼び出し方はこんな感じ。
呼び出すところはループの外でね。

search.phpなど

search.phpなど
<?php
	my_pagination($wp_query->max_num_pages);
?>
注意
1ページに何個記事を表示するかを設定する箇所で’posts_per_page’が-1(すべて表示の意味)になっていたり、設定した数よりも記事が少なかったりするとページネーションは表示されませんので注意してください。

もちろんCSSで見た目を整えてあげることも必要です。
CSSのソースコードはこちらを参考にして見た目を整えてください。

style.css

style.css
.pagination {
	display: flex;
	justify-content: center;
}
.pagination .pagination-item {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.pagination .pagination-item:first-of-type {
	border-radius: 3px 0 0 3px;
}
.pagination .pagination-item:last-of-type {
	border: 1px solid #ccc;
	border-radius: 0 3px 3px 0;
}
.pagination .pagination-item a {
	color: #376282;
	display: block;
	padding: 10px 20px;
}
.pagination .pagination-item-current {
	color: #fff;
	background-color: #4884a8;
	font-weight: bold;
	padding: 10px 20px;
}

ページネーションの通常バージョンまとめ

これでページネーションが表示されるようになったと思います。
もし表示されない場合は、ページネーションを設置したページが固定ページなのではないでしょうか。
固定ページは次の章でソースコードを公開しますので、そちらを参考にしてください。

固定ページでのページネーション設置

固定ページでのページネーションは基本的には通常バージョンと同じ仕組みですが、関数の引数がひとつ増えます。
なので呼び出し時には注意してくださいね。

functions.php

functions.php
function my_page_pagination($args, $pages = '', $range = 2) {
	$showitems = ($range * 2) + 1;
	global $paged;
	$paged = get_query_var('paged') ? get_query_var('paged') : 1;
	if(empty($paged)) $paged = 1;
	$the_query = new WP_Query($args);
	if($pages == '') {
		global $wp_query;
		$pages = $the_query -> max_num_pages;
		if(!$pages) {
			$pages = 1;
		}
	}
	if(1 != $pages) {
		echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
		if($paged > 1) {
			echo '<li class="pagination-item pagination-prev"><a href="' . get_pagenum_link($paged - 1) . '"><i class="fas fa-chevron-left"></i></a></li>';
		}
		for($i = 1; $i <= $pages; $i++) {
			if(!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems) {
				echo($paged == $i) ? '<li class="pagination-item pagination-item-current">' . $i . '</li>' : '<li class="pagination-item"><a href="' . get_pagenum_link($i) . '">' . $i . '</a></li>';
			}
		}
		if($paged < $pages) {
			echo '<li class="pagination-item pagination-item-next"><a href="' . get_pagenum_link($paged + 1) . '"><i class="fas fa-chevron-right"></i></a></li>';
		}
		echo '</ul>';
	}
}

page.php

引数がひとつ増えるだけですが、この引数の$argsの部分はpage.php内でループ用に設定したもの(posts_per_pageなどの設定したものが入っている変数)を指定してください。

page.php
<?php
	my_page_pagination($args, $wp_query->max_num_pages);
?>
注意
引数の$argsで’paged’ => $paged を設定しないとページネーションが正しく表示されませんので、忘れずに追加しておきましょう。

style.cssについては共通なので、通常バージョンのソースコードを参考にしてください。

まとめ

search.phpなどのページでページネーションを設置するのを固定ページでそのまま流用できないので、ページネーションを設置する場合はfunctions.php内にどちらの場合も記載しておき、必要に応じて関数を呼び出して設置するのがいいかもしれませんね。