system
矢口 奈果

2020.8.24HTML/CSS システム開発 

Webクリエイター

矢口 奈果

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

こんにちは。右すねを異様に虫に刺されるタイプのWebクリエイター、矢口です。
今回はWordPressアーカイブページ用のページャーを改修したので、そちらを紹介したいと思います。

◎こんなかんじのやつ
コメント 2020-08-04 162249

以前はこちらのページャーで運用していたのですが、
 

  • 「最初・最後のページに一発で飛べるようにしてほしい」
  • 「一目でページ数が分かると良い」

 
という意見があったため、今回改修を行いました。
一般的なものとして矢印があるページャーが多いですが、
今回は数字のみで「最初/最後/前後」のページに飛べる仕様のため、矢印は置いていません。
 
 

処理側のコード

functions.phpに以下のコードを貼り付け

function mr_the_archive_pager(){
global $wp_query;

//url関係
$now_page_data = parse_url($_SERVER[“REQUEST_URI”]);//トップURL
$base_url = preg_replace(‘/\/page\/.*/’,’/’,$now_page_data[‘path’]);//アーカイブページのURL
$max_page = intval($wp_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){
&emsp ;$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_80″>’;

////最初のページ…
if($key_f){
 $html .= <<<EOT
 <li class=”g_pager_li”><a href=”{$base_url}”>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}/\”>{$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}\”>{$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}”>{$max_page}</a></li>
EOT;
}

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

}

echo $html;

 

表示側のコード

archive.phpのページャーを表示したい場所に以下のコードを貼り付け

mr_the_archive_pager();

 

サンプル

・1ページ目
グループ 1
・最後のページ
グループ 2
・ページ数2桁
グループ 3
 
いかがでしたでしょうか。
スタイルは書きませんが、ご自由に当ててもらえればと思います。レインボーページャーとか。

皆さんもハッピーページャーライフをお過ごしくださいね。(?)

それでは。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら

その他の記事

ページTOPへ