固定ページでWP_Queryのサブループを使ったアーカイブのページャーを実装する
最終更新日: Update!!
タイトルの通りですが実装にあたり結構行き詰まったので残しておきたいと思います。本来ページャーはアーカイブページ内であったり、メインループではそのまま使用できますが、固定ページやサブループではページャーがうまく機能しないなどの問題が発生します。
例として今回は固定ページでカスタム投稿の表示条件を指定したサブループを前提として進めていきます。ループの出力はこんな感じです。下記では通常投稿のカスタム分類「taxonomy01」に属するターム「term02」を持つ記事を12件ずつ表示させるという内容になっています。
【page.php】※一部抜粋
これで固定ページでサブループのページャーを実装することができました。固定ページでページャーを使うケースですとスラッグを指定したい時など限定的ですが、サブループでは結構必要になる場面も多いのではないでしょうか。 (参考にさせていただいたサイト様) WordPressの固定ページで、WP_Queryで記事を取得するもページネーション(the_posts_pagination)がうまく動作しない場合の解決方法。 WP_Queryでページネーションがうまくいかなくて対応したこと
<?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でページネーションがうまくいかなくて対応したこと
sponserd
keyword search
categories
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
comments
オガワ シンヤ
みゅう