【WordPress連載企画第3回】条件分岐とループ（繰り返し）を理解しよう

kagata

2014.06.18

こんにちは、kagata です。

今回は WordPress 連載企画の第3回です。「条件分岐」と「ループ」の基本を学びましょう。

条件分岐とループ（繰り返し）とは

「条件分岐」と「ループ」は、WordPress のテーマづくりのみならずプログラミングのさまざまな分野で欠かすことができない基本的な考え方です。

ここでは特に WordPress のテーマづくりの中でそれらがどんな意味を持つか、説明してみようと思います。

条件分岐

WordPress のテーマづくりの中でいう「条件分岐」とは、ある条件を満たすときに（「～であるならば」）ある要素を表示させるということです。

「ある条件」とはどんなものでしょう？工夫しだいでいろんなことを条件にすることができますが、WordPress のテーマづくりで最初に覚えないといけないのは
「記事データがあるならば」
という条件による分岐です。

そして、「ある条件を満たすとき」ということは、満たさないとき（「～でないならば」）にどうするかも考えておかないといけないということです。テーマづくりに慣れてからも、案外忘れがちなポイントです。

ループ（繰り返し）

WordPress のテーマづくりの中でいう「ループ」とは、1 ページの中に同じブロックを繰り返して表示するということです。

一般的なブログを想像してください。トップページには、投稿記事が新しいものから順に数件表示されていると思います。ああいうことが WordPress の自作テーマでできるようにするということです。

「繰り返して表示する」というからには「何回繰り返すか」ということがポイントになります。そこはとりあえず WordPress に任せてみることにします。通常は、WordPress 管理画面の「設定」＞「表示設定」＞「1ページに表示する最大投稿数」に設定された件数だけ WordPress が勝手に繰り返してくれます。

ループを使って記事を抽出してみよう

では、実際に WordPress ループを作ってみましょう。

例えば、次のような表示を得たいとします。

<section class="news-list">
<p class="date">2014.03.03</p>
<h2 class="ttl-single">ひなまつり</h2>
<p>今日は桃の節句ですね。五人ばやしの笛たいこ。</p>
<p class="link-txt">> <a href="#">続きを見る</a></p>
<!-- /.news-list --></section>

<section class="news-list">
<p class="date">2014.02.03</p>
<h2 class="ttl-single">豆まき</h2>
<p>今日は節分ですね。豆をまきましょう。</p>
<p class="link-txt">> <a href="#">続きを見る</a></p>
<!-- /.news-list --></section>

<section class="news-list">
<p class="date">2014.01.01</p>
<h2 class="ttl-single">お正月</h2>
<p>今日は元日ですね。あけましておめでとうございます。</p>
<p class="link-txt">> <a href="#">続きを見る</a></p>
<!-- /.news-list --></section>

記事が3件投稿されているので、記事のブロックもまた 3 件表示してやりたいという状況です。

これを WordPress のループで実現するには、次のように記述します。

<?php while ( have_posts() ) : the_post(); ?>
    <section class="news-list">
        <p class="date"><?php the_time( get_option( 'date_format' ) ); ?></p>
        <h2 class="ttl-single"><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
        <p class="link-txt">> <a href="<?php the_permalink(); ?>">続きを見る</a></p>
        <!-- /.news-list --></section>
<?php endwhile; ?>

1 行目と 8 行目の間に書いたブロックが、記事の数だけ繰り返されるという記述です。記事が 3 件ならば 3 回繰り返されますし、もし先述の管理画面で「 1 ページに表示する最大投稿数」を 2 件以下に設定していれば、設定した件数だけ表示されます。

なお、2 ～ 7 行目の記述については次回の記事で詳しく解説します。まずは下記の記法だけ確認しておきましょう。

<?php the_time( get_option( 'date_format' ) ); ?>
記事の投稿日を表示する。日付のフォーマットは管理画面の「設定」＞「一般」＞「日付のフォーマット」で設定できる。
<?php the_title(); ?>
記事のタイトルを表示する。
<?php the_excerpt(); ?>
記事本文の抜粋を表示する。
<?php the_permalink(); ?>
記事の URL （パーマネントリンク）を表示する。

WordPress ではこれらを総称して「テンプレートタグ」と呼びます。詳しくは次回！

記事がなかった場合の処理も加えてみよう

ところで、表示すべき記事が1件もない状態で上のループを実行すると、ページには何も表示されません。これだと、表示すべき記事があるのに見えていないのか、それとも本当に記事がないのか、表側からはうかがい知ることができません。

そこで、表示すべき記事がないならばその旨を知らせるメッセージを表示するようにしてみましょう。「表示すべき記事があるか」によって条件分岐させます。

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <section class="news-list">
            <p class="date"><?php the_time( get_option( 'date_format' ) ); ?></p>
            <h2 class="ttl-single"><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
            <p class="link-txt">> <a href="<?php the_permalink(); ?>">続きを見る</a></p>
            <!-- /.news-list --></section>
    <?php endwhile; ?>
<?php else : ?>
    <p>記事がありません。</p>
<?php endif; ?>

1 行目と 11 行目の間に記述されているのが「記事がある場合」の表示です。元のループが丸ごとここに収まっています。そして 11 行目と 13 行目の間に記述されているのが「記事がない場合」の表示です。

まとめ： WordPress ループの基本的な形

ここまで説明してきたループの書き方を最後にまとめます。

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <!-- ここに書いたものが記事の数だけ繰り返される！ここの中身は次回 -->
    <?php endwhile; ?>
<?php else : ?>
    <!-- 記事がない場合はここに書いたものが表示される！ -->
<?php endif; ?>

PHPに慣れていないと、へんな記号の羅列みたいに見えてしまいますね。でも、WordPress のカスタマイズをするなら必ずこのコードを書くことになります。まずは丸覚えしてしまいましょう！

次回は、記事を表示するブロックを書くときに使う「テンプレートタグ」の紹介をします。