BLOGスタッフブログ

2022.08.30 コーディング

【WordPress】プラグイン無し!アーカイブ用ページャー【改Ⅱ】

こんにちは。前回のブログから一度だけそうめんを食べたWebクリエイターです。
揖保○糸はおいしいですね。そうめんやっぱり揖○乃糸だと思います。

さて、私が2年前に書いたこの記事で紹介したWordPressアーカイブページ用のページャーですが、さらに改良を加えたのであらためてご紹介したいと思います。

なお、前バージョンと基本機能や見え方は変わらず、機能面のみの改修を行っています。

ソースコード

処理側

こちらはfunctions.phpやそれに該当するファイルに記載してください。

function mr_the_archive_pager($the_query){
	// 投稿が存在しない場合、ページャー作成をキャンセル
	if (!$the_query->have_posts()) {
		return;
	}

	//URL取得
	$now_page_data = parse_url($_SERVER["REQUEST_URI"]);//トップURL
	$base_url = preg_replace('/\/page\/.*/','/',$now_page_data['path']);//アーカイブページのURL

	//パラメータがついている場合に取得
	if (!empty($now_page_data['query'])) {
		$url_param = '?' . $now_page_data['query'];
	}else{
		$url_param = '';
	}

	$max_page = intval($the_query->max_num_pages);//最後のページ
	$page_nth = (get_query_var('paged')) ? get_query_var('paged') : 1;//現在のページ数


	////前
	if(($max_page - $page_nth) < 1){
		if(2 - ($max_page - $page_nth) >= $page_nth){
			$prev = $page_nth-1;
		}else{
			$prev = 2 - ($max_page - $page_nth);
		}
	}else{
		if(1 >= $page_nth){
			$prev = $page_nth - 1;
		}else{
			$prev = 1;
		}
	}

	////後
	if(1 >= $page_nth){
		if(2 - $prev >= $max_page - $page_nth){
			$next = $max_page - $page_nth;
		}else{
			$next = 2 - $prev;
		}
	}else{
		if(1 >= $max_page - $page_nth){
			$next = $max_page - $page_nth;
		}else{
			$next = 1;
		}
	}

	//3ページ目かつ合計ページ数が3ではない時、「最初のページ+...」出力
	$key_f = false;
	if(($prev + $page_nth) > 3 && $max_page !== 3){
		$key_f = true;
	}
	//最後のページ数から3番目のページの時点で、「...+最後のページ」出力
	$key_l = false;
	if(($next + $page_nth) < $max_page){
		$key_l = true;
	}

	//合計ページ数が2以上でページャー出力
	if($max_page !== 1){

	$html .= '<ul class="l_flex l_justifyContentCenter g_sec">';

	////最初のページ...
	if($key_f){
		$html .= <<<EOT
		<li class="g_pager_li"><a href="{$base_url}{$url_param}">1</a></li>
		<li class="g_pager_dots">...</li>
EOT;
	}


	////前の数字
	while($prev>0){
		$prev_nth = $page_nth - $prev;
		$html .= "<li class=\"g_pager_li\"><a href=\"{$base_url}page/{$prev_nth}/{$url_param}\">{$prev_nth}</a></li>";
		$prev--;
	}

	////現在
	$html .= "<li class=\"g_pager_li current\">{$page_nth}</li>";

	////後の数字
	$i = 1;
	while($next>0){
		$next_nth = $page_nth + $i;
		$html .= "<li class=\"g_pager_li\"><a href=\"{$base_url}page/{$next_nth}/{$url_param}\">{$next_nth}</a></li>";
		$next--;
		$i++;
	}

	////...最後のページ
	if($key_l){
		$html .= <<<EOT
		<li class="g_pager_dots">...</li>
		<li class="g_pager_li"><a href="{$base_url}page/{$max_page}/{$url_param}">{$max_page}</a></li>
EOT;
	}

	$html .= "</ul>";//閉じる

	}

	echo $html;
}

呼び出し側

ページャーを表示したい場所に記載してください。
「$wp_query」はWP_Queryなどでサブループを回している場合、必要に応じてクエリを格納している変数に書き換えてください。

<?php mr_the_archive_pager($wp_query); ?>

修正点

①パラメータがある場合は保持する

例えば上記に記載したように、パラメータでの記事の出し分けを行っている場合など。

例:カスタムフィールドaaaの値がbbb場合の投稿一覧 など

従来のページャーではここを考慮しておらず、仮にパラメータ付与後のページ数が2ページ以上あった場合、正常に機能しませんでした。

他にも、検索機能を追加できるWordPressプラグイン「FE Advanced Search」を利用している場合の検索結果画面でも同じことが起こります。(検索条件をパラメータに格納しているため)

このため、改良版のコードにはパラメータが付いている場合にデータを取得し、

	//パラメータがついている場合に取得
	if (!empty($now_page_data['query'])) {
		$url_param = '?' . $now_page_data['query'];
	}else{
		$url_param = '';
	}

ページャー内のリンクで保持するように修正しました。

	<li class="g_pager_li"><a href="{$base_url}{$url_param}">1</a></li>

②投稿が0件の時に表示させない

ソース内の順番が前後しますが、冒頭にある記述で投稿が存在しない(0件)の場合に生成しない処理を追加しています。

	// 投稿が存在しない場合、ページャー作成をキャンセル
	if (!$the_query->have_posts()) {
		return;
	}

従来は投稿が無い場合、ループ外で呼び出すと「1」のページャーだけがぽつねんと存在してしまうという不具合がありました。

※イメージ

一応ループ内に記述して条件分岐をすることでも解消はするのですが、そもそもループ内外で左右されないように修正を行いました。

上記2点を対応したことにより、ほとんどのパターンで正常に生成することが可能になったと思います。

ちなみに、前回からカスタム投稿タイプの想定で作成しているため、デフォルト投稿タイプで正常に挙動するかは今後の検証の必要がありそうです。。

今後さらに改良することがあれば、また共有したいと思います。
リニューアルされた弊社のサイトも是非お楽しみください。

それでは。

関連ページ

矢口 奈果が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します