has_post_thumbnail()でアイキャッチの有無を判定する方法【WordPress】

has_post_thumbnail()でアイキャッチを条件分岐する
基本の書き方
実装パターン別コード
躓きやすいポイント
まとめ

has_post_thumbnail()でアイキャッチを条件分岐する

WordPressでテーマを作っていると、「アイキャッチがある記事はアイキャッチを表示して、ない記事はデフォルト画像を表示したい」という場面がよくあります。

そのときに使うのがhas_post_thumbnail()です。アイキャッチが設定されているかどうかをtrue/falseで返してくれるので、if文と組み合わせてシンプルに条件分岐できます。この記事では基本の使い方からデフォルト画像の出し分けまで、実装コード付きで紹介します。

基本の書き方

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

各関数の解説

has_post_thumbnail()：アイキャッチが設定されていればtrue、未設定ならfalseを返す
the_post_thumbnail()：アイキャッチ画像を<img>タグで出力する関数

ループの中で使う場合は引数なしでOKです。ループの外で特定の投稿IDを指定したい場合はhas_post_thumbnail( $post_id )のように投稿IDを渡します。

実装パターン別コード

① アイキャッチがないときにデフォルト画像を表示する

<?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; ?>

各部分の解説

the_post_thumbnail( 'medium' )：画像サイズを指定して出力。thumbnail・medium・large・fullが使える
get_template_directory_uri()：テーマフォルダのURLを取得する関数。デフォルト画像のパスに使う
子テーマを使っている場合はget_stylesheet_directory_uri()に変えると子テーマのフォルダを参照する

② アイキャッチのURLだけ取得したい場合

<?php
$thumbnail_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
if ( $thumbnail_url ) {
    echo '<img src="' . esc_url( $thumbnail_url ) . '" alt="' . esc_attr( get_the_title() ) . '">';
} else {
    echo '<img src="' . esc_url( get_template_directory_uri() ) . '/images/no-image.jpg" alt="No Image">';
}
?>

CSSのbackground-imageに使いたいときや、<img>タグの属性を細かく制御したいときはURLだけ取得するこの方法が便利です。

get_the_post_thumbnail_url()：アイキャッチのURLを文字列で返す
esc_url()：URL出力時のサニタイズ。セキュリティ対策として必ず使う
esc_attr()：属性値出力時のサニタイズ

③ 記事一覧ループの中で使う典型的な実装

<?php if ( $query->have_posts() ) : ?>
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <article>
            <a href="<?php the_permalink(); ?>">
                <?php if ( has_post_thumbnail() ) : ?>
                    <?php the_post_thumbnail( 'medium' ); ?>
                <?php else : ?>
                    <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/no-image.jpg" alt="No Image">
                <?php endif; ?>
                <h2><?php the_title(); ?></h2>
            </a>
        </article>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
<?php endif; ?>

WP_Queryで投稿を日付順・ランダムに並び替える方法【WordPress】

WP_Queryで投稿の並び順を自由に変えるWordPressで「新着順じゃなくてランダムに記事を表示したい」「日付の古…

↑WP_Queryを使って、日付順・ランダムに表示する方法を解説しています。

躓きやすいポイント

ループの外で使うと意図しない投稿のアイキャッチが返る has_post_thumbnail()をループの外で使うと、グローバルな$post変数の投稿を参照します。特定の投稿を指定したい場合は引数に投稿IDを渡すhas_post_thumbnail( $post_id )を使いましょう。

子テーマのデフォルト画像が表示されない get_template_directory_uri()は親テーマのフォルダを参照します。デフォルト画像を子テーマのimagesフォルダに置いている場合はget_stylesheet_directory_uri()に変えてください。

the_post_thumbnail()のaltが空になる the_post_thumbnail()が出力する<img>タグのalt属性は、メディアライブラリで設定した「代替テキスト」が入ります。未設定だと空になるので、メディアアップロード時にaltを設定する運用ルールを決めておくと安心です。