テーマの心臓部：メインループの作り方ガイド

投稿日 2025年12月17日
更新日 2025年12月24日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

外枠（ヘッダー・サイドバー・フッター）が完成したら、いよいよその中身、つまり「記事」を表示させる仕組みが必要です。

WordPressで記事を自動的に取得して表示するこの仕組みを**「メインループ」**と呼びます。これが自作テーマにおける「心臓部」になります。

それでは、**「記事一覧を表示するためのメインループの作り方」**をまとめます。

メインループとは、WordPressのデータベースから「投稿」を探し出し、記事がある分だけ繰り返し表示する処理のことです。これを記述することで、10記事あれば10回、同じレイアウトで記事が並びます。

1. メインループの基本構造（全体像）

もっとも標準的なループの書き方は以下の通りです。これを index.php などのメインコンテンツ部分に記述します。

PHP

<?php if ( have_posts() ) : ?>
    <div class="post-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <a href="<?php the_permalink(); ?>">
                    <div class="post-thumbnail">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <?php the_post_thumbnail( 'medium' ); ?>
                        <?php else : ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" alt="No Image">
                        <?php endif; ?>
                    </div>

                    <h2 class="post-title"><?php the_title(); ?></h2>

                    <time class="post-date"><?php echo get_the_date(); ?></time>

                    <div class="post-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </a>
            </article>
            <?php endwhile; ?>
    </div>
<?php else : ?>
    <p>記事が見つかりませんでした。</p>
<?php endif; ?>

2. ループを制御する重要な4つのコード

このコードの中で、WordPress特有の重要な動きをしているのが以下の部分です。

if ( have_posts() ):「表示すべき記事が1件でもあるか？」を確認します。記事がゼロの場合の処理（「記事がありません」という表示）を分岐させるために必要です。
while ( have_posts() ):記事がある限り、あとの処理を繰り返します（ループ）。
the_post():ここが非常に重要です。この関数を呼ぶことで、「現在の記事」のデータをセットし、次の記事へと準備を進めます。これを忘れると無限ループ（同じ記事が永遠に表示される）の原因になります。
post_class():articleタグなどに、その記事のカテゴリー名やタグ名などをCSSクラスとして自動付与します。

3. ループ内でよく使う「記事情報」の出力

ループの中では、その記事固有の情報を呼び出す「テンプレートタグ」を使います。

関数名	役割
`the_title()`	記事のタイトルを表示
`the_permalink()`	記事の詳細ページ（個別ページ）へのURLを表示
`the_post_thumbnail()`	アイキャッチ画像を表示
`the_excerpt()`	記事の抜粋（冒頭の短い文章）を表示
`get_the_date()`	投稿日を取得（echoで表示が必要）

4. すべてを結合した `index.php` の例

これまでに作成したパーツをすべて組み合わせると、自作テーマの最小構成 index.php はこのようになります。

PHP

<?php get_header(); ?>

<div class="container flex-layout">
    <main class="main-content">
        <h1>最新記事一覧</h1>

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

        <div class="pagination">
            <?php the_posts_pagination(); ?>
        </div>
    </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

開発のヒント：`the_content()` と `the_excerpt()` の使い分け

the_content(): 記事の全文を表示します。主に「記事詳細ページ（single.php）」で使用します。
the_excerpt(): 記事の冒頭部分だけを抽出します。主に「一覧ページ（index.php や archive.php）」で使用し、スッキリとした見た目にするために使います。