WordPressでのことです。投稿編集画面でアイキャッチを設定していない場合は記事一覧には代替画像を表示したいというとき。
実現するには記事一覧のループ内でアイキャッチ画像が投稿に「使われているか」「使われていないか」の有無を判定して代替画像を読み込む処理を書きます。すると、アイキャッチがない投稿の場合は記事一覧で代替画像を表示することができます。
WordPressでアイキャッチを設定してない投稿
はじめにWordPressでアイキャッチを設定してない投稿は記事一覧では「こんな感じで表示されるのです」という表示例を画像にしました。
投稿にアイキャッチがないときに代替画像が表示するようにループ処理をしてるWordPressテーマならアイキャッチに代替画像が使われますが、代わりの画像がない場合は画像を表示する要素の背景だけになってしまいます。
WordPressでアイキャッチを設定してない投稿だけ画像がないと少し寂しいです。せめて代替画像としてNO IMAGE画像でも表示させたいです。
そのためにはWordPressのループ内でアイキャッチの「有無を判定」します。
アイキャッチの有無をhas_post_thumbnailで判定
WordPressでアイキャッチの有無を判定するときにはhas_post_thumbnail()というWordPress関数を使用します。
has_post_thumbnail()
WordPressのhas_post_thumbnail()関数は投稿にアイキャッチ画像が登録されているかどうかをチェックする関数です。
またhas_post_thumbnail()関数は投稿にアイキャッチ画像が設定してあれば戻り値としてtrue を、投稿にアイキャッチ画像が設定していなければfalseを返します。
そのためhas_post_thumbnail()の使い方はif文の条件式に使用すると、WordPressのループ内で投稿ごとのアイキャッチ画像の有無を判定した結果を元にアイキャッチ画像の処理を条件分岐できます。
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?><!--投稿にアイキャッチがある場合-->
<?php else: ?>
<!--投稿にアイキャッチ画像がないときの代替画像を読み込む-->
<?php endif; ?>
WordPressの投稿でアイキャッチを設定している場合はhas_post_thumbnail()が「投稿にアイキャッチが使われてる(true)」と判定をするのでthe_post_thumbnailが投稿のアイキャッチを表示。
アイキャッチ画像を設定していない投稿はhas_post_thumbnail()が「投稿にアイキャッチが使われていない(false)」と判定をするのでelse文に進み代替画像を表示することができるようになります。
アイキャッチがない場合は代替画像を表示する
WordPressの投稿でアイキャッチ画像がない場合に表示する代替画像はテーマの画像フォルダに入れて配置しておきます。テーマのimgフォルダあたりに入れることになるかと思います。
テーマの画像フォルダに設置した代替画像はアイキャッチ画像がなかった場合に表示ができるようにif文を用いてelseとendifの間に代替画像のパスを指定します。
<div class="archive_eyecatch">
<a href="<?php the_permalink(); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/img_no.gif" alt="">
<?php endif; ?>
</a>
</div>
代替画像のパスを指定するときはWordPressですので、HTMLのimgタグsrc属性にget_template_directory_uri()を記述し画像のパスを指定します。
そうすると、ループの処理のときWordPressがアイキャッチの「有無を判定」、投稿にアイキャッチがない場合は代替画像が表示されます。
上の画像はfront-page.phpに記述したループで表示させた記事一覧です。黒い背景のNo image画像で代替画像を表示しています。
記事一覧には代替画像を表示したいけど、投稿ページの記事内には表示させたくないという場合もあるかと思います。
<?php if(has_post_thumbnail()) : ?>
<div class="single_thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
そんなときは投稿ページを表示しているshingle.phpに記述するループにはelse文を記述せずにthe_post_thumbnailで投稿のアイキャッチ画像を表示させるようにします。もし代替画像が必要になったらelse文の記述を加えて代替画像を読み込むだけで済みます。
