WordPressループは、WordPressサイトのコンテンツ表示の管理に欠かせない要素です。サイトの一部をカスタマイズしたい場合には（あるいはWordPress開発の世界に飛び込みたい場合も）、WordPressループについて理解しておくことが必須となります。

今回は、WordPressループの基礎知識から実際の使用方法まで、詳しくご紹介します。

WordPressループとは何か、どのような利点があるのか、そしてPHPテンプレート（クラシックテーマ用）とブロックテーマのクエリループブロックでループを使用する手順を見ていきます。

WordPressループとは

WordPressループとは、WordPressサイトにコンテンツを表示するために使用するものです。これは従来PHPコードで、テンプレートタグを使ってカスタマイズすることができますが、ブロックテーマでは、クエリループブロックを使用します。

より技術的に表現すると、サイトのデータベースに問い合わせて各投稿のデータを取得し、テンプレートに従ってそのデータを表示する仕組みになります。このテンプレートを制御するためにPHPを使うか、またはクエリループブロックを使うかによって、様々なテンプレートタグやブロックを利用できます。

例えば、最新のブログ記事を一覧表示するページでは、以下のようになります。

  1. ループが記事があるかどうかを確認
  2. 記事があれば、テンプレートに従って最初の記事を表示
  3. 別の記事があるかどうかを確認し、別の記事があれば、再びテンプレートを「ループ」し、テンプレートに従って2つ目の投稿を表示
  4. 投稿がなくなるまで（またはページネーションルールなどの他の制限まで）投稿の「ループ」を繰り返す

Kinstaブログでループの実際の例を見ることができます。以下の6件の記事はすべて同じテンプレートを使用して表示されています。

WordPressループの例
WordPressループの例

WordPressループの使用例

WordPressループは、複数あるコンテンツ（投稿、固定ページ、カスタム投稿タイプなど）を一覧表示するページでレイアウトを調整するために使用されます。

具体的には、以下のようなページで使用します。

  • 最近の投稿を表示するサイトのトップページ
  • ブログの一覧ページ
  • カテゴリー一覧ページ
  • タグ一覧ページ
  • 検索結果ページ
  • カスタム投稿タイプ一覧ページ

技術的には、WordPressループを使って個々のコンテンツを表示することも可能ですが（この場合、ループは最初の項目を照会した後に終了）、「ループ」（輪、繰り返し）という言葉の通り、何らかの一覧ページで複数の項目を繰り返し表示するのに使用するのが一般的です。

WordPressループの主な用途

WordPressループの使い方を習得することで、よりユーザーフレンドリーで動的なWordPressサイトを構築することができます。

以下、ループを使ってサイトを改善する主な方法を3つご紹介します。

基本的な投稿コンテンツとメタデータの表示方法の管理

WordPressループをカスタマイズする主な用途は、サイトのコンテンツの基本的なレイアウトの制御にあります。

例えば、ブログの一覧ページのレイアウトを変更したい場合、WordPressループを利用することで、記事のタイトル、内容、著者、メタデータ（公開日など）などの要素のレイアウトを調整することができます。

また、条件式を使用すると、コンテンツの種類ごとに異なるレイアウトを作成可能です。たとえば「ニュース」や「インタビュー」など、カテゴリーごとに投稿をそれぞれ一覧表示するなど。

結果として、サイトの異なるタイプのコンテンツに対してデザインを最適化し、訪問者により良い体験を提供することができます。

カスタムフィールドデータを挿入してより動的なサイトを実現

先に触れた通り、WordPressループを使用することで、動的なコンテンツサイトを作ることができます。

例えば、不動産サイトを作成するなら、「一戸建て」というカスタム投稿タイプを追加し、売りに出されている一戸建て住宅の情報を一覧表示したいかもしれません。

テーマデフォルトの投稿一覧デザインを使用するだけでは、タイトルやコンテンツなどの基本情報しか表示することができません。

「一戸建て」投稿タイプのループを編集し、関連するテンプレートタグを追加することで、各物件の間取りや面積など、作成したカスタムフィールドの情報を含めることができます。

投稿リストに投稿以外のコンテンツを挿入（広告など）

サイトのコンテンツ一覧にWordPressデータベースから取得しないコンテンツを挿入することも可能です。

例えば、一覧の各投稿の間にバナー広告を配置したいとします。これもループを編集すれば、任意の場所に簡単に広告を挿入することができます。

WordPressループを使用する2つの方法

現在のWordPressテーマ開発では、使用するテーマの種類によってループの扱い方が異なります。

以前であれば、PHPテンプレートがすべてのWordPressテーマの基盤となっていたため、テーマのテンプレートファイルでPHPを使ってループを扱う必要がありました。このテーマは現在、クラシックテーマに分類されます。

Astra、GeneratePress、Kadence、Neve、OceanWPなど、人気の高いWordPressテーマの多くは今でもこのアプローチを採用しており、PHPを使ってWordPressループを編集します。

近年登場したサイトエディター上に構築されるブロックテーマの場合は、PHPテンプレートファイルを使用せず、「クエリループ」ブロックを使ってループをカスタマイズ可能です（おすすめのブロックテーマはこちら）。

そこで今回は、クラシックテーマ、およびブロックテーマの両方でWordPressループを使用する方法を見ていきます。

現在使用しているテーマがどちらに該当するかがわからない場合は、WordPress管理画面の「外観」にあるオプションを確認してみてください。「カスタマイズ」「ウィジェット」「テーマファイルエディター」などの項目が表示される場合は、クラシックテーマです。

クラシックテーマでWordPressループを使用する方法（コーディング）

クラシックテーマを使用している場合は、テーマのPHPテンプレートファイル内でループを扱います。

基本的な実装例は以下のとおりです。

<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( '条件に合う投稿はありません', 'textdomain' );
endif;
?>

上記コードは、以下の3つに分けることができます。

  • ループを開く
  • テンプレートタグを使って表示するコンテンツを制御する
  • ループを閉じる

以下、条件文を使ってさまざまな状況に応じてループを調整するという少し高度な手順を見ていきます。

WordPressループを開始する

WordPressループを始めるには、以下4つの要素が必要になります。

  • <?php─PHPを使用していることをウェブサーバーに伝える。
  • if ( have_posts() )─サーバーにサイトのデータベースにクエリに一致する投稿があるかどうかを確認し、投稿があれば以下のコードを実行するよう伝える。投稿がない場合は、else文を使ってフォールバックテキストを追加。
  • while ( have_posts() )─表示する投稿がある限り繰り返すようにサーバーに指示する。この上限は通常「設定」＞「表示設定」で設定可能。1ページあたり10件まで表示するように設定した場合、サーバーは10件まで（少なくとも10件の投稿が公開されている限り）ループし続ける。
  • the_post();─各投稿のデータをサイトのデータベースから実際に取得するようサーバーに指示する。次のセクションで説明するテンプレートタグを使用して、このデータの表示を制御可能。
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();

WordPressループのコンテンツを制御する

WordPressループを開いたら、テンプレートタグを使用して、各投稿に含める情報とそのコンテンツの一般的なレイアウトを制御することができます。

ループ内で使用するテンプレートタグは、表示される投稿ごとに繰り返されます。

よく使用されるテンプレートタグには以下のようなものがあります。

より高度にカスタマイズされたWordPressサイトでは、ループにカスタムフィールドのデータを含めることができます。これにはループで使用可能なテンプレートタグの機能が含まれるAdvanced Custom Fields (ACF)、Meta Box、Podsなどのプラグインを使用するのが便利です。

例として、各投稿のタイトル、サムネイル画像、抜粋を表示するだけの簡単なループ構文を見てみます。

// まずは前のセクションで説明した通り、ループを開始する
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// これでテンプレートタグを使用して、各投稿に表示する情報を制御できるように
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();

WordPressループを終了する

WordPressループを終了するには、whileループ、if文、PHPを閉じる必要があります。

WordPressが投稿を返せない状況を考慮するには、if文を閉じる前にelse文を追加します。

else文を追加し、クエリに一致する投稿がない状況を考慮し、上記のループを閉じるには以下のようになります。

// まずは前のセクションで説明した通り、ループを開始する
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// これでテンプレートタグを使用して、各投稿に表示する情報を制御できるように
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
// テンプレートタグの作成が終わったら、ループを閉じる
endwhile;
else:
// クエリに一致する投稿がない場合に、サイトに何をすべきかを指示する
_e( '条件に合う投稿はありません', 'textdomain' );
endif;
?>

WordPressループの動作を制御するための条件文

ループの基本構造を把握すれば、さらに高度な使い方ができるようになります。

まず使用したいのは条件文です。先ほど触れたとおり、例えば「インタビュー」や「ニュース」など、カテゴリー別に投稿を一覧表示することができます。

以下は、使用できる条件タグの一部です。

上のリンクをクリックすると、さまざまなタイプの条件分岐に対して、WordPressループをどのように変更するかのコード例を見ることができます。

例えば、in_categoryを使ってカテゴリーIDが「3」の投稿に異なるスタイルを適用し、それらの投稿に別の<div>を適用する場合は、以下のようになります。

<?php
// ループを開始
if ( have_posts() ) :
while ( have_posts() ) : the_post();
/* * 現在の投稿がカテゴリー「3」に属するかどうかを確認する
* 属している場合、divにはCSSクラス「post-category-three」が与えられる
* 属さない場合、divにCSSクラス「post」が与えられる
*/
if ( in_category( 3 ) ) : ?>
<div class="post-category-three">
<?php else : ?>
<div class="post">
<?php endif;
// 投稿のタイトルを表示
the_title( '<h2>', ';</h2>' );
// この投稿者の他の投稿へのリンクを表示
printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() );
// 投稿の内容をdivに表示
?>
<div class="entry">
<?php the_content() ?>
</div>
<?php
// 投稿のカテゴリーをカンマ区切りで表示
_e( 'Posted in ', 'textdomain' ); the_category( ', ' );
// 最初のdivボックスを「post」または「post-cat-three」のクラスで閉じる
?>
</div>
<?php
// ループは終了するが「if not posts」の状況を許容
endwhile;
else :
/*
* 一番最初の「if」は、表示する投稿があるかどうかをテストしている
* この「else」の部分は、もし投稿がなかったらどうするかを示している
*/
_e( '条件に合う投稿はありません', 'textdomain' );
// ループを完全に終了
endif;
?>

ブロックテーマでWordPressループを使用する方法（サイトエディター）

ブロックテーマの場合は、サイトエディターからテーマのテンプレートを管理します。ブロックテーマを使用している場合は、PHPでループをカスタマイズすることはありませんが、基本的な原則は同じになります。

クエリループブロックを使ってループを開始します。このブロック内には、「投稿テンプレート」「ページネーション」「結果なし」などのコンテナがあります。

PHPを使用する場合のテンプレートタグの代わりに、投稿テンプレートの中にテーマブロックを追加して、各ループ項目のレイアウトを制御することになります。

クエリループブロックを追加する

サイトエディター（「外観」＞「エディター」）に移動し、関連するテンプレートを作成または編集します。ループは、投稿を一覧表示する単一の固定ページなど、個々のコンテンツに追加することも可能です。

いずれにしても、まずはクエリループブロックを追加することになります。「選択」をクリックしてテーマ既存のループパターンを使用するか、「新規」をクリックして、空白から始めるかを選択しましょう。

今回は例として、「新規」を選択します。

クエリループブロックを追加
クエリループブロックを追加

その後、いくつかの異なる開始バリエーションから選択できますが、最もシンプルなオプションは、各アイテムのタイトルとコンテンツを表示することです。

ループのバリエーションを選択
ループのバリエーションを選択

バリエーションを選択すると、クエリループブロックの横にある設定パネルを使って、ループ（クエリ）に含めるコンテンツを制御できます。

デフォルトでは、通常の投稿が一覧表示されますが、投稿タイプを変更することで、他の種類のコンテンツを一覧表示することもできます。また順序を変更したり、フィルターを使用して特定のコンテンツ（特定のカテゴリに属するコンテンツや、特定の投稿者によるコンテンツなど）のみをクエリすることも可能です。

クエリループをカスタマイズ
クエリループをカスタマイズ

クエリループテンプレートをカスタマイズする

続いて、「テーマ」セクションにあるブロックを使って、クエリループ内の投稿テンプレートをさらにカスタマイズします。再三となりますが、これらのブロックは、基本的にPHPコード内のテンプレートタグと同じ役割を持ちます。

例えば、各コンテンツの投稿者を表示するには、任意の場所に「投稿者」ブロックを追加します。

ループのテンプレートをカスタマイズ
ループのテンプレートをカスタマイズ

他にも、「投稿のアイキャッチ画像」「日付」「カテゴリー」「タグ」など、関連する項目のブロックを使用できます。

リストビューを確認すると、以下のように投稿テンプレートの中にこれらのブロックが格納されていることがわかります。

クエリループブロックの構造
クエリループブロックの構造

他にも、ページネーションやクエリが結果を返さない場合のシナリオを制御するグループもあります。

WordPressループを使用するためのヒント

ループはWordPressに不可欠と言える要素であり、エラーやミスがあるとサイトで問題が発生する可能性があります。PHP テンプレートを使用している場合は特にそうで、「このサイトで重大なエラーが発生しました」エラーが表示されるかもしれません。

以下、エラーを回避するためのヒントをいくつかご紹介します。

ローカル開発環境で実験しながら学ぶ

WordPressループを初めて使用する場合は、おそらくさまざまなシナリオで実験しながら、動作の理解を深めたい人が多いでしょう。

これを安全に行うには、ローカルのWordPress開発環境を使用することができます。

テストや学習のためにローカル環境を作成するには、無料のDevKinstaが便利です。WindowsとMacの両方をサポートしており、ローカル開発サイトを必要なだけ簡単に立ち上げることができます。

まずはステージング環境で作業する

本番サイトのループを扱うには、変更をいきなり本番サイトに適用する前に、ステージングサイトでテストすることを強くお勧めします。

KinstaでWordPressサイトをホスティングしている場合は、組み込みステージング環境を使用して、すべての変更を安全にテストできます。

すべてが正常に機能していることを確認したら、変更内容を簡単に本番サイトに反映することができます。

WordPressループのおすすめ代替プラグイン

WordPressループを扱うのが不安という場合には、PHPやクエリループブロックを使わずにプラグインに頼ることもできます。

以下、おすすめのプラグインをいくつかご紹介します。

Elementor Pro

Elementorは、ドラッグ＆ドロップ式のビジュアルページビルダーです。有料版のElementor Proを使用すると、テーマのテンプレートファイルをデザインするテーマビルド機能を利用できます。2022年にループビルダー機能が導入されているため、Elementorのビジュアルインターフェースを使って、ループコンテンツを制御・カスタマイズできるようになっています。

Kinstaブログでは、Elementorの詳しい使用方法など、Elementorに関連するコンテンツを多数公開しています。

Bricks

BricksもWordPress向けの人気ビジュアルサイトビルダーで、豊富なデザインツールの一部として、簡素化されたコードアプローチを採用した独自のクエリループビルダーがあります。

Bricksを使用したWordPressサイトの構築方法はこちらをご覧ください。

WP Show Posts

WP Show Postsは、上記2つのプラグインほどの柔軟性はありませんが、投稿をさまざまな形式で一覧表示する簡単な方法をお探しなら良い選択肢になります。

無料で使用でき、人気テーマであるGeneratePressと同じ開発元から提供されています。機能改善が行われているわけではありませんが、今回の目的には十分機能します。

まとめ

WordPressの開発スキルを磨くには、WordPressループの習得は避けて通れません。WordPressサイトでどのようにコンテンツを表示するかを制御するのに欠かせない要素であり、習得することで、コンテンツの表示方法を柔軟にコントロールできるようになります。

近年注目されているブロックテーマを使用している場合は、PHPテンプレートを扱う必要はなく、クエリループブロックを使って簡単に編集することができます。

いずれにしても、WordPressループの使い方を理解することは、将来的に大きなメリットになります。

ただし、WordPressサイトの基盤となる部分であるため、問題が生じるとサイトが破損する可能性があります。エラーの発生を避けるためには、DevKinstaなどを利用してローカル開発サイトを用意して学習するか、Kinstaのステージング環境を使って、安全な環境で作業することをお勧めします。

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。