Cocoonでカテゴリーのアイキャッチ画像を設定する方法と表示されない際の対処法

Cocoonテーマでは、カテゴリーごとにアイキャッチ画像を設定でき、カテゴリーページの見出しなどに表示されます。この記事では設定手順と、設定したのにうまく表示されない（NO IMAGEになる）場合の原因と対処法、さらにテンプレートでカテゴリーアイキャッチを表示するコード例まで解説します。

カテゴリーのアイキャッチ画像設定手順

WordPress管理画面の 投稿 → カテゴリー を開きます。アイキャッチを設定したいカテゴリー名にカーソルを合わせると下に表示される「編集」をクリックし、編集画面へ進みます。

カテゴリー編集画面の本文欄の下にある「アイキャッチの選択」をクリックし、アイキャッチに設定したい画像をメディアから選びます。

画面下部の「更新」ボタンをクリックして設定を反映します。

これでカテゴリーのアイキャッチ画像が反映されます。

設定したアイキャッチ画像がうまく表示されない際の対処法

カテゴリーのアイキャッチを設定したのに、下の画像のようにデフォルトの「NO IMAGE」が表示されてしまうことがあります。

何度か設定し直したりブラウザのキャッシュをクリアしても、デフォルト画像のままになってしまうケースです。筆者の場合、原因は画像URLの先頭が https ではなく http になっていたことでした。

WordPressのサイトURLが http で設定されていたため、アイキャッチの画像URLも自動的に http で登録されてしまっていたのが原因です。サイトURLは 設定 → 一般 の「WordPress アドレス (URL)」「サイトアドレス (URL)」で確認できます。

アイキャッチが表示されない問題は投稿・カスタム投稿でも起こります。原因の切り分けはカスタム投稿のアイキャッチ画像が表示されない原因と対処法も参考になります。

テンプレートでカテゴリーアイキャッチを表示する

独自テンプレートでカテゴリーのアイキャッチを使いたい場合は、Cocoonが保存している term メタ the_category_eye_catch_url からURLを取得します（タグは the_tag_eye_catch_url）。未設定時のデフォルト画像も用意しておくと安全です。

<?php
// アーカイブテンプレートで「今表示中のカテゴリー」を取得
$term = get_queried_object();

// Cocoon はカテゴリーアイキャッチのURLを term メタに保存している
$eyecatch = get_term_meta($term->term_id, 'the_category_eye_catch_url', true);

if ($eyecatch) {
  echo '<img src="' . esc_url($eyecatch) . '" alt="' . esc_attr($term->name) . '">';
} else {
  // 未設定時のデフォルト画像
  echo '<img src="/wp-content/uploads/no-image.png" alt="">';
}

カテゴリーごとにデフォルト画像を出し分けたい場合はカテゴリーごとに異なるデフォルトのサムネイル画像を表示する方法、アイキャッチ未設定時の共通デフォルト表示はアイキャッチ画像が設定されていない場合にデフォルト画像を表示する方法が参考になります。

まとめ

• 設定：投稿 → カテゴリー → 編集 → アイキャッチの選択 → 更新
• NO IMAGEになる：多くはサイトURL／画像URLが http になっているのが原因
• 対処：設定 → 一般で https を確認、画像URLを再設定、キャッシュをクリア、必要ならDBのURL一括置換
• テンプレート表示：get_term_meta($term_id, "the_category_eye_catch_url", true)

アイキャッチが表示されないトラブルの多くは http/https まわりが原因です。まずはサイトURLと画像URLのプロトコルを確認してみてください。