
目次 & インサイト
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
WordPressのテーマファイルを見ていると、次のようなコードを目にすることがあります。
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
WordPressを始めたばかりだと、
「なぜ while が必要なの?」
「have_posts() は何を確認している?」
「the_post() は何をしている?」
「そもそも、どの記事を取得しているの?」
と疑問に感じるかもしれません。
ここで登場するのが、WordPressのThe Loop(ループ)とWP_Queryです。
The Loopは、現在のページで取得された投稿を1件ずつ処理して表示するための基本的な仕組みです。WordPress公式ドキュメントでも、The Loopはテーマテンプレートから投稿を出力するための標準的な仕組みと説明されています。
一方、WP_Query は、
「どのような条件のコンテンツを取得するか」
を指定するための仕組みです。
今回は、この2つの関係を理解しながら、
- The Loopとは何か
have_posts()とthe_post()の意味- メインクエリとは何か
WP_Queryで任意の投稿を取得する方法- カスタム投稿タイプの取得
- カテゴリーやタクソノミーによる絞り込み
wp_reset_postdata()の必要性query_posts()を避ける理由- ブロックテーマのQuery Loop
まで、実務で使える形で整理します。
1. WordPressは「データを取得して表示する」
まず、WordPressのページ表示をシンプルに考えてみましょう。
例えばブログ一覧ページなら、
WordPress
↓
データベースから記事を取得
↓
記事A
記事B
記事C
↓
テーマがHTMLとして表示
という流れになります。
第4回では、WordPressには、
- 投稿
- 固定ページ
- カスタム投稿タイプ
- タクソノミー
- カスタムフィールド
などのデータがあることを解説しました。
第5回では、そのデータをどのテンプレートで表示するかを決めるテンプレート階層について解説しました。
今回は、その間にある、
「そもそもWordPressは、どのデータを取得しているのか?」
という部分を見ていきます。
2. The Loopとは?
The Loopは、WordPressが取得した投稿を1件ずつ取り出して表示する仕組みです。
最も基本的な形は、
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
です。
一見すると複雑に見えますが、やっていることはシンプルです。
記事がありますか?
↓
YES
↓
次の記事がありますか?
↓
YES
↓
記事をセット
↓
タイトル・本文などを表示
↓
次の記事へ
↓
なくなるまで繰り返す
これが「Loop」です。
WordPress公式でも、have_posts() で表示対象の投稿があるかを確認し、the_post() で現在の投稿をセットしながら繰り返し処理する形が基本的なThe Loopとして紹介されています。
3. have_posts() は何をしている?
まず、
have_posts()
です。
これは簡単に言えば、
「まだ表示する投稿がありますか?」
を確認するための関数です。
例えば5件の記事が取得されている場合、
記事1
記事2
記事3
記事4
記事5
というデータに対して、
have_posts()
を繰り返し確認します。
まだ記事が残っていれば true、すべて処理し終われば false になります。
そのため、
while ( have_posts() ) :
という形で、
「投稿がある間、繰り返す」
という処理ができます。
4. the_post() は何をしている?
次に、
the_post();
です。
これは現在処理する投稿をセットして、タイトルや本文などのテンプレートタグから、その投稿の情報を取得できる状態にします。
例えば、
the_post();
the_title();
the_content();
とすると、
現在の投稿
↓
タイトルを取得
↓
本文を取得
という処理になります。
WP_Query の公式ドキュメントでも、the_post() は現在の投稿をセットし、グローバルな $post などを設定する役割を持つことが説明されています。
5. The Loopの基本形を理解する
まずは次のコードを覚えておくとよいでしょう。
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php endif; ?>
これを日本語にすると、
投稿がありますか?
↓
ある
↓
投稿がある間、繰り返す
↓
現在の投稿をセット
↓
タイトルを表示
↓
本文を表示
↓
次の投稿へ
です。
WordPressテーマの多くのテンプレートで、この基本構造が使われています。
6. The Loopで何を表示できる?
The Loopでは、単純にタイトルと本文だけでなく、さまざまな情報を表示できます。
例えば、
the_title();
the_content();
the_excerpt();
the_date();
the_author();
the_permalink();
などです。
また、
the_post_thumbnail();
を使えばアイキャッチ画像も表示できます。
例えばブログカードなら、
<article class="post-card">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h2><?php the_title(); ?></h2>
</a>
<p><?php the_excerpt(); ?></p>
</article>
というような構造にできます。
つまりThe Loopは、
「取得した投稿データをHTMLへ変換していく場所」
と考えると分かりやすいでしょう。
7. では「どの記事を取得するのか?」
ここで重要になるのが**クエリ(Query)**です。
例えば、
ブログ記事を10件取得
なのか、
制作実績を6件取得
なのか、
WordPressカテゴリーの記事だけ取得
なのかによって、取得するデータは変わります。
この「何を取得するか」という条件を扱う中心的な仕組みが、
WP_Query
です。
WordPress公式では、WP_Query はWordPressのクエリを扱うクラスであり、投稿の取得やThe Loopでの処理に利用されると説明されています。
8. メインクエリとは?
WordPressには、ページが表示されるときに最初から用意されているメインクエリがあります。
例えば、
/category/wordpress/
にアクセスした場合、
WordPressカテゴリーの記事
を取得するためのクエリがWordPressによって用意されます。
ブログ記事の詳細ページなら、
その記事
固定ページなら、
その固定ページ
がメインクエリの対象になります。
つまり、
URL
↓
WordPressがページの種類を判断
↓
メインクエリを生成
↓
投稿を取得
↓
テンプレート階層でテンプレートを決定
↓
The Loopで表示
という流れです。
第5回で紹介したテンプレート階層と、今回のThe Loopはここでつながります。
9. 「テンプレート」と「クエリ」は役割が違う
ここは非常に重要です。
例えば、
archive-portfolio.php
は、
「制作実績の一覧をどのように表示するか」
を担当します。
一方、
WP_Query
は、
「どの制作実績を取得するか」
を指定できます。
つまり、
WP_Query
↓
何を取得する?
↓
The Loop
↓
取得したものをどう表示する?
↓
HTML
という関係です。
10. WP_Queryでブログ記事を取得する
例えばブログ記事を5件取得したい場合、
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
);
$query = new WP_Query( $args );
とします。
その後、
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post();
the_title();
endwhile;
endif;
wp_reset_postdata();
という形でLoopを回します。
つまり、
$args
↓
WP_Query
↓
投稿を取得
↓
have_posts()
↓
the_post()
↓
表示
という流れです。
11. post_type で取得するコンテンツを指定する
WP_Query で特に重要なのが、
'post_type'
です。
例えば通常のブログ記事なら、
'post_type' => 'post'
です。
カスタム投稿タイプが、
portfolio
なら、
'post_type' => 'portfolio'
とします。
例えば、
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => 6,
);
$portfolio_query = new WP_Query( $args );
とすれば、
制作実績を6件取得する
というクエリになります。
WP_Query は post_type によって、通常の投稿だけでなくカスタム投稿タイプなども取得できます。
12. orderby と order も重要
例えば、
「制作実績を新しい順に表示したい」
という場合は、
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => 6,
'orderby' => 'date',
'order' => 'DESC',
);
とできます。
ここで、
orderby
は、
何を基準に並べるか
date
title
modified
menu_order
などを指定します。
そして、
order
は、
DESC
なら降順、
ASC
なら昇順です。
例えば、
新しい
↓
古い
なら、
'orderby' => 'date',
'order' => 'DESC',
となります。
WordPressの WP_Query には、日付、タイトル、更新日、メニュー順など、さまざまな並び替え条件が用意されています。
13. カテゴリーで絞り込む
例えば、
WordPress
というカテゴリーの記事だけ取得したい場合、
$args = array(
'post_type' => 'post',
'category_name' => 'wordpress',
'posts_per_page' => 5,
);
とできます。
これにより、
通常の投稿
↓
WordPressカテゴリー
↓
5件取得
という処理ができます。
14. タクソノミーで絞り込む
カスタム投稿タイプでは、カスタムタクソノミーを使って絞り込むこともあります。
例えば、
投稿タイプ
portfolio
タクソノミー
portfolio_category
ターム
web-design
という構造なら、
$args = array(
'post_type' => 'portfolio',
'tax_query' => array(
array(
'taxonomy' => 'portfolio_category',
'field' => 'slug',
'terms' => 'web-design',
),
),
);
という指定ができます。
これによって、
「制作実績の中からWebデザインに分類されたものだけ取得する」
ということが可能になります。
WP_Query では tax_query を使ってタクソノミーによる絞り込みができます。
15. ACFなどのカスタムフィールドでも絞り込める
第4回で紹介したカスタムフィールドも、条件によってはクエリに利用できます。
例えば、
制作年
2026
という情報を持った制作実績だけ取得する、といった処理です。
WP_Query では meta_query を使って投稿メタデータを条件にしたクエリを作ることができます。
例えば概念的には、
$args = array(
'post_type' => 'portfolio',
'meta_query' => array(
array(
'key' => 'year',
'value' => '2026',
),
),
);
という形です。
これにより、
制作実績
↓
制作年 = 2026
↓
該当するものだけ取得
ということができます。
ただし、カスタムフィールドの値の型や比較方法によってクエリの書き方は変わるため、実際の実装ではデータ構造に合わせて設計することが重要です。
16. WP_Queryで作る「サブループ」
実際のWebサイトでは、1ページの中に複数の投稿一覧を表示することがあります。
例えばトップページに、
最新ブログ
────────
記事A
記事B
記事C
制作実績
────────
実績A
実績B
実績C
という構成を作る場合です。
このとき、
メインクエリ
+
追加のクエリ
という構成になります。
例えば、
$portfolio_query = new WP_Query(
array(
'post_type' => 'portfolio',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
)
);
として、制作実績だけを取得できます。
その後、
if ( $portfolio_query->have_posts() ) :
while ( $portfolio_query->have_posts() ) :
$portfolio_query->the_post();
?>
<h3><?php the_title(); ?></h3>
<?php
endwhile;
endif;
wp_reset_postdata();
とします。
このような追加のLoopを、一般的にサブループと呼びます。
17. なぜ wp_reset_postdata() が必要なのか?
サブループを使ったときに重要なのが、
wp_reset_postdata();
です。
例えば、
$portfolio_query = new WP_Query( $args );
while ( $portfolio_query->have_posts() ) :
$portfolio_query->the_post();
the_title();
endwhile;
wp_reset_postdata();
というコードです。
the_post() を使うと、現在の投稿データが切り替わります。
そのままにしてしまうと、その後のテンプレートで、
the_title();
the_permalink();
the_post_thumbnail();
などを使用したときに、意図しない投稿の情報が使われる可能性があります。
そのため、サブループが終わったら、
wp_reset_postdata();
で元の投稿データへ戻します。
WordPress公式でも、WP_Query を使った追加のLoopでは、the_post() によって変更された投稿データを wp_reset_postdata() で元に戻すことが推奨されています。
18. wp_reset_query() とは違う
ここは混同しやすいポイントです。
wp_reset_postdata();
と、
wp_reset_query();
は同じではありません。
通常、
new WP_Query()
を使ったサブループでは、
wp_reset_postdata();
を使います。
一方、
wp_reset_query();
はメインクエリを変更した場合など、別のケースで使うものです。
特に、
「サブループの後だから、とりあえず
wp_reset_query()」
とするのは適切ではありません。
通常の new WP_Query() によるサブループなら、
wp_reset_postdata();
と覚えておくとよいでしょう。
19. query_posts() は基本的に使わない
WordPressには、
query_posts()
という関数もあります。
しかし、現在のWordPress公式ドキュメントでは、query_posts() はメインクエリを完全に上書きするため、テーマやプラグインでは使用を避けるべきとされています。代わりに WP_Query や pre_get_posts など、目的に応じた方法を使うことが推奨されています。
例えば、
query_posts( $args );
でメインクエリを書き換えるのではなく、
$query = new WP_Query( $args );
としてサブループを作る方法があります。
20. メインクエリそのものを変更したい場合
例えば、
「ブログ一覧を10件ではなく20件表示したい」
というように、現在のページそのもののメインクエリを変更したいケースがあります。
この場合、テンプレート内で query_posts() を使うのではなく、pre_get_posts を利用する方法があります。
例えば、
function custom_posts_per_page( $query ) {
if ( ! is_admin() && $query->is_main_query() ) {
if ( $query->is_home() ) {
$query->set( 'posts_per_page', 20 );
}
}
}
add_action( 'pre_get_posts', 'custom_posts_per_page' );
というような方法です。
ポイントは、
$query->is_main_query()
でメインクエリかどうかを確認していることです。
こうすることで、管理画面や別のクエリまで意図せず変更してしまうことを避けられます。
21. 「The Loop」と「WP_Query」の関係
ここまでを整理すると、両者の関係が見えてきます。
WP_Query
何を取得する?
ブログを5件
制作実績を6件
2026年の実績だけ
Webデザインの実績だけ
↓
The Loop
取得したものをどう表示する?
タイトル
画像
URL
本文
カテゴリー
カスタムフィールド
↓
HTML
<article>
<h2>記事タイトル</h2>
<img>
<p>概要...</p>
</article>
つまり、
WP_Query=データを選ぶ
The Loop=選ばれたデータを順番に処理する
と考えると理解しやすいでしょう。
22. WordPressの処理を図にすると
これまでの第3回〜第6回をつなげると、WordPressの仕組みがかなり見えてきます。
ユーザーがURLへアクセス
↓
WordPressがリクエストを解析
↓
メインクエリを生成
↓
どのコンテンツなのか判断
↓
テンプレート階層
↓
使用するテンプレートを決定
↓
The Loop
↓
投稿データを1件ずつ処理
↓
HTMLを生成
↓
ブラウザに表示
さらにトップページなどで追加の情報を表示する場合は、
メインクエリ
+
WP_Query
↓
サブループ
↓
追加コンテンツを表示
という構成になります。
23. ブロックテーマにも「Query Loop」がある
ここまでPHPによるクラシックテーマを中心に説明してきましたが、ブロックテーマにも投稿を一覧表示する仕組みがあります。
それがQuery Loopブロックです。
Query Loopブロックは、投稿タイプや表示件数、並び順、カテゴリーなどのクエリ条件を指定して、投稿を一覧表示できるブロックです。WordPress公式では、投稿やカスタム投稿タイプなどをクエリ条件に応じて表示できる高度なブロックとして説明されています。
つまり、
クラシックテーマ
WP_Query
↓
The Loop
↓
HTML
というコード中心の考え方に対して、
ブロックテーマ
Query Loop
↓
投稿を取得・表示
という、よりビジュアルに扱える仕組みがあります。
第3回で紹介したクラシックテーマとブロックテーマの違いも、ここでつながってきます。
24. 実務でよく使うWP_Queryのパターン
Web制作では、次のようなクエリが頻繁に登場します。
最新記事を3件
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
);
制作実績を6件
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => 6,
'orderby' => 'date',
'order' => 'DESC',
);
特定カテゴリーの記事
$args = array(
'post_type' => 'post',
'category_name' => 'wordpress',
'posts_per_page' => 5,
);
特定のカスタムタクソノミー
$args = array(
'post_type' => 'portfolio',
'tax_query' => array(
array(
'taxonomy' => 'portfolio_category',
'field' => 'slug',
'terms' => 'web-design',
),
),
);
そして、
$query = new WP_Query( $args );
で取得し、
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post();
// 表示
endwhile;
endif;
wp_reset_postdata();
という形でLoopを回します。
25. WP_Queryは「万能に使えばいい」わけではない
WP_Query は非常に便利ですが、ページ内に大量のクエリを追加すればよいわけではありません。
例えば、
トップページ
├── 最新記事
├── 制作実績
├── スタッフ
├── お知らせ
├── 商品
└── イベント
と、それぞれに複雑なクエリを追加すると、処理が増えてページ表示に影響する可能性があります。
そのため実務では、
- 本当に追加クエリが必要か
- メインクエリを利用できないか
- 一度のクエリで取得できないか
- キャッシュを利用できないか
- 表示件数を適切に設定できているか
なども考える必要があります。
「取得できる」ことと「効率よく取得する」ことは別問題です。
26. WordPress制作で重要な考え方
第4回では、
投稿タイプ=情報の種類
タクソノミー=情報の分類
カスタムフィールド=情報の属性
と整理しました。
第5回では、
テンプレート階層=どのテンプレートで表示するか
を解説しました。
そして第6回では、
WP_Query=どのデータを取得するか
The Loop=取得したデータをどう表示するか
という関係が加わりました。
つまり、
コンテンツ設計
↓
投稿タイプ・タクソノミー
↓
クエリ
↓
WP_Query
↓
テンプレート
↓
The Loop
↓
HTML
という一連の流れになります。
これが理解できると、WordPressのテーマコードを読む力が一段上がります。
27. まとめ|The LoopとWP_Queryを理解するとWordPressが見えてくる
今回のポイントをまとめます。
- The Loopは投稿を1件ずつ処理して表示する仕組み
have_posts()は表示する投稿が残っているかを確認するthe_post()は現在の投稿をセットする- WordPressにはページごとにメインクエリが存在する
WP_Queryで取得する投稿の種類や条件を指定できるpost_typeでカスタム投稿タイプを取得できるorderbyとorderで並び順を指定できるtax_queryでタクソノミーによる絞り込みができるmeta_queryで投稿メタデータを条件にできる- 追加の
WP_Queryを使う場合はサブループとして扱う - サブループの後には
wp_reset_postdata()を使う query_posts()によるメインクエリの上書きは基本的に避ける- メインクエリを変更する場合は
pre_get_postsなどを検討する - ブロックテーマではQuery Loopブロックによって投稿一覧を構築できる
そして、WordPressの表示処理を理解するうえで、
「何を取得するか」=WP_Query
「取得したものを処理する」=The Loop
「どう見せるか」=テンプレート
という3つを分けて考えることが重要です。
第3回から第6回までをつなげると、
テーマ → コンテンツ設計 → テンプレート階層 → クエリ → Loop
という、WordPressテーマ制作の基本的な流れが見えてきます。
次回は、この流れのさらに先にある 「WordPressの条件分岐タグとフック」 を取り上げます。
「トップページだけ表示を変える」
「特定の投稿タイプだけCSSを読み込む」
「管理画面では実行しない」
といった、実際のテーマ制作で頻繁に使う条件分岐とフックについて解説します。