この記事では、アイキャッチ画像（投稿サムネイル）が登録されていない場合に、あらかじめ用意しておいた代わりの画像を自動的に表示する方法について解説します！
実際の方法
コメント無しver
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/代わりの画像までのパス" alt="">
<?php endif; ?>コメントありver
<?php if (has_post_thumbnail()) : /* もしアイキャッチが登録されていたら */ ?>
<?php the_post_thumbnail(); ?>
<?php else: /* 登録されていなかったら */ ?>
<img src="<?php echo get_template_directory_uri(); ?>/代わりの画像までのパス" alt="">
<?php endif; ?>コメントはPHPタグ無いでコメントアウトしているため、実際のソースコード上には表示されないようになっています。そのままコピペしても大丈夫です！
さくっと解説
条件分岐（if文）を用いています。
- もしアイキャッチが登録されていたら → アイキャッチ画像を表示
- もしアイキャッチが登録されていなかったら → 代わりに用意しておいた画像を表示
コードの詳しい解説
has_post_thumbnail()
<?php if (has_post_thumbnail()) : ?>
<?php endif; ?>投稿や固定ページにアイキャッチ画像が登録されているかどうかをチェックします。
投稿IDを指定しない場合はループ内で利用が可能です。
また、記事を指定してアイキャッチ画像のチェックを行うことも可能です。この場合、下記のように引数に記事IDを記述します。投稿IDを指定すればどこでも利用が可能です。
has_post_thumbnail(記事のID)the_post_thumbnail()
<?php the_post_thumbnail(); ?>登録されているアイキャッチ画像を表示するテンプレートタグです。
ループ内でのみ使用できるので、has_post_thumbnail() とセットで使用します。
引数の指定
なお、下記のように引数を指定することも可能で、アイキャッチ画像のサイズや独自のclassなどを設定できます。
the_post_thumbnail(サイズ, 属性)サイズの指定
サイズの指定は、以下が可能です。
// サムネイルのサイズ
the_post_thumbnail('thumbnail');
// 中サイズ
the_post_thumbnail('medium');
// 大サイズ
the_post_thumbnail('large');
// 元のサイズ（アップロードした画像のサイズ）
the_post_thumbnail('full');
// set_post_thumbnail_size()で設定したサイズにする場合
the_post_thumbnail('post-thumbnail');
// サイズを数値で指定する場合
the_post_thumbnail(array(100, 100));「サムネイルのサイズ」「中サイズ」「大サイズ」については、管理画面の [設定] ＞ [メディア] で設定できます。
パラメータなしのthe_post_thumbnail()で記述する場合は、特に他の設定を操作していなければ、元の画像、つまりフルサイズ（full）の画像で出力されます。
the_post_thumbnail(array(100, 100));のようにサイズを数値(px)で指定した場合は、アップロード時に登録された画像の中から指定されたサイズに近い画像が表示されます。
なお、the_post_thumbnail(array(横幅, 縦幅)); です。
get_template_directory_uri()
<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" alt="NoImage">親テーマディレクトリまでのURLを取得する関数です。
echoを忘れないようにしましょう。
関数リファレンス/get template directory uri
アイキャッチ画像の有効化は忘れずに！
そもそもアイキャッチ画像の枠が表示されていない・WordPressの投稿画面に無い場合は、アイキャッチ画像が無効化されている可能性があります。
以下のコードをfunctions.phpに記述してみましょう。
/* ---------- thumbnailの有効化---------- */
add_theme_support('post-thumbnails');それでも表示されない場合は、実際の投稿画面右上の歯車マークの「ツールと設定」＞「オプション」＞「アイキャッチ画像」チェックを入れて有効にします。
実務向けコード
以下は実際の案件や構築の際によく使うテンプレートコードです。
うまくカスタマイズして使ってみてください！
<?php if (have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
<div class="thumbnail">
<?php if (has_post_thumbnail()): ?>
<p><?php the_post_thumbnail(); ?></p>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" width="280" height="200" alt="NoImage">
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>まとめ
今回の方法を用いることで、運用面において特に活用が期待できます。
- 「アイキャッチを作っている余裕がない…！」
- 「アイキャッチを作る人によってデザインがバラバラ…！」
- 「アイキャッチを設定してないのに投稿してしまってサイトが崩れた…！」
といった問題や課題がある状況でも、自動で統一されたデザインのアイキャッチ画像が表示されるため、サイトのデザインを壊さずに運用できます。
ぜひ活用してみてくださいね！
それでは、よりよいWordPress運用を！
