the_posts_paginationで5ページ以上のときに常に5ページ分リンクを表示する方法

5ページ以上あるときに、1ページ目や最終ページでも常にページングのリンクを5ページ分表示したいケースがあったのでその方法を記載しておきます。

まずは結論

PHPはこんなかんじです。

global $wp_query;
$pageMax = (int)$wp_query->max_num_pages; // 最後のページ番号
$current = max( 1, get_query_var('paged') ); // 現在のページ番号
$midSize = 2; // 現在のページから前後何ページ分表示するか指定。今回は2ページ。

if ($current === 1 || $current === $pageMax) { // 1ページ目、最後のページのときは前後4ページ分表示
    $midSize = 4;
} elseif ($current === 2 || $current === $pageMax - 1) { // 2ページ目、(最後のページ - 1)ページ目のときは、前後3ページ分表示
    $midSize = 3;
}
the_posts_pagination(array(
    'mid_size'      => $midSize,
    'prev_next'     => true,
    'prev_text'     => ('<'),
    'next_text'     => ('>'),
    'type'          => 'list',
));

次にJSで、ドット、最初のページ、最後のページを非表示にする。

(function ($) {
  $('.page-numbers.dots').parent('li').hide(); // ドットを非表示

  var $target = $('ul.page-numbers li'); // liを指定
  var $current = $('.page-numbers.current').parent('li'); // カレントのliを指定
  var currentNum = $current.text(); // 現在のページ
  var max = <?php echo $pageMax; ?>; // 最後のページ

  if (max > 5) { // 5ページ以上ある場合のみ処理
    if (currentNum <= 3) { // 現在のページが3ページ以下の時
      $('.page-numbers.next').parent('li').prev().hide(); // 最後のページを非表示

    } else if (currentNum >= max - 2) { // 現在のページが(最後 - 2)ページ以上のとき
      $('.page-numbers.prev').parent('li').next().hide(); // 最初のページを非表示

    } else if (currentNum >= 4 && (currentNum <= max - 3)) { // 現在のページが4ページ〜(最後 - 3)ページの時
      $('.page-numbers.prev').parent('li').next().hide(); // 最初のページを非表示
      $('.page-numbers.next').parent('li').prev().hide(); // 最後のページを非表示
    }
  }
})(jQuery);

これでいけます。5ページ表示にしておけば使いやすいかなと思いますが、JS部分は特に入れなくてもいいかと思います。

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP