アイキャッチ画像がないときにNoImage画像を表示させる

記事一覧を、サムネイルと記事タイトルのみ表示する形に変更しました。

記事：ブログのトップページに記事全文を表示させないようにテンプレートを編集する方法

アイキャッチ画像として入れた画像がサムネイルとして自動的に表示されるようになっているのですが、アイキャッチ画像を入れていない記事もあったりします。
そこで、アイキャッチ画像が設定されていない記事の場合は、サムネイルに「NO IMAGE画像」を表示させるようにしてみようと思います。

ちなみに、このブログは「twentyfifteen」テーマを使用しているので、こちらのテーマをもとに説明していきます。

画像の追加

まず、アイキャッチ画像がない場合に表示させる「NO IMAGE画像」を追加します。
どこでも構いませんが、今回は、テーマのフォルダに「img」フォルダを追加し、そこに「noimage.png」を入れました。（画像のファイル名はなんでも構いません。）
画像のURLは下記のようになると思います。

ブログのドメイン/wp-content/themes/twentyfifteen/img/noimage.png

これをWordPressのテンプレートで表示させる場合、imgタグは下記のようになります。

<?php echo get_template_directory_uri(); ?> でテンプレートフォルダのパス ブログのドメイン/wp-content/themes/twentyfifteen を呼び出しています。
（「twentyfifteen」の部分は有効化しているテーマによって異なります。）

これを、サムネイルを表示している記事一覧に組み込んでいきます。

記事一覧テンプレートを編集

記事一覧のテンプレートを編集します。
「twentyfifteen」テーマで、トップページの記事一覧を変更する場合は、メインインデックスのテンプレート(index.php)になります。
ダッシュボードから編集する場合は、「 外観 > テーマエディター ＞ メインインデックスのテンプレート(index.php) 」から編集できます。
エディタでファイルを編集する場合のパスは下記になります。

/wp-content/themes/twentyfifteen/index.php

サムネイル、もしくは今回追加した「NO IMAGE画像」を表示させたい箇所に、下記のコードを入れます。

1行目 <?php if(has_post_thumbnail()) : ?> は、「もしアイキャッチ画像が存在するなら以下の処理を実行する」というif文です。
<?php the_post_thumbnail(); ?> はアイキャッチ画像を表示させる関数になります。
３行目 <?php else : ?> は1行目のif文と合わせて使うもので「そうでなければ以下の処理を実行する」というものになります。今回の場合は、アイキャッチ画像が存在しなければ実行することになります。
<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" alt="noimage"> は「NO IMAGE画像」です
最後の5行目 <?php endif; ?> はif文終了の宣言です。閉じタグのようなものなので、を使った場合、記述は必須です。

「NO IMAGE画像」を表示できました！