固定ページで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
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
- Reactで値や関数をメモ化してパフォーマンスを改善してみる(React.memo, useMemo, useCallback)
Reactで値や関数をメモ化してパフォーマンスを改善してみる(React.memo, useMemo, useCallback)
- WordPressでフォームを使ったカスタムフィールド掛け合わせの検索機能実装と注意するポイント
WordPressでフォームを使ったカスタムフィールド掛け合わせの検索機能実装と注意するポイント
- JavaScriptで配列やオブジェクトの操作に使えるTips
JavaScriptで配列やオブジェクトの操作に使えるTips
- React+TypeScript(TSX)でコンポーネントを使った効率のよい静的HTMLコーディング
React+TypeScript(TSX)でコンポーネントを使った効率のよい静的HTMLコーディング
- webpackを使うVue.js 3系とTypeScriptの環境構築メモ
webpackを使うVue.js 3系とTypeScriptの環境構築メモ
- Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
- ブロークングリッドなレイアウトをコーディングするときに使えるCSSのテクニック
ブロークングリッドなレイアウトをコーディングするときに使えるCSSのテクニック
comments
オガワ シンヤ
みゅう