脱ループブロック！WP_Queryで始める自由自在な投稿一覧表示

2025/07/22
BASICS
WordPressの基礎
0comments
45views
約8分で読めます
26

前回の記事では、WordPressのパーマリンクについて学習し、設定方法から運用まで詳しく解説しました。記事の最後で「お知らせ」ページを作成する宿題を出しましたが、今回はそれを活用してWP_Query関数による投稿一覧の表示について実践的に学習します。

WP_Query関数は、WordPressのメイン機能とも言える非常に重要な関数です。この関数を理解することで、WordPressでできることの幅が大幅に広がり、より柔軟で高度なWebサイト構築が可能になります。

今回の目標

WP_Query関数の基本的な仕組みを理解する
PHPを使って投稿一覧を表示する方法を習得する
ループブロックとの違いと使い分けを学ぶ

宿題の確認

「おしらせ（news）」ページはできましたか？

前回の宿題で、スラッグが「news」の固定ページを作成していただきました。詳しい説明は不要で、できていることを前提に進めていきます。専用テンプレートpage-news.phpも以下のような内容で作成されているはずです。

<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは page-news.php テンプレートで表示されています</p>
<?php get_footer();?>

パーマリンクとは？設定方法から運用まで完全ガイド

WordPressのパーマリンクについて基本概念から実践的な設定方法まで詳しく解説します。投稿と固定ページのURL構造の違い、SEOと運用性を考慮した推奨設定など、効果的なWebサイト運用に欠かせないパーマリンクの知識を学習できます。

固定ページに「お知らせ」を追加

スラッグをnewsとする。順序は380とした。

メニューに追加

外観→メニューで「お知らせ」を追加

VSCodeでpage-new.phpを作成

ブラウザで表示確認

投稿一覧の表示

以前、ループブロックを使って投稿一覧を表示する方法を紹介しました。ループブロックは手軽で便利な機能ですが、以下のような制約があります。

細かな抽出条件を設定できない
表示内容やデザインを自由に変更できない
複雑な表示ロジックには対応しにくい

テンプレートファイルにPHPを使って一覧を表示することで、これらの問題点を解消でき、より柔軟で高度な表示制御が可能になります。

投稿一覧の表示と投稿テンプレートを使った投稿の表示

WordPressの投稿一覧表示とsingle.phpを使った投稿専用テンプレートの作成方法を解説。クエリーループによる投稿一覧の実装から、固定ページとは異なるテンプレートファイルの仕組み、パーマリンクの基本概念まで、WordPress初心者向けに投稿システムの基本を実践的に説明します。

wp_queryとは

WP_Queryは、WordPressのデータベースから投稿や固定ページなどのコンテンツを取得するためのPHPクラスです。実は、WordPressの投稿表示システムの中核を担っており、通常のページ表示でも内部的にはWP_Queryが使用されています。

WP_Queryを直接使用することで、以下のようなメリットがあります。

詳細な抽出条件を指定できる
カスタム投稿タイプにも対応
カテゴリーやタグでの絞り込みが可能
表示順序を自由に変更できる
表示件数を制限できる
複数の条件を組み合わせられる

wp_queryの基本パターン

WP_Queryを使用する際の基本的なコードパターンは以下のとおりです。

// 抽出条件
$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
];

// 抽出
$the_query = new WP_Query($args);

// 抽出結果の表示
while ($the_query->have_posts()) {
	$the_query->the_post();
	/* ここで表示処理 */
}

// リセット
wp_reset_postdata();

このパターンの各部分を簡単に説明します。

抽出条件（$args）：2～5行目

post_type：コンテンツの種類を指定します。主に固定ページ（page）、投稿（post）を使用しますが、他にもカスタム投稿タイプなどがあります
post_status：コンテンツの状態を指定します。publishは公開済みを意味し、そのほかにも下書き（draft）や削除（trash）などもあります

引数はこのほかにもたくさんありますが、学習を進める中で都度説明していきます。

データの抽出： 8行目

new WP_Query($args)で、指定した条件（$args）に該当するデータをデータベースから抽出し、抽出結果を$the_query変数に保存します。

繰り返し処理：11～14行目

while ($the_query->have_posts())は、「データがある間は繰り返す」という意味です。$the_query->the_post()によって、WordPressの特別な変数$postに1件分のデータが格納されます。

この$post変数から、タイトルや本文、パーマリンク（URL）などの情報を取り出して表示する流れとなります。

投稿一覧を表示してみよう

それでは実際に、宿題で作成したpage-news.phpを以下のように修正して投稿一覧を表示してみましょう。

<?php get_header();?>
        <?php the_content(); ?>
<?php
$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
];

// 抽出
$the_query = new WP_Query($args);

// 抽出結果の表示
if($the_query->have_posts()) {
	echo '<ul>';
	while ($the_query->have_posts()) {
		$the_query->the_post();
		echo '<li><a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a></li>';
	}
	echo '</ul>';
} else {
	echo '該当する投稿がありません';
}

// リセット
wp_reset_postdata();
?>
        <p>※このページは page-news.php テンプレートで表示されています</p>
<?php get_footer();?>

このコードの主要な部分を解説します。

条件分岐

if($the_query->have_posts())で、該当するデータがあるときだけ<ul>タグを出力し、該当するデータがなければメッセージを表示します。これにより、データが存在しない場合に空のリストが表示されることを防げます。

データの取得と表示

echo '<li><a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a></li>';の部分が重要なポイントです。

echoで、HTMLとPHPの値を組み合わせて、ブラウザに表示するためのHTMLを作り出しています
get_the_permalink($post->ID)でパーマリンク（URL）を取得し、<a>タグのhref属性に使用
get_the_title($post->ID)でタイトルを取得し、リンクテキストとして表示

この仕組みを理解することで、PHPを使って動的にHTMLを生成する基本的な流れが分かります。

リセット処理

最後のwp_reset_postdata()は非常に重要です。これによって、WordPressの特別な変数$postを元の状態に戻します。この処理を忘れると、ページの他の部分に影響を与える可能性があります。

それでは、ブラウザでお知らせページを表示して結果を確認してみましょう。投稿が存在していれば、タイトルがリンク付きのリストとして表示されるはずです。

ページの表示を確認したら、次はソースも確認してみましょう。

CTRL+UキーでソースのHTMLを確認できます。

<ul><li><a href="http://sample.local/news/53">新店舗オープンのお知らせ</a></li><li><a href="http://sample.local/news/51">SNS総フォロワー100人を達成しました</a></li><li><a href="http://sample.local/news/49">WordPress講習会開催のお知らせ</a></li><li><a href="http://sample.local/news/47">夏季休暇のお知らせ</a></li><li><a href="http://sample.local/news/45">Webサイト開設のお知らせ</a></li><li><a href="http://sample.local/news/1">Hello world!</a></li></ul>        <p>※このページは page-news.php テンプレートで表示されています</p>

echoは改行を入れないため、すべてが1行に繋がった状態で出力されます。ブラウザ上の見た目は正しく表示されますが、ソースコードとしては読みにくくなっています。

ソースコードを読みやすくする

開発時には、ソースコードが読みやすい方がデバッグなどの作業がしやすくなります。そのために、PHPのPHP_EOLという定数を使用して改行を追加することができます。

PHP_EOLは「End Of Line（行の終わり）」の略で、改行コードを表す定数です。これを使用して、先ほどのpage-news.phpを以下のように修正してみましょう。

<?php get_header();?>
        <?php the_content(); ?>
<?php
$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
];

// 抽出
$the_query = new WP_Query($args);

// 抽出結果の表示
if($the_query->have_posts()) {
	echo '<ul>'.PHP_EOL;
	while ($the_query->have_posts()) {
		$the_query->the_post();
		echo '<li><a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a></li>'.PHP_EOL;
	}
	echo '</ul>'.PHP_EOL;
} else {
	echo '該当する投稿がありません'.PHP_EOL;
}

// リセット
wp_reset_postdata();
?>
        <p>※このページは page-news.php テンプレートで表示されています</p>
<?php get_footer();?>

この修正を行った後、再度ブラウザでソースを確認してみてください。今度は以下のように整理された形で出力されるはずです。

<ul>
<li><a href="http://sample.local/news/53">新店舗オープンのお知らせ</a></li>
<li><a href="http://sample.local/news/51">SNS総フォロワー100人を達成しました</a></li>
<li><a href="http://sample.local/news/49">WordPress講習会開催のお知らせ</a></li>
<li><a href="http://sample.local/news/47">夏季休暇のお知らせ</a></li>
<li><a href="http://sample.local/news/45">Webサイト開設のお知らせ</a></li>
<li><a href="http://sample.local/news/1">Hello world!</a></li>
</ul>

このように、PHPのechoによってHTMLとPHPの値が組み合わされ、ブラウザが理解できるHTMLとして出力されています。これがWordPressの動的サイト生成の基本的な仕組みです。

HTMLのソースコードがみやすくなりましたので、投稿一覧の内容もしっかり確認できます。

aタグに投稿のパーマリンク、リンクテキストに投稿のタイトルが出力されていることがわかります。