【WordPress】アイキャッチが指定されていない場合にデフォルト画像を表示する方法

WordPressのアイキャッチ画像は、デフォルトだと指定しなければ何も表示されません。

今回はアイキャッチ画像が設定されていない場合にデフォルトの画像を表示するカスタマイズ方法を紹介します。

やることは次の2つです。

• functions.phpに関数を作成
• 画像を表示したいテンプレートにURLを記述

functions.phpに関数を作成

functions.phpに、以下の関数を追加してください。

function get_eyecatch_with_default()
{
  if (has_post_thumbnail()) {
    // アイキャッチが指定されていればそれを取得
    $img = wp_get_attachment_image_src(get_post_thumbnail_id(), "large");
  } else {
    // アイキャッチ画像が設定されていなければheader-bg.jpgを取得
    $img = array(get_template_directory_uri() . "/assets/img/header-bg.jpg");
  }
  return $img;

has_post_thumbnail()は投稿にアイキャッチ画像が設定されているかどうかを返します。

設定されていたら$imgにwp_get_attachment_image_srcを使って取得した画像URLを格納。

wp_get_attachment_image_src( $取得したい画像ID, '画像サイズ' );

画像のIDはget_post_thumbnail_id()で取得できます。

画像サイズは文字列（thumbnail, medium, large, fullの4つ）で指定するか、array(1080,1080)など幅と高さをピクセルで指定する方法があります。

デフォルト画像の取得はelse以下で、デフォルトで表示したい画像のディレクトリを$imgに格納しています。

$img = array(get_template_directory_uri()."/assets/img/header-bg.jpg");

配列にしているのは、wp_get_attachment_image_src()の返り値が配列なのでそれと合わせるためです。

WordPress Developer Resources

wp_get_attachment_image_src() – Function | Developer.WordPress.org Retrieves an image to represent an attachment.

// wp_get_attachment_image_srcの返り値
[0] => url
[1] => width
[2] => height
[3] => boolean（リサイズされている場合はtrue、元のサイズの場合はfalse）

URLは後ほど$img[0]で取得します。

画像を表示したいテンプレートにURLを記述

functions.phpで作成した関数を、デフォルト画像を表示するテンプレートで呼び出します。

今回は投稿ページテンプレート（single.php）を使います。

<?php $img = get_eyecatch_with_default(); ?>
<div class="masthead" style="background-image: url('<?php echo $img[0]; ?>')"></div>

background-imageとして使いたかったので、style属性で画像を呼び出しました。
これでアイキャッチ画像を指定していなくても画像が表示されます。