• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

26

JULY

ウェブFRIDAY 2019 / 7 / 26

コピペで簡単!wordpressでアーカイブページのページャーの数字の数を固定する。<wordpress><pager><archive>

Text by Shinji Sato

  • カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook

こんにちは。

佐藤です。

 

 

wordpressのアーカイブページでページャーを

設置する関数「the_posts_pagination()

 

 

 

とても便利なこの関数ですが、表示するページ番号の数が

左右にそれぞれ表示するページ番号の数

となっており、最初や最後のページと、

中間あたりのページで表示される数が倍半分違ってきます。

 

 

 

それを解消するために、

その都度アーカイブに合わせたページャーを制作して使用していたのですが、

 

だんだん面倒になって来たので汎用的なものを作りました。

 

せっかくなので紹介します。

 

 

 

 

まず以下のコードをfunction.phpにコピー&ペースト

 

/*
* original_pager
*
* ワードプレスのアーカイブページのページャーを作成する。
* 
*
* @param array $args {
*   @type string prev_text :前ページリンクのテキスト、空にすると非表示。初期値、'←'.
*   @type string next_text :次ページリンクのテキスト、空にすると非表示。初期値、'→'.
*   @type string first_text :最初のページへのリンクのテキスト、空にすると非表示。初期値、'first'.
*   @type string last_text :最後のページへのリンクのテキスト、空にすると非表示。初期値、'last'.
*   @type int visit_nth :currentページを含む総ページ数。奇数を入力、偶数設定の場合は+1した場合と同じ結果。初期値、5.
*   @type boolean last_number :最後のナンバーが表示がされていない時に「...12」の様な表示をする。初期値、true.
*   @type string output :'return'もしくは'echo'を指定。'return'にすると文字列を返す。初期値、'echo'.
* }
*/
function original_pager($args = null){
  global $wp_query;

  $my_setting = array(
    'prev_text' => '←',
    'next_text' => '→',
    'first_text' => 'first',
    'last_text' => 'last',
    'visit_nth' => 5,
    'last_number' => true,
    'output' => 'echo',
  );
  if(is_array($args)) $my_setting = array_merge($my_setting,$args);

  //url関係
  $now_page_data = parse_url($_SERVER["REQUEST_URI"]);
  $base_url = preg_replace('/\/page\/.*/','/',$now_page_data['path']);
  $url_query = $now_page_data['query'] ? '?'.$now_page_data['query'] : '';
  $max_page = intval($wp_query->max_num_pages);
  $page_nth = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $last_page = "{$base_url}page/{$max_page}/{$url_query}";

  //次のページと前のページの取得
  $next_page = $my_setting['next_text'] ? get_next_posts_link($my_setting['next_text']) : 'hidden';
  $prev_page = $my_setting['prev_text'] ? get_previous_posts_link($my_setting['prev_text']) : 'hidden';

  //数字の左と右の表示数を設定
  if($my_setting['visit_nth']%2==0){
    $base_nth = $my_setting['visit_nth']/2 ;
  }else{
    $base_nth = ($my_setting['visit_nth'] - 1) / 2;
  }

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

  ////後
  if($base_nth >= $page_nth){
    if($base_nth*2 - $mae >= $max_page - $page_nth){
      $ato = $max_page - $page_nth;
    }else{
      $ato = $base_nth*2 - $mae;
    }
  }else{
    if($base_nth >= $max_page - $page_nth){
      $ato = $max_page - $page_nth;
    }else{
      $ato = $base_nth;
    }
  }

  ////点々表示
  $key = false;
  if(($ato + $page_nth) < $max_page){
    $key = true;
  }


  $html = '<nav class="pager">';

  //最初
  if($my_setting['first_text']){
    if($page_nth !== 1){
      $html .= "<p class=\"first\"><a href=\"{$base_url}{$url_query}\">{$my_setting['first_text']}</a></p>";
    }else{
      $html .= "<p class=\"first\"><span class=\"no-link\">{$my_setting['first_text']}</span></p>";
    }
  }

  //前
  if($prev_page !== 'hidden' && $prev_page){
    $html .= "<p class=\"prev\">{$prev_page}</p>";
  }elseif(!$prev_page){
    $html .= "<p class=\"prev\"><span class=\"no-link\">{$my_setting['prev_text']}</span></p>";
  }

  //数字関係
  $html .= '<p class="nth-box">';

  ////前の数字
  while($mae>0){
    $mae_nth = $page_nth - $mae;
    $html .= "<a href=\"{$base_url}page/{$mae_nth}/{$url_query}\">{$mae_nth}</a>";
    $mae--;
  }

  ////現在
  $html .= "<span class=\"current no-link\">{$page_nth}</span>";

  ////後の数字
  $i = 1;
  while($ato>0){
    $ato_nth = $page_nth + $i;
    $html .= "<a href=\"{$base_url}page/{$ato_nth}/{$url_query}\">{$ato_nth}</a>";
    $ato--;
    $i++;
  }

  ////数字それ以上
  if($key && $my_setting['last_number']){
    $html .= <<<EOT
    <span class="tenten">...</span>
    <a href="{$base_url}page/{$max_page}/{$url_query}" class="last-nth">{$max_page}</a>
EOT;
  }

  $html .= "</p>";

  //次
  if($next_page !== 'hidden' && $next_page){
    $html .= "<p class=\"next\">{$next_page}</p>";
  }elseif(!$next_page){
    $html .= "<p class=\"next\"><span class=\"no-link\">{$my_setting['next_text']}</span></p>";
  }

  //最後
  if($my_setting['last_text']){
    if($page_nth !== $max_page){
      $html .= "<p class=\"last\"><a href=\"{$last_page}\">{$my_setting['last_text']}</a></p>";
    }else{
      $html .= "<p class=\"last\"><span class=\"no-link\">{$my_setting['last_text']}</span></p>";
    }
  }

  $html .= "</nav>";

  if($my_setting['output'] == 'echo'){
    echo $html;
    return;
  }else{
    return $html;
  }
  
}

 

 

その後archive.phpのページャを出力したい箇所に以下を記述するとその場所にページャーが出力されます。

<?php original_pager() ?>

 

 

この時引数に配列で値を渡してやることで色々設定可能です。

効果のある設定と初期値は以下の通りです。

$args = array(
  'prev_text' => '←',
  'next_text' => '→',
  'first_text' => 'first',
  'last_text' => 'last',
  'visit_nth' => 5,
  'last_number' => true,
  'output' => 'echo',
);

●prev_text (string)
前ページリンクのテキスト、空にすると非表示。

●next_text (string)
次ページリンクのテキスト、空にすると非表示。

●first_text (string)
最初のページへのリンクのテキスト、空にすると非表示。

●last_text (string)
最後のページへのリンクのテキスト、空にすると非表示。

●visit_nth (int)
currentページを含む総ページ数。奇数を入力、偶数を入力した場合は+1場合と同じ結果。

●last_number (boolean)
最後のナンバーが表示されていない時に「…12」の様な表示をする。

●output (string)
‘echo’もしくは’return’。
‘return’を指定すると文字列を返す。

入力例:

$args = array(
  'prev_text' => '←',
  'next_text' => '→',
  'first_text' => '',
  'last_text' => '',
  'visit_nth' => 7,
  'last_number' => false,
  'output' => 'echo',
);
<?php original_pager($args) ?>

 

 

 

 

 

カテゴリーアーカイブやカスタム投稿タイプのアーカイブなど

大概のアーカイブで問題なく使えます。(のはず)

※スタイルは出力しないので各自好みのスタイルを適応して使おう。

 

 

 

 

 

 

 

 

佐藤真司隠しプロフィール画像

TEXT by

佐藤 真司さとうしんじ)

1990年 鳥取県米子市生まれ。
株式会社マジックワード フロントエンドエンジニア。

この人が書いた他の記事を読む