よくあるのが単純にアイキャッチ画像の設定を忘れてしまった!というパターン。

その場合は再編集して設定すれば済む話ですね。

でも、私が作ったサイトを運営していただいている方から聞いたのは、以下のようなケースでした。

本文の先頭に動画を埋め込んでいるのでアイキャッチ画像はあえて設定しなかった。

そうしたら、トップページの一覧や投稿本文下の「最近の投稿」でアイキャッチ画像があるものとないものが混在してデザインがおかしくなった。

何とかならないもの??

つまり要約すると、こんな仕様が必要なようです。

  • 個別のページではアイキャッチ画像があれば表示して、なければなし(いきなり本文)にする
  • アイキャッチ画像のない投稿について、一覧類では代替画像を表示させてデザイン崩れしないようにする

クラシックテーマなら、一覧を表示するテンプレートにhas_post_thumbnailで条件分岐をして代替画像を指定すれば済む話なのですが、TT2のようなブロックテーマでは可能か?

でいろいろ調べてみたものの、そんな器用なことはできないみたいでした。

そこで考えたのが以下の方法。

  • アイキャッチがいらないと判断した場合(設定してない場合)でも、強制的に何かの画像をアイキャッチ画像として投稿データ上では保存する
  • 個別投稿(ページ)でアイキャッチ画像を非表示にするスイッチを設けて非表示化できるようにする

こうすることで、アイキャッチ画像は絶対に存在するけど、表示させるかは任意にすることになり、両方の要望を満たすことができそうな感じです。

そこで今回は、簡単なコードでアイキャッチ画像がない(あえて設定していない場合も含む)場合に強制的に画像を投稿データとして保存する(アイキャッチ画像を自動指定する)方法と、プラグインを使って個別投稿(ページ)上のアイキャッチ画像を非表示にする方法を紹介します。

本ページは、以下で配布している独自プラグイン【Hima Art Utility】に搭載している機能の1つを、Twenty Twenty-Twoテーマの子テーマへ追加しても動作するようにしたコードを紹介しています。

基本的にTT2テーマでのみ動作チェックをしていますので、他のブロックテーマ・クラシックテーマでは調整が必要だったり、動作しない可能性があります

アイキャッチ画像を強制的に指定・保存する方法

調べてみると、本文の最初の画像をアイキャッチとして登録する方法はたくさん掲載されていたものの、それだと本文に画像ブロックが一切ない場合(これ多々あり得る)には結局アイキャッチ画像は設定されないことになってしまうので、以下のページを参考にしつつ、あらかじめメディアにアップロードされている画像を指定する方法に改変しました。

参考:Automatically Set the First Post Image as a Featured Image in WordPress

以下がコードです(結構簡単なコードです)。

子テーマのfunctions.phpへ追加、または独自プラグインへ機能追加することで動作します。

コード中の「アイキャッチ画像にする画像のID」の部分を代替として登録するアイキャッチ画像のIDへ変更してください

if ( !function_exists( 'sample_auto_featured_image' ) ){
function sample_auto_featured_image() {
    global $post;
 
    if (!has_post_thumbnail($post->ID)) {
		$attachment_id= 'アイキャッチ画像にする画像のID';
             set_post_thumbnail($post->ID, $attachment_id);
         }
}
}
// Used for new posts
add_action('save_post', 'sample_auto_featured_image');
add_action('draft_to_publish', 'sample_auto_featured_image');
add_action('new_to_publish', 'sample_auto_featured_image');
add_action('pending_to_publish', 'sample_auto_featured_image');
add_action('future_to_publish', 'sample_auto_featured_image');

画像のIDはメディアの編集画面を開いたときにアドレスバーに表示される「?post=〇〇」の〇〇の部分です

コードの簡単な解説

プログラム自体は、アイキャッチ画像の設定がなかったら、「アイキャッチ画像にする画像のID」の画像をセットして、以下の場合に自動で挿入して保存しなさいというものです。

  • save_post 投稿が保存されたとき
  • draft_to_publish 下書き状態から公開したとき
  • new_to_publish 新規作成状態から公開したとき
  • pending_to_publish 承認状態から公開したとき
  • future_to_publish 公開予約から公開したとき

あらかじめ設定されているアイキャッチ画像がある場合は何もしませんので心配ありません


結構簡単なコードでアイキャッチ画像の自動挿入については実装できました。

あとは個別ページでの表示/非表示の切り替えになりますが、次項でよさげなプラグインがありましたのでそちらを使うといいのでは?という結論になりました。

個別ページでアイキャッチ画像の表示/非表示を切り替える

一応TT2テーマ(ブロックテーマ)でも動作確認済です

「Conditionally display featured image on singular pages and posts」という長い名前のプラグインが使いやすいと思います。

有効化すると、アイキャッチ画像の設定項目のところに下図赤枠のチェックボックスが追加されるので、チェックすれば個別の投稿や固定ページではアイキャッチ画像が出力されなくなります。

投稿や固定ページの新規作成時にアイキャッチ画像を自動設定する方法|Twenty Twenty-Two (TT2)のカスタマイズ情報
投稿や固定ページの新規作成時にアイキャッチ画像を自動設定する方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

日本語化すべきは上記画像の部分だけなのですが、他の方が管理するサイトなどで使う場合で、日本語になっていた方がいいと思われる方は、以下から日本語化ファイルをダウンロードできるようにしておきますので、自由に使ってください(上図右の表示になります)。

翻訳ファイルは、サイト内の「wp-content」→「languages」→「plugins」の中へ「conditionally-display-featured-image-on-singular-pages-ja.mo」ファイルをアップロードすると適用されます。

…とここまで上記プラグインを推してきましたが、このプラグインでは、個別テンプレート内にある、「最近の投稿」ブロックや「クエリーループ」ブロックのアイキャッチ画像も非表示になってしまうようで、ちょっと具合が悪そうです。

他のプラグインにもよさそうなものは見つからず、自作することとしました。方法については、以下のページをご覧ください。