【WordPress】アイキャッチが未設定の時、代替え画像を表示させる方法

WordPressでブログを書いていると、視覚的に内容を伝えやすくするために、アイキャッチ画像を設定することが多いです。
もしこのアイキャッチ画像が未設定の場合、どのうな処理を与えるのが適切だと思いますか？

一切設定をしていない場合、未設定だと画像自体が表示されないはずです。
ですが、それでは画像の有無でレイアウトが異なり、サイトデザインが崩れてしまう可能性があります。

当ブログでは、アイキャッチが未設定の場合に代替えの画像が表示されるように設定しています。
いわゆる、noimage画像と言われるものです。

今回は、アイキャッチが未設定の時の、代替え画像の設定方法をご紹介します。

アイキャッチ画像の有無で処理を分ける

今回はアイキャッチが未設定の場合に、空欄になることを防ぐための設定です。
「get_the_post_thumbnail()」でアイキャッチの有無を判断させます。

アイキャッチが設定されていればそのまま表示、未設定の場合は用意した代替え画像を表示させる、という処理を指定します。

アイキャッチの有無で処理を判断させるコードです。

PHP

<?php if ( has_post_thumbnail() ): ?> // ここにアイキャッチが設定されている場合の処理を記述 <?php else: ?> // ここにアイキャッチが設定されていない場合の処理を記述 <?php endif; ?>

1 2 3 4 5

<?php if ( has_post_thumbnail() ): ?> // ここにアイキャッチが設定されている場合の処理を記述 <?php else: ?> // ここにアイキャッチが設定されていない場合の処理を記述 <?php endif; ?>

if文で「アイキャッチが設定されているとき」と「アイキャッチが未設定のとき」の処理を変えています。

実際のサンプルコード

具体的なサンプルコードを確認していきます。

今回はアイキャッチが設定されていればそのまま表示、設定されていなければ事前にサーバーへアップロードした「noimage.png」を表示させるコードです。

PHP

<?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'post-thumbnail'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png"> <?php endif; ?>

1 2 3 4 5

<?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'post-thumbnail'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png"> <?php endif; ?>

まとめ

必ず設定しなければいけないことはありません。
ですが、集客など多くのユーザーに訪問してもらうことを前提にするなら、レイアウトがきれいな状態で見てほしいですよね。

PHPに不慣れでもコピペで簡単にできるので、ぜひ実装してみてください。