OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

固定ページでWP_Queryのサブループを使ったアーカイブのページャーを実装する

最終更新日:2020.12.10 Update!!
タイトルの通りですが実装にあたり結構行き詰まったので残しておきたいと思います。本来ページャーはアーカイブページ内であったり、メインループではそのまま使用できますが、固定ページやサブループではページャーがうまく機能しないなどの問題が発生します。   例として今回は固定ページでカスタム投稿の表示条件を指定したサブループを前提として進めていきます。ループの出力はこんな感じです。下記では通常投稿のカスタム分類「taxonomy01」に属するターム「term02」を持つ記事を12件ずつ表示させるという内容になっています。 【page.php】※一部抜粋
<?php
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'posts_per_page' => 12,
    'paged' => $paged,
    'post_type' => 'post',
    'tax_query' => array(
      array(
        'taxonomy' => 'taxonomy01',
        'field' => 'slug',
        'terms' => 'term02'
      )
    )
  );
  $the_query = new WP_Query( $args ); 
  $pages = $the_query->max_num_pages;
  $wp_query->max_num_pages = $pages;
  if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
?>

〜 ループさせるコンテンツ 〜

<?php endwhile; ?>
<?php else: ?>
  <p>まだ投稿がありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
  ここで重要になるのが「paged」の指定です。まず、WP_Queryの引数配列内において、pagedを指定しないとページャーが有効化となりません。さらに今回は固定ページ内で実装するので、$pagedの値として「get_query_var('paged')」をいれてあげる必要があります。サブループなので最後にクエリをリセットすることを忘れないようにしましょう。   また、サブループの場合には最後のページ番号(つまりトータルのページ数)をmax_num_pagesで取得しておきます。また、ページネーションでは「$wp_query」からページ数を参照するので、サブループで取得したページ数を、「$wp_query->max_num_pages」に代入しておきます。そしてこのループに続きページャーも出力していきます。コードはこんな感じになりました。
<?php
  $pages = $wp_query->max_num_pages;
  $showItems = 3;
  if($pages != 0 && $pages != 1) {
    echo '<ul>';
    if($paged != 1) {
      // first
      echo '<li><a href="'.get_pagenum_link(1).'">&lt;&lt;</a></li>';
      // previous
      echo '<li><a href="'.get_pagenum_link($paged - 1).'">&lt;</a></li>';
    }
    for($index = 0; $index <= $showItems - 1; $index++) {
      if($index == 0) {
        // current
        echo '<li><a href="'.get_pagenum_link($paged).'">'.$paged.'</a></li>'; 
      } else {
        // page index
        if($paged + $index <= $pages) {
          echo '<li><a href="'.get_pagenum_link($paged + $index).'">'.($paged + $index).'</a></li>'; 
        }
      }
    }
    if($paged != $pages) {
      // next
      echo '<li><a href="'.get_pagenum_link($paged + 1).'">&gt;</a></li>';
      // last
      echo '<li><a href="'.get_pagenum_link($pages).'">&gt;&gt;</a></li>';
    }
    echo '</ul>';
  }
?>
  ページャーを出力するコードを記述するのですが、固定ページ内ではページャーを正常に動かすために必要となる情報の「max_num_pages」がそのままでは正しく取得できないため、先ほど$wp_queryに代入した値を参照とするようにしています。ページネーションの詳しい解説については過去記事「WordPressでmax_num_pagesとget_query_varを使ってページネーションを実装する」をご参照ください。  
  これで固定ページでサブループのページャーを実装することができました。固定ページでページャーを使うケースですとスラッグを指定したい時など限定的ですが、サブループでは結構必要になる場面も多いのではないでしょうか。   (参考にさせていただいたサイト様) WordPressの固定ページで、WP_Queryで記事を取得するもページネーション(the_posts_pagination)がうまく動作しない場合の解決方法。 WP_Queryでページネーションがうまくいかなくて対応したこと
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

COMMENTS

  • オガワ シンヤ

    2019.11.26
    みゅうさん コメントありがとうございます。こちらの記事が役立ったようで良かったです。ページャーの場合は必ず「全ページ数」と「現在のページ」の情報が必要になりますので、それぞれ「max_num_pages」と「paged」で値を取得しないと1ページ目の内容が出るという問題が発生するのではないでしょうか。本記事では固定ページでページャーを使う例を挙げていますが、本来ページャーはアーカイブページで扱うものになるので、固定ページでページャーを使わなくても良い設計にするのが最善かもしれませんね、、
  • みゅう

    2019.11.25
    サブループでのページャーがおかしくて、2ページ目以降も1ページ目と同じ内容がでてしまい、 検索していろんな方法をやりつくし2日目・・・ こちらのサイトを見つけためしたところ、できました!!!! もうどうしようかと、1から作り直したほうが早いんじゃないかとおもうくらい途方にくれていましたが 解決して本当に感謝です。 ありがとうございました。

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram