【Cocoonカスタマイズ】アイキャッチ未設定のとき本文中の画像をサムネイル表示する方法

はじめに
本文上のアイキャッチに反映する方法
- 実装手順
- 解説
サムネイルにもアイキャッチを反映する方法
- 実装手順
さいごに

はじめに

他ブログからWordPressにデータを移行すると、アイキャッチが未設定の状態になります。
通常はプラグイン「Auto Featured Image」などを使用して再設定する必要があります。

しかし、再設定せずに本文内の最初の画像をアイキャッチやサムネイルとして表示させることができます。

この記事では、この方法について説明します。

本文上のアイキャッチに反映する方法

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定をします。

Cocoon設定
設定大項目項目設定値
画像本文画像設定アイキャッチ自動設定を有効にするオン
ラベル
CSSを追加
以下のコードをstyle.cssに追加します。
例として、NO IMAGE画像のファイル名を「123456.png」とします。
```
.eye-catch-wrap.display-none:not(:has(img[src*="123456.png"])) {
  display: flex;
}
```

設定	大項目	項目	設定値
画像	本文画像設定	アイキャッチ自動設定を有効にする	オン

解説

Cocoon設定の「アイキャッチの自動設定」をオンにすると、本文内の最初の画像がアイキャッチとして適用されます。
また、この設定を有効にするとog:imageにも本文内の最初の画像が適用されます。

しかし、CSSクラスdisplay-noneによって非表示になっているため、NO IMAGE画像以外のときに表示するようCSSを調整します。

サムネイルにもアイキャッチを反映する方法

エントリーカードなどのサムネイルが「NO IMAGE」になるため、投稿本文内の最初の画像に変更します。

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('get_sized_no_image_url', function ($url, $width, $height, $id) {
  $post = get_post($id);
  $content = $post->post_content ?? '';

  // 投稿本文から1番目のimgタグの画像URLを抽出
  preg_match('/<img.*?src=(["\'])(.+?)\1.*?>/i', $content, $image);

  return !empty($image[2]) ? $image[2] : $url;
}, 10, 4);

さいごに

今回紹介した方法を使えば、アイキャッチ未設定の投稿でも本文内の最初の画像を自動で適用できます。
プラグインを使わずに、Cocoonの設定とCSS、PHPのカスタマイズのみで対応できるため、アイキャッチの再設定を省略したい場合に便利です。