WordPressの任意のループ(サブループ)を作る方法と覚えておきたい指定方法

WordPressでサイト制作する上で絶対に押さえておくべき仕組みの1つに「任意のループを作る」があると思っています。

「ループ」とは管理画面から投稿した記事をまとめて一覧で表示させる仕組みとイメージしていただければいいと思います。これをテンプレートの好きな場所に好きな条件で表示させられうかどうかが、思い通りのサイトを作れるかどうかの分かれ道になるかもしれません。

よくあるのが、コーポレートサイトのトップページの一部に「新着ニュース」を部分的に表示されるみたいな書き方ですね。

この記事では、WordPressで好きな箇所に好きなループを作る方法を紹介していきます。

はにわまん
好きなようにループが書けるとWordPressが楽しくなってくるかもしれません!

WordPressの任意のループを作る方法

説明の順番としてメインループが一応いると思ったので、メインループ → サブループ(任意のループ)の順に説明していきます。

メインループを知る

通常のループは以下のような書き方をします。この何もカスタマイズしていないループをメインループと呼びます。一般的なテーマでこの記述がないテーマは存在しないはずです。

コピー<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : ?> <?php the_post(); ?> <p>処理内容</p> <?php endwhile; ?> <?php endif; ?>

ここでループする内容は呼び出されるテンプレートごとに異なるのですが、

  • page.phpから呼ばれたなら、固定ページの該当記事
  • category.phpから呼ばれたなら、該当カテゴリーの一覧

みたいな感じです。

category.phparchive.phpから呼ばれる時の表示件数は、管理画面の「表示設定」で決まっています。

この設定は全体のループに反映されることになるので、例えばカテゴリーが「news」の投稿の記事を部分的に5記事だけ表示させたいといったことはメインループを使うことでは実現ができません。

サブループを知る

サブループはメインループから一時的に外れたループという覚え方をするといいかと思います。一時的という表現を使ったのは、「サブループを使った後はメインループに戻しましょう」という意味をこめています。

先ほど例に出した、「カテゴリーが「news」の投稿の記事を部分的に5記事だけ」をサブループで表現すると以下のようになります。

コピー<?php $news_query = new WP_Query( array( 'post_type' => 'post', '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(); ?>

今回のサブループを使うことによって、例えば以下のようなページを作ることができます。
(参考)→ 静的HTMLサイトをWordPress化するときの具体的な移行手順

メインループから追加された内容を解説していきます。

1、WP_Queryでループ内容をカスタマイズ

任意のループを作る上で必須で覚えておくべきがWP_Queryです。ループの条件を指定するものと捉えていただければと思います。

コピー$news_query = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'news', 'posts_per_page' => 5, ) );

投稿タイプを「post」、カテゴリーのスラッグ名を「news」、1ページあたりに取得する記事数を「3」という条件を指定しています。ここで作った条件をループでループさせていきます。

ちなみに一昔前によく使われたquery_posts();はあまり推奨されない書き方なので、使わないようにしましょう。

2、ループに条件を反映

have_posts()the_post()の前に$news_query->が追加されているのが分かるかと思います。このようにWP_Queryで作成した条件をループ処理に反映させています。

コピー<?php if ( $news_query->have_posts() ) : ?> <?php while ( $news_query->have_posts() ) : ?> <?php $news_query->the_post(); ?>

3、メインループに戻す

サブループが終わった後のお約束として、以下の記述を書いてあげます。

コピー<?php wp_reset_postdata(); ?>

WP_Queryで書き換わったループをなかったことにするというイメージでいいかと思います。

書かないといつまでも、グローバル変数の$postなどが書き換えられていて正しく取得できない可能性があります。WP_Querywp_reset_postdata()はセットで書くことを覚えておきましょう!

サブループはいくつでも書ける

そしてWP_Queryで作るサブループはテンプレート内でいくつでも作成が可能です。

今回のサブループの例で出した、投稿のカテゴリースラッグ名を指定して新着3件を表示するというサブループをいくつかのカテゴリーで作れば、3件ごとにカテゴリーで分けられたページが作ることができたりします(ブログのトップページとかでよく見ますね)

テスト的にわたしの「wordpress」「css」「javascript」で作ってみました。これは、$news_query'category_name'の値だけを変えて、並べただけです(長さの関係上、3件ずつにしました。)
※ Gif動画

サブループのページャーは癖がある

サブループでページャーを設置したい場合は、少し癖があります。訳の分からない$bigなどがありますが、公式を参考に「こういうもんだ」と割り切って使うのがいいのかなと思っています・・・(わたしが理解できていないだけ)
公式の参考 → 関数リファレンス/paginate links – WordPress Codex 日本語版

'total'で指定している$news_queryだけは、WP_Queryで作成した時の変数に置き換えてあげる必要があります。

コピー$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', ) );

WP_Queryで覚えておきたいプロパティ

WP_Queryではありとあらゆるパターンでループをカスタマイズできます。めちゃくちゃ多いので覚えることはできないと思いますが、カスタマイズしたくなった際は以下のページのプロパティを参考に設定してみてください。
関数リファレンス/WP Query – WordPress Codex 日本語版

この記事ではわたしが個人的によく使うWP_Queryのプロパティを紹介していきます。

プロパティ意味
posts_per_page1ページあたりにどれだけ表示させるか
管理画面の表示設定に縛られずに表示させるには、この指定は書かせません。-1で指定すると、件数指定なして全件が表示させるようにできます。
ページ送りパラメータ
catカテゴリーIDの指定
カテゴリーIDを絞ってループを回したい場合に使います。
カテゴリーのパラメータ
post_type投稿タイプの指定
カスタム投稿タイプを作成している場合に指定を書き換えたりします。「お知らせ」用の投稿タイプをトップページにちょっと出したいときとか。
投稿タイプのパラメータ
pagedページ番号
一覧ページなどを作る際は2ページ以降も必要です。このパラメーターは○ページを指定できます。
ページ送りパラメータ
s検索キーワードの指定
search.phpをカスタマイズしてループ処理を変更させるときに使ったりします。
検索パラメータ
order
orderby
並び順の指定
日付やタイトル、投稿ID、ランダムなど、並び順を制御できます。
順序づけパラメータ

記事をランダム表示する方法

'orderby' => 'rand'で並び順をランダムにしています。

コピー<?php $the_query = new WP_Query( array( 'orderby' => 'rand', 'posts_per_page' => '5', ) ); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <a href="<?php the_permalink();?>"><?php the_title();?></a> <?php endwhile; else: ?> <span>記事はありません</span> <?php endif; ?> <?php wp_reset_postdata(); ?>

おわり

WordPressの任意のループを作る方法、任意のループを使っている時のページャーの癖、覚えておきたい指定方法について紹介しました。

とにかく覚えるべきはWP_Queryの書き方とパラメーターです。WP_Queryの関数リファレンスはもう100回以上は見てるかもしれません笑

それくらいWordPressでテーマ作成する際に登場する仕組みなので、サブループ(任意のループ)という概念はしっかりと押さえておきましょう!

この記事を書いた人

はにわまん

WordPressが得意なWeb屋。HPcode代表。

300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。