はじめに
Cocoonテーマで「エントリーカード」「ナビカード・おすすめカード」「ブログカード」を利用する際、それぞれのカード機能によってサムネイル画像の参照元や優先順位が異なります。
基本となるエントリーカードの判定順序を踏まえた上で、各カードの仕様を整理して理解しておくことで、意図通りのサムネイル設定を行いやすくなります。
この記事では、この方法について説明します。
各カードにおけるサムネイル表示の仕様と違い
エントリーカードの仕様
エントリーカード（サムネイル画像）の表示仕様およびフォールバック（代替画像）の優先順位は、以下の通りです。
アイキャッチ画像の優先順位
- 個々の投稿に設定されたアイキャッチ画像が最優先で表示されます。
- 投稿自体にアイキャッチ画像が設定されていない場合は、「カテゴリー」＞「タグ」の順に関連する画像が参照され、最終的にいずれも未設定であれば「NO IMAGE」画像が適用されます。
- カテゴリー内では「メインカテゴリー」が通常のカテゴリーよりも優先されます。
カテゴリーやタグが複数ある場合の扱い
- カテゴリー
メインカテゴリーが設定されている場合はそれが最優先され、設定されていない場合は通常のカテゴリーの配列における先頭（最初）のカテゴリーに設定されたアイキャッチ画像が選択されます。
2番目以降のカテゴリーに画像が設定されていても、先頭に画像がなければ適用されません。
- タグ
投稿に複数のタグが紐づいている場合、取得される配列の先頭（最初）にあるタグのアイキャッチ画像が選択されます。
カテゴリーと同様に、2番目以降のタグに画像が設定されていても、先頭のタグに画像がなければ反映されません。
ナビカード・おすすめカードの仕様
外観→メニューで設定したカスタムメニューの構造とメタデータを参照してカードを生成します。
その際、サムネイル画像は、メニュー項目の「タイトル属性」に入力された画像URL（jpg, png, webp等）が最優先で採用されます。
- 内部リンクの場合
タイトル属性が未設定であっても、エントリーカードと同様に紐づく投稿のアイキャッチやカテゴリー・タグの画像がフォールバックとして参照されます。
- 外部リンクの場合
タイトル属性が未設定だと「NO IMAGE」表示となります。
外部ブログカードの仕様
基本的に対象ページのog:imageを取得してサムネイルとして表示します。
og:imageが設定されていないなど取得できない場合は、画面キャプチャ（スクリーンショット）がフォールバックとして表示される仕組みになっています。
外部ブログカードのサムネイルを任意の画像に差し替える方法
Cocoonには、外部ブログカードのサムネイルURLを出力する直前に割り込んで変更できるフィルターフック（get_external_blogcard_thumbnail_url）が用意されています。
これを利用することで、特定URLへの外部リンクに対して任意の画像URLを指定し、表示されるサムネイルを直接差し替えることが可能です。
実装手順
以下のコードをfunctions.phpに追加します。
add_filter('get_external_blogcard_thumbnail_url', function($image, $url) {
$links = [
[
'href' => '/wp-cocoon.com/community/',
'imgSrc' => 'https://exsample.com/temp/wp-content/uploads/2026/10/12345.jpg'
],
];
foreach ($links as $link) {
if (strpos($url, $link['href']) !== false) {
return $link['imgSrc'];
}
}
return $image;
}, 10, 2);さいごに
今回紹介した方法を使えば、Cocoonの各種カードにおけるサムネイル表示の仕様の違いや、フォールバックの判定ロジックをスムーズに把握することができます。
また、フィルターフックを活用することで、外部ブログカードのサムネイルを任意の画像へ柔軟に差し替えることも可能です。
それぞれの仕様を正しく理解し、サイトの表示やカスタマイズにぜひ役立ててみてください。
