WordPressでカスタム投稿のアイキャッチ画像が表示されない原因と対処法|supportsとテンプレート出力

WordPressでカスタム投稿のアイキャッチ画像が表示されない原因と対処法 WordPress

カスタム投稿タイプでアイキャッチ画像(サムネイル)が表示されないとき、原因は「設定画面に項目が出ない」のか「設定はできるが表示されない」のかで対処が分かれます。この記事では、原因を3つに切り分けて解決します。

まず前提:カスタム投稿のアイキャッチは「コード」で設定する
「設定 → メディア」にアイキャッチのオン/オフ項目はありません。また、カスタム投稿タイプのアイキャッチ対応を切り替える標準の管理画面メニューもありません。これらは functions.phpコードで有効化します(下で解説)。「設定画面のどこかにチェックがあるはず」と探しても見つからないので注意してください。
確認する3つのポイント

  • ①テーマがアイキャッチに対応しているか(add_theme_support
  • カスタム投稿タイプが対応しているかsupportsthumbnail
  • テンプレートで出力しているかthe_post_thumbnail()
スポンサーリンク

原因1:テーマがアイキャッチに対応していない

編集画面に「アイキャッチ画像」欄そのものが出ない場合、テーマがアイキャッチに対応していない可能性があります。子テーマの functions.php に次を追加します。

functions.php:テーマをアイキャッチ対応にする
add_action('after_setup_theme', function () {
  add_theme_support('post-thumbnails');
});

ほとんどの現代的なテーマ(Cocoon等)は最初から対応済みなので、多くの場合この設定は不要です。次の「カスタム投稿タイプ側」が原因のことが多いです。

原因2:カスタム投稿タイプが対応していない(最も多い)

カスタム投稿の編集画面にアイキャッチ欄が出ない最も多い原因が、register_post_type()supports'thumbnail' が無いことです。登録コードに追加します。

functions.php:カスタム投稿タイプにthumbnailを追加
register_post_type('portfolio', array(
  'label'       => 'ポートフォリオ',
  'public'      => true,
  'has_archive' => true,
  'supports'    => array('title', 'editor', 'thumbnail'), // thumbnail を追加
));
登録コードを直せない場合は後付けできる
プラグインが登録した投稿タイプなど、register_post_type を直接編集できない場合は、add_post_type_support() で後から対応を追加できます。
functions.php:既存の投稿タイプに後付けする
add_action('init', function () {
  add_post_type_support('portfolio', 'thumbnail'); // 対象の投稿タイプ名
}, 20);

カスタム投稿タイプの登録方法そのものはカスタム投稿タイプを追加する方法で詳しく解説しています。

原因3:テンプレートで出力していない

編集画面ではアイキャッチを設定できるのに、サイトの一覧や個別ページに出ない場合は、テンプレート側で表示するコードを書いていないのが原因です。アイキャッチは自動では出力されません。一覧テンプレート(archive-投稿タイプ.php)や個別(single-投稿タイプ.php)のループ内でthe_post_thumbnail() を呼びます。

テンプレート:アイキャッチを出力する
if (has_post_thumbnail()) {
  the_post_thumbnail('medium'); // thumbnail / medium / large / full など
} else {
  echo '<img src="' . esc_url(get_template_directory_uri() . '/images/noimage.png') . '" alt="">';
}
設定漏れ・デフォルト画像
has_post_thumbnail()アイキャッチが設定されているときだけ出力し、未設定なら代替画像を出すのが安全です。未設定時のデフォルト画像はアイキャッチが設定されていない場合にデフォルト画像を表示する方法、カスタム投稿の一覧ページ作成はカスタム投稿の一覧ページを作成する方法を参照してください。

それでも表示されないときの確認

  • その記事にアイキャッチを実際に設定したか(編集画面右側)
  • 画像のサイズ・形式がアップロード可能な範囲か
  • 指定した画像サイズ(medium など)が生成されているか(add_image_size() の追加後は既存画像の再生成が必要)
  • キャッシュプラグインのキャッシュをクリアしたか

よくある質問(FAQ)

Qカスタム投稿でアイキャッチを使えるようにするには?
Aテーマ側は add_theme_support('post-thumbnails')、投稿タイプ側は register_post_type()'supports' => array('title', 'editor', 'thumbnail')thumbnail を含めます。登録コードを触れない場合は add_post_type_support('投稿タイプ', 'thumbnail') で後付けできます。
Q設定はできるのにサイトに表示されません。
Aテンプレートで the_post_thumbnail() を呼んでいないためです。一覧・個別のループ内に if (has_post_thumbnail()) { the_post_thumbnail('medium'); } を追加してください。アイキャッチは書かないと自動では出力されません。
Q表示サイズを指定するには?
Athe_post_thumbnail('サイズ名') で指定します。組み込みは thumbnail(150)・medium(300)・large(1024)・full。独自サイズは add_image_size('名前', 幅, 高さ, true) で登録してから使います(既存画像は再生成が必要)。URLだけ取得したい場合はアイキャッチ画像のURLを取得する方法を参照してください。

まとめ

  • 設定はコードで:管理画面にアイキャッチのオン/オフ項目は無い
  • ①テーマadd_theme_support('post-thumbnails')
  • ②投稿タイプsupportsthumbnail(後付けは add_post_type_support
  • ③テンプレートthe_post_thumbnail() で出力(自動では出ない)

「編集画面に欄が出ない」なら①②、「設定できるのに表示されない」なら③、と切り分けるのが解決の近道です。