カスタマイズ 2024.08.29 2024.09.04

WordPressのループとは？メインループ・サブループ・クエリループブロックの構造・使い方を解説

この記事を書いた人

株式会社e2e wp.geek編集部

WordPressサイト制作サービス「wp.make」やWordPress保守・運用サービス「wp.support」などを展開する株式会社e2eの情報発信チームです。お客様の課題解決に役立つ、WordPressの最新情報をお届けいたします。

ループとはPHPやJava等のプログラミング言語において、指定された回数分や特定の条件下にある間、処理を実行し続けることです。今回はPHPにおけるループの基本概念から、WordPressで用いられるループについて解説していきます。

PHPにおけるループとは

今回はWordPressで使用されるPHPというプログラミング言語に絞って、ループの基本について解説します。 PHPについて詳しく知りたい方は、「PHPとは？WordPressでの使われ方を解説」で解説していますので、こちらをご覧ください。

まず、PHPのループにおける、代表的な3つの構文をご紹介します

for文
foreach文
while文

for文

for文の構造は以下のようになっています。

for (式1; 式2; 式3) {
    // 繰り返し実行する処理
}

for (式1; 式2; 式3) {

// 繰り返し実行する処理

}

for文の開始時に式1を実行し、式2がtrueだったら式3を実行してループを継続、falseの場合は終了します。実際に使用する場合は、数値を当てはめて評価するケースが多いです。

for ($i = 1; $i <= 10; $i++) {
    echo $i;
}

// 12345678910

for ($i = 1; $i <= 10; $i++) {

echo $i;

}

// 12345678910

この場合は「$i」を1と定義し、その値が10になるまでの間、ループ毎に「$i」に1ずつ加算し、出力しています。

foreach文

foreach文の構造は以下のようになっています。

foreach (配列 as 変数名) {
    // 配列の要素ごとに行う処理
}

foreach (配列 as 変数名) {

// 配列の要素ごとに行う処理

}

foreach は、配列の要素を反復処理する際に使用します。実際に配列に要素を入力し、出力した場合が以下の通りです。

$nums = [1, 2, 3];
$total = 10

foreach ($nums as $num) {
    $total += $num
    echo $total;
}

// 16

$nums = [1, 2, 3];

$total = 10

foreach ($nums as $num) {

$total += $num

echo $total;

}

// 16

この例では、「$num」の配列内に1,2,3の数字を入れ、これ3つの要素を「$total」と足して出力しました。ここでは配列の例を紹介しましたが、連想配列においても使用できるので、ぜひ試してみてください。

while文

whileループは、PHPで最も簡単なタイプのループです。以下のような構造で記述されます。

式1;
while (式2) {
    繰り返しする処理
    増減式
}

式1;

while (式2) {

繰り返しする処理

増減式

}

式1が初期化の式、式2が条件式になります。式の条件がtrueであれば、無限に処理を繰り返します。このような無限ループに陥ると、プログラムに負荷がかかり、クラッシュする恐れがあります。そのため、ループ内で増減式を記述します。

実際の記述例が以下の通りです。

$i = 0;
while ($i < 5) {
    echo $i;
    $i++;
}

// 01234

$i = 0;

while ($i < 5) {

echo $i;

$i++;

}

// 01234

この例では、「$i」の初期値を0とし、1~5までの範囲でループ毎に1ずつ加算し出力させました。

以上が、PHPにおける代表的なループ構文の紹介になります。

WordPressにおけるループとは

WordPressのループとは、制作した投稿を、繰り返し画面に表示させる際に使用されます。ただ表示させるだけでなく、公開日や更新日などの情報を、一つのコードで繰り返し表示できるので、主に記事一覧ページを制作する際に重宝されます。このループには、メインループとサブループの2種類存在します。これらについても詳しく解説していきます。

メインループとは

WordPressのメインループは、投稿データを取得して表示するための基本的なループです。メインループの主な特徴は以下の3つです。

テンプレートファイルに応じた情報のみ取得する
基本的に細かい条件の指定ができない
1ページあたり1回まで使用可能

「.php」形式の記事などの投稿を読み込んで、指定した情報を繰り返し表示させることができます。しかし、投稿の取得数や、並び順などの細かい指定はできません。また、メインループを複数使用することも出来ないため、注意が必要です。

通常のメインループは以下のように記述します。

<?php if ( have_posts() ) : ?>
  <?php while(have_posts()): the_post(); ?>
		//繰り返し表示させる内容を記述
  <?php endwhile; ?>
<?php endif; ?>

<?php if ( have_posts() ) : ?>

<?php while(have_posts()): the_post(); ?>

//繰り返し表示させる内容を記述

<?php endwhile; ?>

<?php endif; ?>

コードの解説

<?php if(have_posts()): ?>

1	<?php if(have_posts()): ?>

if文を使った条件分岐です。 have_posts()で投稿データが存在しているのかチェックしています。

<?php while(have_posts()): the_post(); ?>
  //繰り返し表示させたい内容を記述
<?php endwhile; ?>

<?php while(have_posts()): the_post(); ?>

//繰り返し表示させたい内容を記述

<?php endwhile; ?>

while文を使ったループ処理です。「have_posts()」を指定することで、投稿データが存在する間は処理を繰り返します。「endwhile;」で1回あたりの繰り返し処理を終了させます。この記述を忘れると永遠にループするので注意が必要です。

実際に記事の更新日、タイトルを表示させる記述例がこちらになります。

<?php if ( have_posts() ) : ?>
  <?php while(have_posts()): the_post(); ?>
		<article class="article">
      <a href="<?php the_permalink(); ?>">
        <time class="time"><?php the_time( 'Y/n/j' ); ?></time>
        <h2><?php the_title(); ?></h2>
      </a>
    </article>
  <?php endwhile; ?>
<?php endif; ?>

<?php if ( have_posts() ) : ?>

<?php while(have_posts()): the_post(); ?>

</a>

</article>

<?php endwhile; ?>

<?php endif; ?>

表示件数の設定方法

先ほど、メインループにおいて投稿の取得数は指定できないとお伝えしましたが、表示件数を指定することは可能です。 WordPressの「設定」の「表示画面」から、「1ページに表示する最大投稿数」に任意の数字を入力することで設定できます。

表示件数の設定箇所

サブループとは

サブループは、メインループの中で別のクエリを実行して、特定の条件に合った投稿を表示するために使います。メインループよりもカスタマイズ性が高く、複数使用することもできます。サブループの特徴は以下の通りです。

自由に情報を取得可能
細かい条件指定が可能（投稿取得数、並び順など）
１ページあたり何回でも使用可能

WP_Queryの解説

サブループで主に使用される「WP_Query」について解説していきます。 WP_Queryとは、WordPressで使用されるクラスのことで、投稿や投稿に関する情報を取得する際に使用されます。投稿の表示順序を指定したり、特定のカテゴリーの絞り込み、指定した範囲の投稿日時のものだけを取得するなど、幅広い用途で使用されます。基本構造は以下の通りです。

<?php
  $args = array(
  //表示したい記事の条件を記述
  );
  $the_query = new WP_Query($args);
  if ($the_query->have_posts()) :   ?>
  <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
  //投稿がある場合に繰り返し表示させたい内容を記述
  <?php endwhile; ?>
  <?php else : ?>
  //投稿が無い場合の記述
<?php endif; wp_reset_postdata(); ?>

<?php

$args = array(

//表示したい記事の条件を記述

);

$the_query = new WP_Query($args);

if ($the_query->have_posts()) : ?>

<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

//投稿がある場合に繰り返し表示させたい内容を記述

<?php endwhile; ?>

<?php else : ?>

//投稿が無い場合の記述

<?php endif; wp_reset_postdata(); ?>

実際には、上記の基本構造に任意の条件・情報を入力します。一例として、投稿された記事を5つ降順に取り出し、投稿日時、記事タイトルを表示させるコードを記述します。

  <?php
    $args = array(
      'post_type' => 'post',  //「投稿」の投稿タイプを指定
      'posts_per_page' => '5',  //ページ内で表示させる「投稿」の数を指定
      'order' => 'DESC' //表示させる順序を降順に指定
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :   ?>
    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
      <article class="article">
        <a href="<?php the_permalink(); ?>">
          <time class="time"><?php the_time( 'Y/n/j' ); ?></time>
          <h3><?php the_title(); ?></h3>
        </a>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
     <p>まだ投稿がありません。</p>
  <?php endif; wp_reset_postdata(); ?>

<?php

$args = array(

'post_type' => 'post', //「投稿」の投稿タイプを指定

'posts_per_page' => '5', //ページ内で表示させる「投稿」の数を指定

'order' => 'DESC' //表示させる順序を降順に指定

);

$the_query = new WP_Query($args);

if ($the_query->have_posts()) : ?>

<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

</a>

</article>

<?php endwhile; ?>

<?php else : ?>

<p>まだ投稿がありません。</p>

<?php endif; wp_reset_postdata(); ?>

クエリループブロックとは

ここまで、PHPを書いてループ処理を行い、情報を繰り返し表示させる方法をご紹介してきましたが、実はWordPressの管理画面から同様の操作を行うことが可能です。

ここからは実際にクエリループブロックを挿入する手順をご紹介します。

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

投稿の編集画面や新規投稿作成画面に入り、「+」ブロック挿入ツールアイコンをクリックし、「クエリ」と検索します。

クエリループを選択

「選択」をクリックすると、いくつかの表示パターンが提示されるため、簡単に挿入できます。

表示パターンを選択

次に、「新規」をクリックした場合を紹介します。

【2】外観をカスタマイズする

ブロックを追加し「新規」をクリックすると、以下の4つから表示方法を選択できます。

タイトルと日付
タイトルと抜粋
タイトル、日付、抜粋
画像、日付、タイトル表示方法選択

これらの中から任意の表示方法をクリックして選択したのち、ツールバーとサイドバーにて外観をカスタマイズします。

ブロックツールバー

ブロックツールバーでは、ブロックのスタイルや配置、表示させる数や表示方法に至るまで、詳細に設定することができます。タイトルや画像、テキストリンクなど、それぞれにブロックツールバーがあり、個別のカスタマイズが可能です。

サイドバー

クエリループブロックを選択した状態で、画面右側に表示されるサイドバーにて、テキストや背景、リンクの色設定が可能です。

サイドバー下部にある、「テンプレートからクエリーを継承」がオンの状態だと、コンテンツはデフォルトオプションを使用して表示されます。投稿タイプや、コンテンツの並び順をカスタマイズする場合はオフにしてください。また、「テンプレートからクエリーを継承」をオフにすることで、フィルターオプションを使用できるようになります。フィルターオプションを用いると、表示されるコンテンツを、カテゴリー、タグ、投稿者、キーワードに基づいて絞り込むことができます。

今まで紹介したもの以外にもカスタマイズできる項目があるので、ぜひ試してみてください。

まとめ

この記事では、ループの基本からWordPress特有のメインループ、サブループ、クエリループブロックについて解説しました。これらの知識を活用して、より効率的で柔軟なWordPressサイトの構築に挑戦してみてください！

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
WordPressに最適なサーバーの選定や構築から依頼したい…
SEO対策や高速化も考慮したサイト構築を行なってほしい…
制作後の保守・運用についてもサポートしてほしい…
今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら『wp.make』

全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…

こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！

もっと詳しく

WordPressのループとは？メインループ・サブループ・クエリループブロックの構造・使い方を解説

株式会社e2e wp.geek編集部

PHPにおけるループとは

for文

foreach文

while文

WordPressにおけるループとは

メインループとは

コードの解説

表示件数の設定方法

サブループとは

WP_Queryの解説

クエリループブロックとは

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

【2】外観をカスタマイズする

ブロックツールバー

サイドバー

まとめ

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPress開発・カスタマイズなら 『wp.make』

WordPress開発・カスタマイズなら『wp.make』