よくあるのが単純にアイキャッチ画像の設定を忘れてしまった!というパターン。
その場合は再編集して設定すれば済む話ですね。
でも、私が作ったサイトを運営していただいている方から聞いたのは、以下のようなケースでした。
本文の先頭に動画を埋め込んでいるのでアイキャッチ画像はあえて設定しなかった。
そうしたら、トップページの一覧や投稿本文下の「最近の投稿」でアイキャッチ画像があるものとないものが混在してデザインがおかしくなった。
何とかならないもの??
つまり要約すると、こんな仕様が必要なようです。
- 個別のページではアイキャッチ画像があれば表示して、なければなし(いきなり本文)にする
- アイキャッチ画像のない投稿について、一覧類では代替画像を表示させてデザイン崩れしないようにする
クラシックテーマなら、一覧を表示するテンプレートにhas_post_thumbnailで条件分岐をして代替画像を指定すれば済む話なのですが、TT2のようなブロックテーマでは可能か?
でいろいろ調べてみたものの、そんな器用なことはできないみたいでした。
そこで考えたのが以下の方法。
- アイキャッチがいらないと判断した場合(設定してない場合)でも、強制的に何かの画像をアイキャッチ画像として投稿データ上では保存する
- 個別投稿(ページ)でアイキャッチ画像を非表示にするスイッチを設けて非表示化できるようにする
こうすることで、アイキャッチ画像は絶対に存在するけど、表示させるかは任意にすることになり、両方の要望を満たすことができそうな感じです。
そこで今回は、簡単なコードでアイキャッチ画像がない(あえて設定していない場合も含む)場合に強制的に画像を投稿データとして保存する(アイキャッチ画像を自動指定する)方法と、プラグインを使って個別投稿(ページ)上のアイキャッチ画像を非表示にする方法を紹介します。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
- 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
アイキャッチ画像を強制的に指定・保存する方法
調べてみると、本文の最初の画像をアイキャッチとして登録する方法はたくさん掲載されていたものの、それだと本文に画像ブロックが一切ない場合(これ多々あり得る)には結局アイキャッチ画像は設定されないことになってしまうので、以下のページを参考にしつつ、あらかじめメディアにアップロードされている画像を指定する方法に改変しました。
参考: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」という長い名前のプラグインが使いやすいと思います。
有効化すると、アイキャッチ画像の設定項目のところに下図赤枠のチェックボックスが追加されるので、チェックすれば個別の投稿や固定ページではアイキャッチ画像が出力されなくなります。


日本語化すべきは上記画像の部分だけなのですが、他の方が管理するサイトなどで使う場合で、日本語になっていた方がいいと思われる方は、以下から日本語化ファイルをダウンロードできるようにしておきますので、自由に使ってください(上図右の表示になります)。
累計ダウンロード数:78回
翻訳ファイルは、サイト内の「wp-content」→「languages」→「plugins」の中へ「conditionally-display-featured-image-on-singular-pages-ja.mo」ファイルをアップロードすると適用されます。
…とここまで上記プラグインを推してきましたが、このプラグインでは、個別テンプレート内にある、「最近の投稿」ブロックや「クエリーループ」ブロックのアイキャッチ画像も非表示になってしまうようで、ちょっと具合が悪そうです。
他のプラグインにもよさそうなものは見つからず、自作することとしました。方法については、以下のページをご覧ください。
コメントを残す