Kinchan's Blog

Jul 5th, 2017 - About WordPress - Written by

WordPress ページネーションカスタム

WordPressロゴ

本日はWordPressのページネーション、ページャーに関してのカスタムに関して記載していきたいと思います。
具体的に言うと、WordPressにレスポンシブのページネーションを設置するカスタマイズ方法 | 寝ログ で紹介されているコードを少しカスタマイズ致します。

寝ログさんのページの動作確認の部分でも少し触れられていますが、掲載されているコードのままでは、現在最終ページを表示しているのに、次のページへボタンが押せてしまい、クリックすると404(このページは存在しません)ページに飛ばされてしまいます。
それをクリックしても404ページへ移動しないように記述内容を足してリンクを無効にする方法です。

１．元となるページネーションの実装コード

//レスポンシブなページネーションを作成する
function responsive_pagination($pages = '', $range = 4){
  $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(1 != $pages) {
    echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
    //先頭へ
    echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
    //1つ戻る
    echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
    //番号つきページ送りボタン
    for ($i=1; $i <= $pages; $i++)     {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))       {
        echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
      }
    }
    //1つ進む
    echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
    //最後尾へ
    echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
    echo '</ul>';
  }
}

２．変更後の実装コード

<?php
function responsive_pagination($pages = '', $range = 4){
  $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(1 != $pages) {
    echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
    //先頭へ
    echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
    //1つ戻る
    if($paged > 1) {  //現在のページ値が１より大きい場合の表示
      echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
    }else{  //最初のページを表示している時はリンク無効にして表示
      echo '<li class="previous"><a><span>Previous</span></a></li>';
    }
    //番号つきページ送りボタン
    for ($i=1; $i <= $pages; $i++)     {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))       {
        echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
      }
    }
    //1つ進む
    if ($paged < $pages) {  //全ページ数より現在のページ値が小さい場合の表示
      echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
    }else{  //最後のページを表示している時はリンク無効にして表示
      echo '<li class="next"><a><span>Next</span></a></li>';;
    }
    //最後尾へ
    echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
    echo '</ul>';
  }
}
?>

変更した部分は、//1つ戻ると//1つ進むのコメントの下に条件分岐の命令を追加しました。
上記の形では単純に最初のページ、最後のページではリンク先設定していないだけですので、クリックしてもページ移動しないと言うだけで、ボタンそのものは視認出来ます。

ボタン自体も最初のページ、最終のページでは表示させたくないというのであれば、<a></a>タグを消してしまえば、1つ戻るor1つ進むボタンは消えます。

ページがないのに進んでしまい、404ページを表示するコトになるのは嫌だなとお悩みの方がいらっしゃいましたら、お試しくださいませ。

尚、このページに掲載しているコードはfunction.phpへの記述コードだけで、レスポンシブ化させるためのCSSコードや、実際に反映させたい所へ表示させるコードなどの記述は掲載しておりません。

詳しく知りたい方は、寝ログさんのページにてご確認くださいませ。

Categories: WordPress