【テーマ開発】アイキャッチ画像を指定していない投稿にデフォルトのアイキャッチ画像を表示させる方法

WordPressの投稿にはアイキャッチと呼ばれる画像を1つ紐づけることができます。YouTubeのサムネイルのような役割の画像で、サイトの記事一覧ページやSNSに記事を共有したときに表示される重要な画像です。

アイキャッチ画像を呼び出す時のプログラムではthumbnailと書かれた関数を使用するため、アイキャッチのことをサムネイルと呼ぶこともあります。

今回は、投稿のアイキャッチ画像を設定しないまま投稿した時、ただ画像が表示されないのではなく、あらかじめ設定したデフォルト画像を表示するようにするプログラムを紹介します。

アイキャッチを表示する方法

WordPressのアイキャッチ画像は、get_the_post_thumbnail()を利用することで取得することができます。

技術的な解説

この関数は3つの引数を取ることができます。

<?php
/**
 * @param int|WP_Post `$post`はループ中である場合はWP_Post、
 *   または投稿IDが入ります。ここで指定した投稿のサムネイルを表示します。デフォルトはnullです。
 * @param string|int[] `$size`は出力するアイキャッチの大きさを
 *   指定することができます。デフォルトは'post-thumbnail'です。
 * @param string|array `$attr`は出力されるimgタグに追加で属性を
 *   設定することができます。（例：array( "class" => "thumbnail-image" )）
 *
 */
echo get_the_post_thumbnail( get_the_ID(), 'full', array( "class" => "single-thumbnail" ) );
?>
<!-- 以下のように、出力されます。 -->
<img width="1860" height="1047"
  src="https://blog.zaty.jp/wp-content/uploads/2022/03/example.jpeg"
  class="single-thumbnail wp-post-image" alt="" decoding="async">

$sizeは、full, largeなどあらかじめ決まった文字列を入れることが可能です。配列として、array(1200, 600)のように指定することもできます。

指定した文字列に対応するサイズより大きくならないように画像を縮小して出力されます。例えば、3000px * 1575pxの画像を出力する際に、mediumを指定した場合、画像は300px * 158pxになり出力されます。

また、$sizeには配列を指定することも可能です。例えば、array( 2500, 1200 )と指定した場合、3000px * 1575pxの画像は、2286px * 1200pxとして出力されます。

デフォルト画像を設定する

get_the_post_thumbnail関数は初期状態で、アイキャッチが設定されていない場合、何も表示されないようになっています。コードを記述することで、

まずデフォルト画像を用意します。このブログでは、このような画像を用意しています。

このデフォルト画像を、使っているテーマフォルダのimgフォルダの中にnoImage.jpgとして格納します。

フィルターフックを利用して、画像が指定されていない場合、格納したデフォルト画像が表示されるようにコードを記述します。functions.phpに下記のコードを追記します。functions.phpは記述ミスがあるとWordPressがうまく機能しない可能性があります。慣れない内は保存の前にバックアップをしておくことをおすすめします。

function set_default_thumbnail_image ( $html ) {
  if ( "" === $html ) {
    $html = '<img src="' . get_template_directory_uri() . '/img/noImage.jpg" alt="デフォルトのアイキャッチ画像" />';
  }
  return $html;
}
add_filter( 'post_thumbnail_html', 'set_default_thumbnail_image' );

これで画像が登録されていない状態でget_the_post_thumbnail関数を使ったときにデフォルト画像が表示されるようになります。

まとめ

WordPressのテーマ開発では、運用時のあらゆる可能性を想定しておくことが重要です。サイトによっては、デフォルト画像を設定せず、投稿のアイキャッチを忘れて投稿した場合、デザインが崩れてしまうこともあります。

テーマ制作者とサイト運用者が異なる場合は、あらかじめ仕様のすり合わせをすることがもちろん大切です。ですが、サイト運用はWEBサイトが完成した後 何年も続きます。その間にヒューマンエラーや引き継ぎミスによって仕様外の操作が行われる可能性もあります。テーマ制作段階で仕様外の挙動の処理を適切に対処しておくことが重要です。