【WordPress】アイキャッチ画像がない場合ダミー画像を出力させる

どうも、くまだです。

Web制作のオリジナルテーマ構築(WordPress)案件で使う小ネタをたまに書いていきます。(ネタがないから)

自分の備忘録も兼ねてます。

今回は、WordPressでブログ記事一覧ページや記事詳細ページでよく見かける、「アイキャッチ画像が登録されていない場合のダミー画像を出力させる」処理です。

なお、titleタグの出しわけはこちらです。

カスタムフィールドでコンテンツ出しわけはこちらです。

アイキャッチ画像がない場合ダミー画像を出力させる

そもそもブログ記事のアイキャッチ画像でダミー画像を出力させる意味は、クライアント様が必ずアイキャッチ画像を登録するとは限らないからです。アイキャッチ画像すら登録するのもめんどい、という人もなかにはいるはず…。(ブログをやったことがある人ならわかると思う笑)

アイキャッチ画像が登録されていなかったらその部分だけ空白になって不格好になってしまうので、それを避けるために以下のような記述をします。

<div class="imgbox">
  <?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail('post-thumbnail', array('class' => 'imgのクラス名', 'alt' => get_the_title(),)); ?>
  <?php else : ?>
    <img src="<?php echo esc_url(get_template_directory_uri() . '/ダミー画像のパス/'); ?>" alt="<?php the_title(); ?>">
  <?php endif; ?>
 </div>

これを出力すると以下のようになります。

〇アイキャッチ画像が登録されていれば

<div class="imgbox">
 <img src="ここに登録したアイキャッチ画像のパスが出る" alt="記事のタイトル" class="imgのクラス名">
 </div>

〇アイキャッチ画像が登録されていなければ

<div class="imgbox">
  <img src="ダミー画像のパス" alt="記事のタイトル">
 </div>

has_post_thumbnail();でアイキャッチ画像があるかどうかをif文で判定しています。アイキャッチ画像があれば上の処理、なければelse以下の処理です。

the_post_thumbnail();でアイキャッチ画像を呼び出しています。imgタグ自体にクラス名をつけていてなにかしらスタイルを当てているのならば、’class’ => ‘imgのクラス名’,でimgタグにクラスをつけて出力してくれます(imgにクラスをつけていなければ書かなくてよい)。

‘alt’ => get_the_title()でalt属性に記事のタイトルを入れてくれます。

get_template_directory_uri();がディレクトリのURLを出力してくれます。それをesc_url()でエスケープ処理しています。

というわけでアイキャッチ画像がある場合の処理と、ない場合はダミー画像が出るような処理ができました。

ネタがないときはこんな感じの記事もこれから書いていきます。

ここまで読んでくださりありがとうございました。

この記事を書いた人