2021/08/01 (最終更新日: 2023/11/18)

【初心者向け】WordPressループの書き方を解説

こんにちは、トシキです。
今回はWordPressの記事表示で必須のループ処理について解説します。

「WordPressの勉強始めたけど、ループって何なの？」
「メインループとサブループの書き方を知りたい。」

今回はこのような方に向けた記事になります。
私自身、ループの知識が曖昧な状態で実務に入り、いきなりカスタム投稿のような応用をやることになって理解が追い付かず大変でした。
現役バリバリのエンジニアには当たり前に感じる事しか書いていないと思いますが、これから自作テーマを学習する初心者には、「こんな感じで使うのかー」と参考にしていただければと思います。

本記事の内容

そもそもループとはどういうもの？
メインループについて
サブループ（WP_Query）について
終わりに

スポンサードサーチ

そもそもループとはどういうもの？

WordPressの管理画面から投稿した記事を取得して、ページ上に表示させるプログラムのことです。 PHPのwhile文やforeach文などを使い、データベースに格納されている記事データがあれば、その分だけ取得→表示する処理を繰り返します。

ループには２種類ある

ループには、投稿した記事をそのまま取得するメインループと、ページに表示させる投稿数を変更したり、取得するカテゴリーを絞り込むなど、特定の条件を付け加えることができるサブループの２種類があります。
どちらも後述しますが、両方とも使いこなせるようになれば、１ページ内に「新着記事」と「おすすめ記事」を別々のエリアに表示させるなどの高度な実装が可能になります。

メインループについて

まずはメインループの記述です。
前述した通り、投稿した記事をそのまま一覧で表示したい時に使用します。
（細かい解説は後ほど）

シンプルな記述↓

  
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  //繰り返し表示させたい内容を記述
  <?php endwhile; else : ?>
  //投稿が無い場合の処理
  <?php endif; ?>

投稿が０件の時は何も表示させない場合↓

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

ifとwhileの記述を分けたパターン（これがよく見る記述だと思います）↓

  
  <?php if (have_posts()) : ?>
    //投稿があった場合のみ表示させる見出しなどの要素があれば記述(記述しなくても可)
    <?php while (have_posts()) : the_post(); ?>
    //繰り返し表示させたい内容を記述
    <?php endwhile; ?>
  <?php else : ?>
    //投稿が無い場合の処理
  <?php endif; ?>

<ul>や<ol>のリストを使った記述例↓

  
  <?php if (have_posts()) : ?>
    <ul>
      <?php while (have_posts()) : the_post(); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <time class="time"><?php the_time( 'Y/n/j' ); ?></time>
            <h3><?php the_title(); ?></h3>
          </a>
        </li>
      <?php endwhile; ?>
    </ul>
  <?php else : ?>
    <p>まだ投稿がありません。</p>
  <?php endif; ?>

別の記述例↓

  
  <?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>
        <h3><?php the_title(); ?></h3>
      </a>
    </article>
  <?php endwhile; endif; ?>

コードの解説

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

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

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

while文を使ったループ処理です。
have_posts()を指定することで、投稿データが存在する間は処理を繰り返します。
while内が投稿１件分の表示を繰り返すループ処理の部分で、endwhile;までが１ループになります。
the_post();は投稿データを１件取り出して表示させるための準備をしています。

この２つの流れをまとめると、
投稿データが存在している→１件分のデータを取り出す→ループの先頭に戻る→投稿データが存在している→１件分のデータを取り出す→ループの先頭に戻る…
といったように、投稿データが存在する限り最後まで繰り返している訳です。

  
  <?php else : ?>
  //投稿が無い場合の処理
  <?php endif; ?>

elseはif (have_posts())に対して、「もし投稿データが１件も無ければ」という意味になります。この下には投稿が１件もなかった場合のみ表示させるコンテンツを記述します。 endif;はif文による条件分岐を終了させる記述になります。

１ページに表示させる投稿件数を変更したい場合

表示件数は基本的に、管理画面の「表示設定」→「1ページに表示する最大投稿数」の設定が反映されます。
（仮に10件に設定していた場合は10件表示されます）
もし管理画面の設定に依存せず、表示件数を変えたい場合は後述のサブループを使いましょう。
（トップページには３件表示させたいが、一覧ページには９件表示させたい場合など）

スポンサードサーチ

サブループ（WP_Query）について

特定のカテゴリーやカスタム投稿を表示させたい、表示件数や表示順を変更したいなどの条件を指定する時はこちらを使います。

基本形↓

  
  <?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; endif; wp_reset_postdata(); ?>

<ul>や<ol>のリストを使った記述例↓

  
  <?php
    $args = array(
    //ここに表示したい記事の条件を記述
    );
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
  ?>
    <ul>
      <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <time class="time"><?php the_time( 'Y/n/j' ); ?></time>
            <h3><?php the_title(); ?></h3>
          </a>
        </li>
      <?php endwhile; ?>
    </ul>
  <?php else : ?>
    <p>まだ投稿がありません。</p>
  <?php endif; wp_reset_postdata(); ?>

条件の設定例↓

  
  <?php
    $args = array(
      'post_type' => 'post', //投稿タイプを指定（カスタム投稿の場合はその投稿名を記述）
      'category_name' => 'news', //カテゴリーのスラッグがnewsのみの記事を指定
      'posts_per_page' => 3, //１ページに表示したい記事を最大３件に指定
      'post_status' => 'publish', //公開済みページのみ指定
      '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(); ?>

コードの解説

  
  $args = array(
    //ここに表示したい記事の条件を記述
    'post_type' => 'post', //投稿タイプを指定（カスタム投稿の場合はその投稿名を記述）
    'category_name' => 'news', //カテゴリーのスラッグがnewsのみの記事を指定
    'posts_per_page' => 3, //１ページに表示したい記事を最大３件に指定
    'post_status' => 'publish', //公開済みページのみ指定
    'order' => 'DESC' //記事の順番を降順に指定
  );

if文が始まる前に、取得したい投稿データの条件を指定しています。
連想配列を使い、array()の中に条件（パラメータ）を記述。
上記の例では５つの条件を指定しています。
解説すると、
『カテゴリースラッグが「news」かつ、公開済みの投稿を１ページに最大３件まで降順に表示』と言うことになります。
条件数は１つでも、逆にもっと多くても構いません。

  
  $the_query = new WP_Query($args);

WP_Queryは記事データやページ情報を取得するクラスです。
WP_Queryクラスの引数に連想配列「$args」をセットしています。

また下記のように直接WP_Queryの引数に記述してもOKです↓

  
  $args = new WP_Query(
    array(
      //ここに表示したい記事の条件を記述
      'post_type' => 'post', //投稿タイプを指定（カスタム投稿の場合はその投稿名を記述）
      'category_name' => 'news', //カテゴリーのスラッグがnewsのみの記事を指定
      'posts_per_page' => 3, //１ページに表示したい記事を最大３件に指定
      'post_status' => 'publish', //公開済みページのみ指定
      'order' => 'DESC' //記事の順番を降順に指定
    );
  );

ちなみに「$args」と「$the_query」はパラメータを格納する変数ですので、別の名前でもOKです。
上記例以外にも様々なパラメータがありますので、好きな条件を加えてみてください。

» WP: Query $args
» いっつも忘れるWP_Queryの使用方法とパラメータ一覧。がっつり整理してみた

  
  if ($the_query->have_posts()) :
  while ($the_query->have_posts()) : $the_query->the_post();

メインループの記述に「$the_query->」が追加されています。
パラメータを格納した変数を記述することで、メインループをWP_Queryクラスで作成した条件のループに反映させています。

  
  wp_reset_postdata();

サブループ実行後は、反映させた投稿情報をリセットしてメインループに戻す必要があるので、最後に記述します。

WP_Queryクラス以外でもサブループを作成することもできる

WP_Queryクラスの他に、get_postsテンプレートタグを使ったサブループも存在します。
get_postsは殆ど使っていないので詳しいことは書けませんが、こちらはwhile文ではなくforeach文を使うのと、取得できる情報が記事だけに対し、WP_Queryはそれに加えてページ情報も取得できる違いがあるようです。
ページネーション（ページ情報に含まれる）を使用しないで、サイドバーなどにただ記事を表示させたいとかであればget_postsを使っても問題はありません。

最後にget_posts()の記述例も載せておきます↓

  
  <?php
    $args = array(
      'post_type' => 'post', //投稿タイプを指定（カスタム投稿の場合はその投稿名を記述）
      'category_name' => 'news', //カテゴリーのスラッグがnewsのみの記事を指定
      'posts_per_page' => 3, //１ページに表示したい記事を最大３件に指定
      'post_status' => 'publish', //公開済みページのみ指定
      'order' => 'DESC' //記事の順番を降順に指定
    );
    $my_post = get_posts( $args );
  ?>
  <?php
    foreach ( $my_post as $post ) :
      setup_postdata( $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
    endforeach;
    wp_reset_postdata(); ?
  >

» テンプレートタグ/get posts

終わりに

今回はメインループとサブループの解説をしました。
始めのうちはメインループの理解と記述に慣れつつ、それからサブループで細かい条件の指定をしてみると良いでしょう。
今回サブループはWP_Queryクラスの解説がメインで、get_postsテンプレートタグはサラッとしか紹介しませんでしたが、今後実務で使うことがあれば改めて追記できればと思います。
もし、今回の記事が少しでも参考になりましたら幸いです。

この記事が役に立ったら、応援してくれると嬉しいです！投げ銭で応援する

人気記事【脱jQuery】スクロールしたら画面上部に追従ヘッダーを表示する方法

ループ