ブロサイ
2025.07.04

【WordPress】投稿のアイキャッチ画像の有無で表示を切り替える方法

PC画面

今回は、WordPressの投稿/カスタム投稿機能で、アイキャッチ画像の登録有無で画像を切り替える方法を説明させていただきます。

条件分岐を使用してアイキャッチ画像とNo image画像で切り替える

今回紹介する方法は、通常の投稿(ブログや新着情報)だけでなく、カスタム投稿を使用し、アイキャッチ画像を表示する場面でも使用できますので、いずれかの投稿機能でアイキャッチ画像の表示を切り替えたいと考えている方は参考にしてみてください。
早速コードを紹介していきます。

条件分岐を使用したアイキャッチの切り替えコード

<div class="post-thumbnail">
  <?php if (has_post_thumbnail()) : ?>
    <img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php the_title(); ?>" class="post-thumbnail__img">
  <?php else: ?>
    <img src="pic_noimage.jpg" alt="no image" class="post-thumbnail__img">
  <?php endif; ?>
</div>

上記のコードでアイキャッチの有無により表示させる画像を切り替えられます。
「<?php if (has_post_thumbnail()) : ?>」がアイキャッチ画像が登録されているかの判定になりますので、こちらにアイキャッチ画像が登録されている場合のHTMLの記述を、「<?php else: ?>」の下にアイキャッチ画像がない場合に表示させたい画像の記述を入力します。

関連する記事