WordPressのループ処理の書き方 | have_posts()とは？

WordPressでオリジナルテーマを作っていると、

「記事の一覧を表示したい」という場面がありますよね。

そのときに使うのが WordPressのループ処理です。

最初は少し難しく見えるかもしれませんが、構造を覚えてしまえばシンプルです。

この記事では、ループの基本から、実際にテーマで使えるコードまでを丁寧に解説していきます。

WordPressのループとは？

WordPressでは、投稿（ポスト）や固定ページのデータはデータベースに保存されています。

テーマファイルはそのデータを取り出して、HTML として画面に表示する役割を担っています。

このとき「データベースにある記事を1件ずつ取り出して表示する」という繰り返し処理のことを、

WordPressの世界では 「ループ」 または「ループ処理」と呼びます。

ループの基本構造

WordPressのループは、have_posts() と the_post() という2つの関数を組み合わせて作ります。

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

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

    <!-- ここに投稿の表示内容を書く -->

  <?php endwhile; ?>

<?php else : ?>

  <p>記事が見つかりませんでした。</p>

<?php endif; ?>

少し慣れないうちは if と while が混在していて戸惑うかもしれませんが、

構造を分解すると次のようになっています。

have_posts() の覚え方

have_posts() は直訳すると「投稿を持っていますか？」という意味です。

「まだ表示していない記事はありますか？」と毎回確認しながら進んでいくイメージです。

記事が残っているうちは true を返し、なくなると false を返してループが終了します。

the_post() はその名の通り「その投稿をセットする」働きをします。

これを呼び出すことで、タイトルやURLといった情報を取り出す関数が使えるようになります。

実際にブログ記事一覧を表示してみよう

では、実際にブログ記事の一覧ページ（archive.php や index.php など）で使えるコードを見てみましょう。

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

  <ul class="post-list">

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

      <li class="post-item">

        <!-- サムネイル画像（アイキャッチ）を表示 -->
        <?php if ( has_post_thumbnail() ) : ?>
          <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail( 'medium' ); // 'medium'はWordPressの画像サイズ指定 ?>
          </a>
        <?php endif; ?>

        <!-- 記事タイトルをリンク付きで表示 -->
        <h2 class="post-title">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>

        <!-- 投稿日を表示 -->
        <p class="post-date">
          <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
            <?php the_date( 'Y年n月j日' ); ?>
          </time>
        </p>

        <!-- カテゴリーを表示 -->
        <p class="post-category">
          カテゴリー：<?php the_category( ', ' ); ?>
        </p>

        <!-- 抜粋文を表示 -->
        <div class="post-excerpt">
          <?php the_excerpt(); ?>
        </div>

      </li>

    <?php endwhile; ?>

  </ul>

<?php else : ?>

  <p>まだ記事がありません。</p>

<?php endif; ?>

このコードをベースに、クラス名や表示項目を自分のデザインに合わせて調整していくのがオリジナルテーマ制作の基本的な進め方です。

ループ内でよく使う関数まとめ

ループの中でよく使う関数を整理しておきます。

最初は全部覚えなくても大丈夫です。

必要になったときに参照しながら使っていけば、自然と身につきます。

the_title() や the_permalink() は特によく使うので、

最初にこの2つをしっかり押さえておくとスムーズです。

NG・OK例：よくある初心者のミス

ループを書き始めたばかりのころに陥りやすいミスがあります。

代表的なものを確認しておきましょう。

the_post() を忘れる

 NGの例

<?php while ( have_posts() ) : ?>
  <h2><?php the_title(); ?></h2>
<?php endwhile; ?>

 OKの例

<?php while ( have_posts() ) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
<?php endwhile; ?>

the_post() を書き忘れると、the_title() などの関数が正しく動作せず、

同じ記事が無限に表示されたり、何も表示されなかったりします。

while の行に必ず the_post() をセットで書く習慣をつけておきましょう。

else を省略する

 NGの例

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
<?php endif; ?>

これ自体はエラーにはなりませんが、記事が0件のときに画面が真っ白になってしまいます。

 OKの例

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
<?php else : ?>
  <p>記事が見つかりませんでした。</p>
<?php endif; ?>

else 節に「記事が見つかりませんでした」などのメッセージを入れておくことで、ユーザーが迷わずに済みます。

ユーザー体験の観点からも、省略しないクセをつけておくと良いです。

ループを体で覚えるコツ

ループの構造は、最初は「覚える」よりも「何度も書いて手に馴染ませる」感覚が大切です。

特に if ( have_posts() ) : → while ( have_posts() ) : the_post(); → endwhile; → else : → endif; という流れは、呪文のようにそのまま覚えてしまって問題ありません。

慣れてきたら意味も自然にわかってきます。

また、the_ で始まる関数（the_title()、the_permalink() など）は「その投稿の〇〇を出力する」という共通のルールがあります。

一方で get_the_title() のように get_ がつく関数は「出力せずに値を返す」タイプです。

echo と組み合わせて使う場面で登場します。

このセットも頭の片隅に置いておくと、後々の学習がスムーズになります。

まとめ

WordPressのループは、テーマ開発の中でも特に頻繁に使う仕組みです。

最初はとっつきにくく感じるかもしれませんが、have_posts() で確認 → the_post() でセット → 表示関数で出力、という3ステップのリズムを体に染み込ませることが上達への近道です。

まずはこの記事のコードをそのままコピーして、ローカル環境で動かしてみてください。

表示されたときの「動いた！」という感覚が、次の学習へのモチベーションになります。