09. The Loopとテンプレートタグ

この章では、The Loopとテンプレートタグを学びます。

WordPressテーマ制作では、管理画面に保存された投稿や固定ページの内容をテンプレートに出力します。

その基本になるのがThe Loopです。

The Loopとは

The Loopは、WordPressが取得した投稿データを順番に表示するための基本構文です。

投稿一覧でも、投稿詳細でも、固定ページでも使われます。

The Loopの基本

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

have_posts()は、表示する投稿があるかを確認します。

the_post()は、現在の投稿データを使える状態にします。

the_title()やthe_content()は、現在の投稿のタイトルや本文を出力します。

投稿がない時

投稿がない場合の表示も用意しておきます。

投稿がない時

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

検索結果やカテゴリー一覧では、該当する投稿がないことがあります。

何も表示されない状態にせず、ユーザーに状況が伝わるようにします。

よく使うテンプレートタグ

テンプレートタグは、WordPressの情報を出力するための関数です。

よく使うものは次の通りです。

タグ	出力内容
`the_title()`	タイトル
`the_content()`	本文
`the_excerpt()`	抜粋
`the_permalink()`	投稿URL
`the_post_thumbnail()`	アイキャッチ画像
`the_time()`	日付
`the_category()`	カテゴリー

投稿一覧では、タイトル、リンク、日付、抜粋、アイキャッチを組み合わせることが多いです。

投稿一覧の例

投稿一覧では、複数の投稿を繰り返し表示します。

投稿一覧

<?php if ( have_posts() ) : ?>
    <div class="post-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article class="post-card">
                <a href="<?php the_permalink(); ?>">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <?php the_post_thumbnail( 'medium' ); ?>
                    <?php endif; ?>
                    <h2><?php the_title(); ?></h2>
                    <p><?php echo esc_html( get_the_date() ); ?></p>
                    <?php the_excerpt(); ?>
                </a>
            </article>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

the_permalink()で詳細ページへのリンクを出します。

has_post_thumbnail()でアイキャッチ画像があるか確認しています。

投稿詳細の例

投稿詳細では、1件の投稿を表示します。

single.php

<?php get_header(); ?>

<main class="single-post">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h1><?php the_title(); ?></h1>
                <p><?php echo esc_html( get_the_date() ); ?></p>

                <?php if ( has_post_thumbnail() ) : ?>
                    <?php the_post_thumbnail( 'large' ); ?>
                <?php endif; ?>

                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

本文を出す部分には、entry-contentのようなクラスを付けて、本文用CSSを当てることが多いです。

get_template_part

同じ部品を複数のテンプレートで使う場合は、get_template_part()を使います。

たとえば、投稿カードを共通化できます。

テンプレート側

<?php get_template_part( 'template-parts/post-card' ); ?>

template-parts/post-card.php

<article class="post-card">
    <a href="<?php the_permalink(); ?>">
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
    </a>
</article>

投稿一覧、検索結果、関連記事などで同じ表示を使う時に便利です。

エスケープの入口

WordPressでは、出力する内容に応じてエスケープを意識します。

エスケープとは、HTMLとして安全に出力するための処理です。

よく使うものは次の通りです。

関数	用途
`esc_html()`	テキストとして出力
`esc_url()`	URLとして出力
`esc_attr()`	属性値として出力

エスケープ例

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <?php echo esc_html( get_bloginfo( 'name' ) ); ?>
</a>

最初はすべてを完璧に覚える必要はありません。

ただし、ユーザー入力やURLを出力する時は、安全な出力を意識します。

この章のまとめ

The Loopは、WordPressの投稿データを表示する基本構文
have_posts()とthe_post()で投稿を順番に処理する
the_title()、the_content()、the_permalink()などのテンプレートタグを使う
投稿一覧と投稿詳細では、表示する内容が違う
共通部品はget_template_part()で分けると管理しやすい