フリーランスエンジニアのもさくです。
前回の記事でメインループとサブループの違いは解説しました。
メインループはお馴染みの、if ( have_posts()、while( have_posts()の関数のコードの奴でしたね。
このコードを書くと管理画面の「投稿」から投稿した記事の一覧が表示される仕組みというのはお分かりでしょうか？
index.phpとかで使用されることが多いですね。
ちょっと何言ってるか分かりませんみたいな人は、下記の記事を先に見てから、またこちらの記事に戻ってきた方が効率いいかと思います。
今日はメインループでは表示できない、特定のカスタムタクソノミーの記事一覧や、特定の条件に合う記事一覧を表示することができるサブループについて作成方法や細かいことも含めて解説していきます。
実際にカスタム投稿を作成したら、サブループの作り方分からないと使い物になりませんからね。
面倒ですけど、ここで一気に覚えてしまいましょう！
WordPressでサブループを作成する方法
それでは本題のサブループの作り方を見ていきましょう。
<?php
$products_query = new WP_Query(
array(
'post_type' => 'post',
'category_name' => 'products',
'posts_per_page' => 6,
)
);
?>
<?php if ( $products_query->have_posts() ) : ?>
<?php while ( $products_query->have_posts() ) : ?>
<?php $products_query->the_post(); ?>
<p>処理内容</p>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>サブループはメインループから一時的に外れたループであり、特定の記述を加えることによって、
「サブループが終わったら、メインループに戻りましょうね！」という仕様にしておきます。
「カテゴリーが「products」の投稿の記事を部分的に6記事だけ」サブループで出力すると上記のようになります。
それではもう少し切り取って中のコードを見ていきましょう。
WP_Queryでループ内容をカスタマイズ
$products_query = new WP_Query(
array(
'post_type' => 'post',
'category_name' => 'products',
'posts_per_page' => 6,
)サブループを作る上で必ず覚えておくべき記述が、WP_Queryです。ループの条件を指定する記述だと認識してください。
- 投稿タイプを「post」、
- カテゴリーのスラッグ名を「products」、
- 1ページあたりに取得する記事数を「3」、
という条件を指定しています。
ここで作った条件をサブループでループさせます。
ループに条件を反映
<?php if ( $products_query->have_posts() ) : ?>
<?php while ( $products_query->have_posts() ) : ?>
<?php $products_query->the_post(); ?>have_posts()の前にとthe_post()の前に$news_query->が追加されているのが分かるかと思います。このようにWP_Queryで作成した条件をループ処理に反映させています。
メインループに戻す ※サブループの注意点※重要
<?php wp_reset_postdata(); ?>サブループが終わった後のお約束として、上記の記述が必須です。
この記述がないといつまでも、グローバル変数の$postなどが書き変えられてしまい正しく取得できません。
WP_Queryとwp_reset_postdata()はセットで書くことを覚えておきましょう！
サブループが終わったらループの条件などをリセットする必要があるという認識でOKです！
サブループはいくつでも増やせます
テンプレートの中でサブループはいくつでも作成し増やすことができます。
例えばこんな感じです。
<?php
$news_query = new WP_Query( //ニュースカテゴリー出力
array(
'post_type' => 'post',
'category_name' => 'news',
'posts_per_page' => 5,
)
);
$blog_query = new WP_Query( //ブログカテゴリー出力
array(
'post_type' => 'post',
'category_name' => blog',
'posts_per_page' => 5,
)
);
$prpducts_query = new WP_Query( //商品カテゴリー出力
array(
'post_type' => 'prpducts',
'category_name' => 'news',
'posts_per_page' => 5,
)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
<?php while ( $news_query->have_posts() ) : ?>
<?php $news_query->the_post(); ?>
<p>処理内容</p>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?> //この記述は必須上記は、
- news
- blog
- products
の三つのカテゴリーをサブループで出力するコードになります。
これは、$news_queryと'category_name'の値だけを変えて並べただけのものになりますが、よく使うパターンなので覚えておきましょう。
サプループのページャーの作り方
まずは、コードから、
$big = 999999999;
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'current' => max( 1, get_query_var( 'paged' ) ),
'total' => $news_query->max_num_pages,
'mid_size' => 1,
'end_size' => 1,
'prev_text' => '前',
'next_text' => '次',
'type' => 'plane',
) );注意点は'total'で指定している$news_queryだけは、WP_Queryで作成した時の変数に置き変える必要があります。
あとは下記に公式の記述方法があるので、公式を見ながらカスタマイズを行いましょう！
WordPress Codex 日本語版 → 関数リファレンス/paginate links – WordPress Codex 日本語版
WP_Queryのプロパティ一覧
WP_Queryでは色々なパターンでループをカスタマイズできます。
数も多いので全て覚えることは難しいですが、カスタマイズの際は公式も参考にしてください。
WordPress Codex 日本語版 → 関数リファレンス/paginate links – WordPress Codex 日本語版
この中でも割とよく実案件でも登場するプロパティをまとめました！
| プロパティ | プロパティの意味 |
orderorderby | 並び順の指定 |
posts_per_page | 1ページあたりの表示数指定 |
cat | カテゴリーIDの指定 |
paged | ページ番号 |
s | 検索キーワードの指定 |
post_type | 投稿タイプの指定 |
後は公式を参考にしながら、使いたいものをより詳しく見た方が頭に入ると思います。
記事はランダムにも表示できます！
<?php
$the_query = new WP_Query( array(
'orderby' => 'rand',
'posts_per_page' => '6',
) );
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>'orderby' => 'rand'で並び順をランダムにできます！
そういった要望も多いので、この辺りも覚えておきましょう。
今日はWordPressでサブループを作成する方法＋注意点などを色々まとめました。
サブループのページャーのカスタマイズも少し変わっているので、詰まらないためにも覚えておきたいですね。
あとはWP_Queryの書き方とパラメーターを、関数リファレンス/paginate links – WordPress Codex 日本語版 を参考にしながら少しづつ頭の中に入れていければ完璧ですね。
サブループは必ずと言っていいほど、ワードプレス化で使用しますので基礎から逃げずにしっかりと固めておきましょう。
