WordPressループの理解を深めよう！コードを用いて解説します

今回はWordPressループを解説します。

WordPressループは、WordPressサイトで新着情報やブログ、商品紹介などの記事を更新していく運用をする場合に必ず使用します。

作成方法をしっかりと理解しておくことで制作が捗るので、一緒に深い部分まで学習していきましょう。

WordPressのループとは
WordPressループの種類
メインループで投稿の一覧を作ってみよう
まとめ

WordPressのループとは

WordPressで投稿の一覧ページを作成するには、ループについての基本的な知識が必要です。

「ループ」という言葉自体、馴染みのない人はピンとこないかもしれませんが、プログラミングでは「ループ」をよく使用しますので覚えておきましょう。

意味は「繰り返し同じ処理をする」ということです。

WordPressのループの場合、投稿された記事の中から条件に合った投稿を繰り返し表示するという使い方をするので、その方法で投稿一覧ページを作成します。

WordPressループの種類

WordPressループには「メインループ」と「サブループ」の2種類があります。

どちらも「条件に合った投稿を繰り返し表示する」ことを目的としていますが、できることが異なります。

順番に特徴を解説しますので、状況に合わせて使い分けましょう。

メインループ

メインループはWordPressが用意してくれている標準的なループです。

細かい指定をしなくても、表示したいテンプレートファイルをちゃんと選ぶことができれば、簡単なコードを記述するだけでWordPressが自動で情報を取得してきてくれます。

なぜこのようなことができるのか。

WordPressはアクセスされたURLからどのデータを表示するか判断します。

例えば・・・

https://retval.jp/ – トップページ
https://retval.jp/2023/06/ – 2023年6月の投稿一覧
https://retval.jp/?s=〇〇 – 〇〇の検索一覧
https://retval.jp/category/wordpress/ – 「WordPress」カテゴリーの投稿一覧

このような感じです。

メインループは、このURLから取得できるデータを使ってループ処理をすることができるので、シンプルかつ記述量も少なくすみます。

メインループの記述例です。

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

　　　　<!-- 繰り返したい内容を記述する -->

  <?php endwhile; ?>
<?php endif; ?>

注意点として、以下の点が挙げられます。

細かい設定ができない場合がある
サイト内の1ページに1つしか使用できない

ループ毎に細かい設定をしたい場合や、1つのページで2つ以上のループを使用したい場合は、サブループを使用しましょう。

サブループ

サブループとはメインループではないループのことを言います。

このような特徴があります。

自分である程度設定する必要がある
表示数や並び順、除外等、自由に指定できる
何回でも使用することができる

自分で記述する必要があるので知識がないと設定が難しいですが、その分自由に設定することができます。

サブループの記述例です。

<!-- 制作実績 -->
<?php
$args = array(
  'post_type' => 'works',
);
$works_query = new WP_Query($args);
?>

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

    <!-- 繰り返したい内容を記述する -->

  <?php endwhile; ?>
<?php else : ?>
  <p>まだ投稿はありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

「$args」に細かい設定をすることができ、それを「WP_Query」という投稿を取得できるクラスを使ってインスタンス化したものを変数に代入します。

そうすることで、複雑な条件でもループさせることができます。

サブループはできることが多い分、奥深いので今回は割愛します。

メインループとサブループの使い分け方

メインループとサブループにはそれぞれに特徴がありました。

メインループ	URLの情報から、自動的に出力内容が設定される。細かい設定がしづらい。
サブループ	記述するのに知識は必要だけど、細かい設定ができる。

使い分け方として、記事一覧やカテゴリーページなどはメインループを使用するという考え方で良いでしょう。

ある程度制限はされますが、記述量が少ない分、予期せぬエラーを起こす可能性も減ります。

メインループでは実現できない仕様や、2つ以上のループが必要な際にサブループを使用しましょう。

例えば、当サイトでは記事下に関連記事を表示させていますが、これを表示するには細かい設定が必要になるので、サブループを使っています。

メインループで投稿の一覧を作ってみよう

では、実際にメインループで投稿の一覧部分を作成していきましょう。

テンプレートファイルは投稿の一覧ページを表示するためのarchive.phpを使用します。

これから説明するコードはarchive.phpに記述していきましょう。

最終的なコード

archive.php

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

　　　　<!-- 繰り返したい内容　ここから -->
    <li class="post__item">
  　　　　<div class="post__item-inner">
    　　　　<div class="post__text">
     　　　　 <p class="post__time">
        　　　　<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
      　　　　</p>
      　　　　<div class="post__title-wrap">
        　　　　<h2 class="post__title">
        　　　　  <a href="<?php the_permalink(); ?>">
            　　　　<?php the_title(); ?>
          　　　　</a>
     　　　　   </h2>
     　　　　 </div>
  　　　　  </div><!-- /.post__text -->
 　　　　   <a href="<?php the_permalink(); ?>">
 　　　　     <img src="<?php echo the_post_thumbnail(); ?>" alt="">
  　　　　  </a>
  　　　　</div><!-- /.post__item-inner -->
　　　　</li>
　　　　<!-- 繰り返したい内容　ここまで -->

  <?php endwhile; ?>
<?php endif; ?>

ループさせるために使用するコードの説明

投稿の一覧を作成するためにループ処理を行います。

ここで言うループとは、条件に合った投稿を繰り返し表示させるということです。

メインループでは以下のコードを記述します。

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

　　　　<!-- 繰り返したい内容を記述する -->

  <?php endwhile; ?>
<?php endif; ?>

上のコードの意味を順番に読み解いていきますので、理解を深めていきましょう。

if(have_posts())の意味

まず、have_posts()の意味を確認しましょう。

Determines whether current WordPress query has posts to loop over.
have_posts() | Function | WordPress Developer Resources

翻訳すると「現在の WordPress クエリにループする投稿があるかどうかを判断します。」となります。

投稿がある場合は「true」、投稿がない場合は「false」を返します。

これを踏まえて、if (have_posts())の意味を考えると、「ループする投稿がある場合は〜」という意味になると考えられます。

while(have_posts())の意味

まず、while文の書き方を見てみましょう。

while(条件式) {

　//繰り返したい処理

}

while文は条件を満たしている場合は繰り返すという意味があります。

その条件式の中にhave_posts()を入れると、「表示する投稿がある間は処理を繰り返す」という意味になります。

the_post()の意味

the_post()の意味は、「表示する投稿の中の一番最初の投稿を取り出して、元のデータからその投稿をなくす処理を行う」という意味です。

例えば、表示する投稿が5件あったとします。

最初のループで1件目の情報を取り出して、表示する投稿の中から取り除くので、残りは2〜5件目の合計4件になります。

同様に、２件目、３件目、４件目、５件目と取り出すと残りは0件になり、表示する投稿がなくなるのでループは終了します。

以上でループで使用するコードの説明が終わりました。

これまでの説明を踏まえて、もう一度ループに関するコードを確認してみましょう。

ループに関するコード

archive.php

<?php if (have_posts()) : ?> 
  <?php while (have_posts()) : the_post(); ?>　
    <!-- 繰り返したい処理を記述する -->　
  <?php endwhile; ?>
<?php endif; ?>

「表示する投稿がある場合、表示する投稿がある間は繰り返したい処理を繰り返す」

このような意味になると考えられます。

投稿の内容を表示するために使用する関数

次に、繰り返したい処理の部分を細かくみていきたいと思います。

アーカイブページで使用するループなので、主に投稿のデータを表示する項目が多いです。

デザインによっても表示する内容が変わるので、理解を深めることで思うように実装できます。

投稿の内容に関するコード

繰り返したい処理の内容のみをコードで表示しますので、前後のコードは割愛します。

archive.php

<li class="post__item">
  <div class="post__item-inner">
    <div class="post__text">
      <p class="post__time">
        <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
      </p>
      <div class="post__title-wrap">
        <h2 class="post__title">
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
          </a>
        </h2>
      </div>
    </div><!-- /.post__text -->
    <a href="<?php the_permalink(); ?>">
      <img src="<?php the_post_thumbnail(); ?>" alt="">
    </a>
  </div><!-- /.post__item-inner -->
</li>

上記のコードで使用されているWordPress関数は4つあります。

順を追って見ていきましょう。