WordPressでページナビ(ページネーション)をプラグインなしで表示する

この記事は約15分で読めます。

  • LINEで送る

プラグインなしページナビ

WordPressでページャー(ページネーション・ページナビ)を導入する方法を説明します。
賢威でも、初期設定は「以前の記事へ・新しい記事へ」と表示されますが、
これをページナンバーで表示することで、より使いやすさ(ユーザビリティ)が向上します。

前回はプラグインを利用して、ページナビを表示する方法を説明しました。
WordPressでのページャー(ページネーション)の作り方(WP-PageNavi)

プラグインを利用するとページナビの導入は簡単ですが、プラグインなしの完全オリジナルで作ることで、
プラグインの干渉やバージョンアップ停止にも強くなります。デザインもフルカスタマイズできます。

PHPやCSSがわかる方には、こちらの方法がおすすめです。
以下のサイト(英語)を参考に賢威6.1用にアレンジしています。
(※ リンク切れ)How to Add WordPress Pagination without a Plugin [Enhanced] | Sparklette Studio

ページナビを設置する

「外観 > テーマ編集」から「functions.php」を選択します。
「function.php」の1番下に以下のコードを追加します。

//---------------------------------------------------------------------------
//	独自ページナビを表示する
//---------------------------------------------------------------------------
function ori_pagenavi($range = 2) {

	global $wp_query;
	$pagenavi = "";

	$showitems = ($range * 2) + 1;
	$max_page = $wp_query->max_num_pages;
	$now_page = get_query_var('paged');

	if ($now_page == 0) {
		$now_page =1;
	}
	if ($max_page != 1 && $max_page != 0) {
		$pagenavi .= "<div class=\"ori_pagenavi\"><span>Page ".$now_page." of ".$max_page."</span>";

		if ($now_page > 2 && $now_page > $range + 1 && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link(1)."'>« First</a>";
		}

		if ($now_page > 1 && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link($now_page - 1)."'>‹ Previous</a>";
		}

		for ($cnt=1; $cnt <= $max_page; $cnt++) {
			if (!($cnt >= $now_page + $range + 1 || $cnt <= $now_page - $range - 1) || $max_page <= $showitems ) {
				if ($now_page == $cnt) {
					$pagenavi .= "<span class=\"current\">".$cnt."</span>";
				} else {
					$pagenavi .= "<a href='".get_pagenum_link($cnt)."' class=\"inactive\">".$cnt."</a>";
				}
			}
		}

		if ($now_page < $max_page && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link($now_page+1)."'>Next ›</a>";
		}

		if ($now_page < $max_page-1 && $now_page+$range-1 < $max_page && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link($max_page)."'>Last »</a>";
		}

		echo $pagenavi."</div>\n";

	}
}

次に、「外観 > テーマ編集」から「design.css」を選択します。
「design.css」の1番下に以下のスタイルを追加します。
プラグインを利用したときと同様に、スマホでもサブコンテンツとかぶらないデザインに調整しています。

.ori_pagenavi {
	clear:both;
	padding:20px 0;
	position:relative;
	line-height:13px;
	margin-bottom: 0.5em;
}

.ori_pagenavi span, .ori_pagenavi a {
	display: inline-block;
	margin: 2px 2px 2px 0;
	padding:6px 9px 5px 9px;
	text-decoration:none;
	width:auto;
	color:#fff;
	background: #555;
}

.ori_pagenavi a:hover{
	color:#fff;
	background: #3279BB;
}

.ori_pagenavi .current{
	padding:6px 9px 5px 9px;
	background: #3279BB;
	color:#fff;
}

最後に、以下の4PHPに対して「pager_keni();」を「ori_pagenavi();」に変更します。
PHPの修正は、最初と同様に「外観 > テーマ編集」から各PHPを選択します。

  • archive.php:アーカイブ
  • index.php:メインインデックスのテンプレート
  • page.php:固定ページテンプレート
  • single.php:単一記事の投稿

賢威6.1の場合、各テンプレートに1箇所ずつ「pager_keni();」があるので、
それぞれ「ori_pagenavi();」に書き換えてください。

プラグインなしページナビ

修正が完了すると、このようにシンプルなページナビが表示されます。

表示ルールをカスタマイズする

次は、表示をカスタマイズします。
好きなデザインに変更してください。

「Page X of X」

		$pagenavi .= "<div class=\"ori_pagenavi\"><span>Page ".$now_page." of ".$max_page."</span>";

「Page X of X」はこの部分を変更します。
例えば、以下のように変更するとプラグイン「WP-PageNavi」と同じように「X / X」となります。

		$pagenavi .= "<div class=\"ori_pagenavi\"><span>".$now_page." / ".$max_page."</span>";

「Page X of X」表示を消したい場合は、以下のようにします。

		$pagenavi .= "<div class=\"ori_pagenavi\">";

「‹ Previous」と「Next ›」

		if ($now_page > 1 && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link($now_page - 1)."'>‹ Previous</a>";
		}

前ページに戻るリンクの「‹ Previous」はこの部分を変更します。

		if ($now_page < $max_page && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link($now_page+1)."'>Next ›</a>";
		}

次ページに進むリンクの「Next ›」はこの部分を変更します。
両方とも、3行そのまま消せば表示されません。上下の条件分岐(if)文も一緒に消しましょう。

また「Previous・Next」文言を「前へ・次へ」などに変更する場合は、
文字をそのまま書き換えれば実現可能です。

少し見づらいですが、「‹」マーク・「›」マークを消す場合は、「‹」「&rsaquo」を消してください。

「« First」と「Last »」

		if ($now_page > 2 && $now_page > $range + 1 && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link(1)."'>« First</a>";
		}
		if ($now_page < $max_page-1 && $now_page+$range-1 < $max_page && $showitems < $max_page) {
			$pagenavi .= "<a href='".get_pagenum_link($max_page)."'>Last »</a>";
		}

最初のページへ戻る、最後のページへ進むリンクはそれぞれこの部分です。
これも「Previous・Next」と同様の修正方法となります。

デザインをカスタマイズする

次にデザインを変更します。
変更するのは、CSS全体的になりますのでいくつかパターンを示します。
好きなパターンを選んで、さらにオリジナルカスタマイズしてください。

角丸でちょっとおしゃれスタイル

プラグインなしページナビ

.ori_pagenavi {
	clear:both;
	padding: 0.5em 0;
	position:relative;
	line-height:1.6em;
	margin-bottom: 0.5em;
}

.ori_pagenavi span, .ori_pagenavi a {
	display: inline-block;
	margin: 0.2em 0.4em 0.2em 0;
	padding: 0.4em 0.9em 0.4em 0.9em;
	text-decoration:none;
	width:auto;
	color:#000;
	background: #F0F0F0;
	border: solid 1px #000;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
}

.ori_pagenavi a:hover{
	color:#fff;
	background: #3279BB;
}

.ori_pagenavi .current{
	padding: 0.4em 0.9em 0.4em 0.9em;
	background: #3279BB;
	color:#fff;
}

背景をグラデーションにしてちょっとおしゃれスタイル

プラグインなしページナビ

.ori_pagenavi {
	clear:both;
	padding: 0.5em 0;
	position:relative;
	line-height:1.6em;
	margin-bottom: 0.5em;
}

.ori_pagenavi span, .ori_pagenavi a {
	display: inline-block;
	margin: 0.2em 0.2em 0.2em 0;
	padding: 0.6em 0.9em 0.6em 0.9em;
	text-decoration:none;
	width:auto;
	color:#fff;
	background: -webkit-linear-gradient(#4a6696, #5a7bb1);
	background: -moz-linear-gradient(#4a6696, #5a7bb1);
	background: -ms-linear-gradient(#4a6696, #5a7bb1);
	background: -o-linear-gradient(#4a6696, #5a7bb1);
	background: linear-gradient(#4a6696, #5a7bb1);
}

.ori_pagenavi a:hover{
	color:#fff;
	background: -webkit-linear-gradient(#B92A2C, #ff3300);
	background: -moz-linear-gradient(#B92A2C, #ff3300);
	background: -ms-linear-gradient(#B92A2C, #ff3300);
	background: -o-linear-gradient(#B92A2C, #ff3300);
	background: linear-gradient(#B92A2C, #ff3300);
}

.ori_pagenavi .current{
	padding: 0.6em 0.9em 0.6em 0.9em;
	background: #3279BB;
	color:#fff;
}

リンク色、ホバー色をWebサイトに揃える

該当箇所のcolor(文字色)スタイル、background(背景色)スタイルを消すと
既に指定されている、あなたのWebサイトの動きと一致します。
また、背景色を消すと見づらくなるので周りに1pxのラインを追加しています。

.ori_pagenavi {
	clear:both;
	padding: 0.5em 0;
	position:relative;
	line-height:1.6em;
	margin-bottom: 0.5em;
}

.ori_pagenavi span, .ori_pagenavi a {
	display: inline-block;
	margin: 0.2em 0.2em 0.2em 0;
	padding: 0.6em 0.9em 0.6em 0.9em;
	text-decoration:none;
	width:auto;
	border: solid 1px #000;	// 追加
//	color:#fff;				// 削除
//	background: #555;		// 削除
}

.ori_pagenavi a:hover{
//	color:#fff;				// 削除
//	background: #3279BB;	// 削除
}

.ori_pagenavi .current{
	padding: 0.6em 0.9em 0.6em 0.9em;
	background: #3279BB;
	color:#fff;
}
  • LINEで送る

“WordPressでページナビ(ページネーション)をプラグインなしで表示する” への2件のフィードバック

  1. tsutchan より:

    有難う御座いました。
    大変助かりました!

  2. […] WordPressでページナビ(ページネーション)をプラグインなしで表示する ページナビ用のCSSも多数公開されています。こちらもコピペで導入することができるので参考になります。 […]

コメントを残す

このページの先頭へ