WordPress開発者向けチートシート：ループ内テンプレートタグ徹底活用ガイド

WordPressでテーマを作成したり、既存のテーマをカスタマイズしたりする際、必ずと言っていいほど使用するのが「WordPressループ」と、その中で投稿の情報を表示するための「テンプレートタグ」です。これらのテンプレートタグを使いこなすことで、投稿のタイトル、内容、日付、著者情報などを意図した通りに表示できます。

この記事では、WordPressループ内で頻繁に使用される主要なテンプレートタグをピックアップし、それぞれの機能や使い方をチートシート形式で分かりやすくまとめました。初心者から中級者まで、WordPress開発に携わるすべての方に役立つ情報を目指します。

WordPressループの基本構造

まず、テンプレートタグが使われる基本的なWordPressループの構造を確認しましょう。このループの中で、the_post()関数が呼び出されることで、各投稿の情報がセットアップされ、テンプレートタグが現在の投稿の情報を正しく表示できるようになります。

<?php
if ( have_posts() ) : // 表示すべき投稿があるか確認
    while ( have_posts() ) : the_post(); // ループを開始し、投稿データをセットアップ
        // ↓↓↓ この間にテンプレートタグを使って投稿情報を表示します ↓↓↓

        // 例:
        // the_title( '<h2>', '</h2>' ); // 投稿タイトルをh2タグで囲んで表示
        // the_content(); // 投稿の本文を表示

        // ↑↑↑ ここまでがループ内の処理 ↑↑↑
    endwhile;
else :
    // 表示する投稿が見つからなかった場合の処理
    echo '<p>お探しの記事は見つかりませんでした。</p>';
endif;
// メインループの場合、wp_reset_postdata() は通常不要です。
// WP_Queryを使ったカスタムループの場合は、ループの後に wp_reset_postdata() を呼び出します。
?>

<?php

if ( have_posts() ) : // 表示すべき投稿があるか確認

while ( have_posts() ) : the_post(); // ループを開始し、投稿データをセットアップ

// ↓↓↓ この間にテンプレートタグを使って投稿情報を表示します ↓↓↓

// 例:

// the_title( '<h2>', '</h2>' ); // 投稿タイトルをh2タグで囲んで表示

// the_content(); // 投稿の本文を表示

// ↑↑↑ ここまでがループ内の処理 ↑↑↑

endwhile;

else :

// 表示する投稿が見つからなかった場合の処理

echo '<p>お探しの記事は見つかりませんでした。</p>';

endif;

// メインループの場合、wp_reset_postdata() は通常不要です。

// WP_Queryを使ったカスタムループの場合は、ループの後に wp_reset_postdata() を呼び出します。

the_post()の呼び出しが、ループ内で各テンプレートタグが正しく機能するための「おまじない」だと覚えておきましょう。

主要テンプレートタグ一覧

WordPressループ内で使用できる主要なテンプレートタグを機能別に分類しました。各パラメータの説明の冒頭には、その利用頻度や重要度を星の5段階評価で示しています。星の数の目安は以下の通りです。
★★★★★：ほぼ全ての開発で頻繁に利用され、基本かつ非常に重要なパラメータ
★★★★☆：高頻度で利用され、多くの一般的なカスタマイズで役立つ重要なパラメータ
★★★☆☆：中程度の頻度で利用され、特定の機能を実現する際に便利なパラメータ
★★☆☆☆：利用頻度はやや低めですが、特定の要件や細かな制御を行いたい場合に役立つパラメータ
★☆☆☆☆：利用頻度は低く、非常に限定的な状況や高度なカスタマイズでのみ使用されるパラメータ

関数名	役割・説明 (利用頻度/重要度)	出力形式	主な引数 (オプション)
`the_ID()`	★★★★☆ 現在の投稿のIDを直接出力します。	直接出力 (echo)	なし
`get_the_ID()`	★★★★☆ 現在の投稿のIDを返します。変数に格納したり、他の関数の引数として使えます。	値を返す (return)	なし
`the_title()`	★★★★★ 現在の投稿のタイトルを直接出力します。	直接出力 (echo)	`$before` (タイトルの前), `$after` (タイトルの後), `$echo` (true/false)
`get_the_title()`	★★★★★ 現在の投稿のタイトルを返します。条件分岐や加工に使えます。	値を返す (return)	`$post` (投稿ID/オブジェクト)
`the_content()`	★★★★★ 現在の投稿の本文を直接出力します。自動整形やショートコード展開が適用されます。	直接出力 (echo)	`$more_link_text`, `$strip_teaser`
`get_the_content()`	★★★★☆ 現在の投稿の本文をフィルタ適用済みで返します。ショートコードは展開されます。	値を返す (return)	`$more_link_text`, `$strip_teaser`
`the_excerpt()`	★★★★☆ 現在の投稿の抜粋を直接出力します。未入力時は本文冒頭から自動生成。	直接出力 (echo)	なし (カスタマイズはフィルターフックで)
`get_the_excerpt()`	★★★☆☆ 現在の投稿の抜粋を返します。	値を返す (return)	`$post` (投稿ID/オブジェクト)
`the_permalink()`	★★★★★ 現在の投稿のパーマリンクURLを直接出力します。	直接出力 (echo)	なし
`get_permalink()`	★★★★★ 現在の投稿のパーマリンクURLを返します。	値を返す (return)	`$post` (投稿ID/オブジェクト), `$leavename`
`the_post_thumbnail()`	★★★★★ 現在の投稿のアイキャッチ画像をHTML (タグ) として直接出力します。	直接出力 (echo)	`$size` (画像サイズ), `$attr` (属性配列)
`get_the_post_thumbnail_url()`	★★★★☆ 現在の投稿のアイキャッチ画像のURLを返します。OGP設定などに便利。	値を返す (return)	`$post` (投稿ID/オブジェクト), `$size` (画像サイズ)
`the_date()`	★★★★☆ 現在の投稿の公開日を直接出力。同日複数投稿時は初回のみ表示。	直接出力 (echo)	`$format`, `$before`, `$after`, `$echo`
`get_the_date()`	★★★★☆ 現在の投稿の公開日を指定フォーマットで返します。常に日付を返します。	値を返す (return)	`$format`, `$post` (投稿ID/オブジェクト)
`the_time()`	★★★☆☆ 現在の投稿の公開時刻を直接出力します。	直接出力 (echo)	`$format` (時刻フォーマット)
`get_the_time()`	★★★☆☆ 現在の投稿の公開時刻を指定フォーマットで返します。	値を返す (return)	`$format`, `$post` (投稿ID/オブジェクト)
`the_author()`	★★★★☆ 現在の投稿の著者の表示名を直接出力します。	直接出力 (echo)	なし
`get_the_author()`	★★★☆☆ 現在の投稿の著者の表示名を返します。	値を返す (return)	なし
`the_author_meta()`	★★★☆☆ 現在の投稿の著者の指定メタ情報（ユーザープロファイル情報）を直接出力。	直接出力 (echo)	`$field` (フィールド名), `$userID`
`get_the_author_meta()`	★★★☆☆ 現在の投稿の著者の指定メタ情報を返します。	値を返す (return)	`$field`, `$userID`
`the_category()`	★★★★☆ 現在の投稿が属するカテゴリーのリストをHTMLリンクとして直接出力。	直接出力 (echo)	`$separator`, `$parents`, `$post_id`
`get_the_category_list()`	★★★☆☆ 現在の投稿が属するカテゴリーのリストを整形HTML (通常ul>li) として返します。	値を返す (return)	`$separator`, `$parents`, `$post_id`
`the_tags()`	★★★★☆ 現在の投稿に付けられたタグのリストをHTMLリンクとして直接出力。	直接出力 (echo)	`$before`, `$sep`, `$after`
`get_the_tag_list()`	★★★☆☆ 現在の投稿に付けられたタグのリストを整形HTMLとして返します。	値を返す (return)	`$before`, `$sep`, `$after`, `$id`
`edit_post_link()`	★★★☆☆ 現在の投稿を編集するためのリンクを（権限があれば）直接出力。	直接出力 (echo)	`$link` (リンクテキスト), `$before`, `$after`, `$id`, `$class`

サンプルコード集 (実践的な組み合わせ例)

これらのテンプレートタグを組み合わせて、一般的な投稿表示を構成する例です。

1. 基本的な投稿情報（タイトル、日付、著者、抜粋、続きを読む）の表示

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
                <div class="entry-meta">
                    <span class="posted-on">公開日: <?php echo get_the_date(); ?></span>
                    <span class="byline"> by <?php the_author_posts_link(); ?></span>
                </div>
            </header>

            <div class="entry-summary">
                <?php the_excerpt(); ?>
            </div>

            <footer class="entry-footer">
                <a href="<?php the_permalink(); ?>">続きを読む</a>
                <?php edit_post_link( '編集', '<span class="edit-link">', '</span>' ); ?>
            </footer>
        </article>
    <?php endwhile;
else :
    echo '<p>投稿が見つかりませんでした。</p>';
endif;
?>

<?php

if ( have_posts() ) :

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

<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>

</div>

</header>

<?php the_excerpt(); ?>

</div>

<a href="<?php the_permalink(); ?>">続きを読む</a>

<?php edit_post_link( '編集', '<span class="edit-link">', '</span>' ); ?>

</footer>

</article>

<?php endwhile;

else :

echo '<p>投稿が見つかりませんでした。</p>';

endif;

2. アイキャッチ画像付きの投稿リスト (抜粋の代わりに全文表示)

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class('with-thumbnail'); ?>>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_post_thumbnail('large'); // 'large'サイズのアイキャッチを表示 ?>
                    </a>
                </div>
            <?php endif; ?>

            <header class="entry-header">
                <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
            </header>

            <div class="entry-content">
                <?php the_content('続きを読む &raquo;'); // シンプルな「続きを読む」リンク ?>
                <?php
                wp_link_pages( array(
                    'before' => '<div class="page-links">Pages:', // シンプルな文字列に変更
                    'after'  => '</div>',
                ) );
                ?>
            </div>
        </article>
    <?php endwhile;
else :
    echo '<p>投稿が見つかりませんでした。</p>';
endif;
?>

<?php

if ( have_posts() ) :

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

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

<?php the_post_thumbnail('large'); // 'large'サイズのアイキャッチを表示 ?>

</a>

</div>

<?php endif; ?>

<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>

</header>

<?php the_content('続きを読む »'); // シンプルな「続きを読む」リンク ?>

<?php

wp_link_pages( array(

'before' => '<div class="page-links">Pages:', // シンプルな文字列に変更

'after' => '</div>',

) );

</div>

</article>

<?php endwhile;

else :

echo '<p>投稿が見つかりませんでした。</p>';

endif;

your-theme-textdomain の部分は、お使いのテーマのテキストドメインに置き換えてください（国際化対応のため）。

3. `get_`系関数で値を取得し、条件分岐や加工をして表示

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        $post_title = get_the_title();
        $post_id = get_the_ID();
        $custom_field_value = get_post_meta( $post_id, 'my_custom_field_key', true );

        echo '<h3>' . esc_html( $post_title ) . '</h3>';

        if ( ! empty( $custom_field_value ) ) {
            echo '<p>カスタム情報: ' . esc_html( $custom_field_value ) . '</p>';
        } else {
            echo '<p>この記事には特別な情報はありません。</p>';
        }
        // 他の表示処理
    endwhile;
else :
    // 投稿なし
endif;
?>

<?php

if ( have_posts() ) :

while ( have_posts() ) : the_post();

$post_title = get_the_title();

$post_id = get_the_ID();

$custom_field_value = get_post_meta( $post_id, 'my_custom_field_key', true );

echo '<h3>' . esc_html( $post_title ) . '</h3>';

if ( ! empty( $custom_field_value ) ) {

echo '<p>カスタム情報: ' . esc_html( $custom_field_value ) . '</p>';

} else {

echo '<p>この記事には特別な情報はありません。</p>';

}

// 他の表示処理

endwhile;

else :

// 投稿なし

endif;

よくある質問 (FAQ)

Q1: the_で始まる関数とget_the_で始まる関数の違いは何ですか？: A1: 一般的に、the_で始まる関数（例: the_title(), the_content()）は、取得した情報を直接ブラウザに出力（echo）します。一方、get_the_で始まる関数（例: get_the_title(), get_the_content()）は、情報を文字列や配列などの値として返し、直接出力はしません。返された値を変数に格納したり、PHPの関数で加工したり、条件分岐に使ったりする場合にget_the_系関数を使用します。
Q2: WordPressループの外でこれらのテンプレートタグを使えますか？: A2: 基本的にこれらのテンプレートタグは、WordPressループ内でthe_post()が呼び出された後に、現在の投稿の情報を参照して動作します。ループ外で特定の投稿の情報を表示したい場合は、まずグローバルな$postオブジェクトをsetup_postdata($post_object_or_id)関数でセットアップするか、各テンプレートタグが受け付ける$post_idや投稿オブジェクトを引数として渡す必要があります（例: get_the_title($specific_post_id)）。
Q3: テンプレートタグの引数について、もっと詳しく知りたい場合はどこを見れば良いですか？: A3: 各テンプレートタグのより詳細な引数や使い方については、WordPressの公式ドキュメンテーションサイトである「WordPress Developer Resources (Function Reference)」で関数名を検索するのが最も確実で詳しい情報を得られます。

まとめ

WordPressループとテンプレートタグは、テーマ開発の基本中の基本であり、これらを理解し使いこなすことで、サイトの見た目や情報の提示方法を自由にコントロールできるようになります。この記事が、皆さんのWordPress開発ライフの一助となれば幸いです。様々なタグを試して、その動作を確認してみてください。

私たちは、豊かな自然と歴史が息づく埼玉県川越市に拠点を置き、WordPressサイトのカスタマイズ、オリジナルのプラグイン開発、そして日々の運用サポートや急なトラブル対応など、幅広いサービスを提供しております。お客様の「こうしたい」を形にするお手伝いをさせていただきますので、どうぞお気軽にご相談ください。

WordPressカスタマイズ・プラグイン開発を気軽にと言わせくださいね。

エーデルハーツ

Custom WordPress Support & Development