WordPressのアイキャッチ画像が表示されない原因は投稿設定とテーマに分けて調べる

WordPressのアイキャッチ画像は、画像をアップロードしただけでは公開画面へ表示されません。テーマがアイキャッチ画像機能に対応し、投稿へ画像を設定し、表示するテンプレートが画像を出力する必要があります。

編集画面に設定欄がないなら、まず「表示オプション」で隠れていないかを確認し、その後でテーマの機能対応を調べます。設定欄があり、画像も選んであるのに公開画面へ出ないなら、テンプレートの出力を確認します。原因を分ければ、同じ画像の再アップロードや、関係のないプラグインの追加をせずに調べられます。

アイキャッチ画像はテーマの対応、投稿設定、画面出力の三段階で表示する

WordPress 2.9では、テーマがpost-thumbnails機能へ対応し、投稿へ画像を関連付ける仕組みが追加されました。WordPress 3.4.1の処理では、使用中のテーマと投稿の種類が機能に対応している場合だけ、編集画面へアイキャッチ画像の設定欄を追加します。

設定した画像を公開画面へ出す処理は、テーマのテンプレートが担当します。したがって、次の三つは別の状態です。

一つ目から順に確認します。後の段階を直しても、前の段階が欠けていれば表示されません。

設定欄がない場合は表示オプションとテーマの機能対応を確認する

編集画面の「表示オプション」を開き、アイキャッチ画像の欄が非表示になっていないかを確認します。表示する選択肢自体がなければ、テーマと投稿の種類が機能へ対応しているかを調べます。

テーマでアイキャッチ画像を使うには、テーマのfunctions.phpから機能対応を登録します。WordPress 3.4.1のテンプレート関数にも、テーマが次の処理を呼び出す必要があると記されています。

add_theme_support( 'post-thumbnails' );

ただし、設定欄が見えないという理由だけで、使用中の親テーマを直接編集してはいけません。まず、現在のテーマ名、子テーマの有無、functions.phpの原本、更新方法を確認します。独自テーマならバックアップを取り、配布テーマなら更新で変更が失われない方法を決めてから修正します。

WordPressは、テーマがすべての投稿の種類へ対応を登録する方法と、対象を指定して登録する方法を扱えます。ある投稿では設定欄が出ても、別の種類では出ない場合があります。テーマが対応しているかだけでなく、いま編集している投稿の種類も確認します。

画像を本文へ挿入することと投稿へ設定することは別

アイキャッチ画像の設定欄は、画像を本文へ挿入せず、投稿へ関連付けるために使います。メディアへアップロードした画像や、本文内に挿入した画像が、自動的にアイキャッチ画像になるわけではありません。

編集画面で「アイキャッチ画像を設定」を選び、その投稿へ使う画像を指定します。「アイキャッチ画像」という日本語名と「アイキャッチ画像を設定」という操作名は、2012年6月公開のWordPress 3.4.1日本語版でも使われています。

画像を選んだあとに表示されない場合は、別の画像を追加する前に、その投稿へアイキャッチ画像が設定されているかをもう一度確認します。本文の先頭に同じ画像が見えていても、アイキャッチ画像として関連付けられている証拠にはなりません。

設定済みで表示されない場合は該当テンプレートの出力を確認する

WordPressのthe_post_thumbnail()は、投稿へ設定されたアイキャッチ画像のHTMLを出力する関数です。テーマのテンプレートに出力処理がなければ、投稿へ画像を設定しても公開画面には現れません。

次は、テーマのループ内で、現在の投稿にアイキャッチ画像がある場合だけ出力する最小の例です。

<?php if ( has_post_thumbnail() ) : ?>
  <?php the_post_thumbnail(); ?>
<?php endif; ?>

この例を置くファイルは、表示したい画面とテーマの構成によって異なります。投稿一覧だけに表示するなら一覧を作るテンプレート、個別記事にも表示するなら個別表示のテンプレートに処理が必要です。一覧には出るが個別記事には出ない場合、画像の設定より、二つの画面が使うテンプレートの違いを先に調べます。

テンプレートを編集する前に、変更対象のファイルと表示箇所を対応させます。別の画面を作るファイルへ出力処理を加えても、調べているページは変わりません。

設定した画像が出るなら大きさの問題を分けて調べる

設定したアイキャッチ画像と同じ画像が、目的の表示箇所へ出ているなら、機能対応、投稿への設定、テンプレート出力の三段階は通っています。大きさや切り抜き方が意図と違う問題は、表示されない問題と分けます。

WordPress 3.4.1のset_post_thumbnail_size()は、post-thumbnailという画像サイズを登録します。the_post_thumbnail()には、出力する画像サイズを指定できます。テーマが登録した大きさ、テンプレートが要求する大きさ、CSSで表示する大きさを分けて確認します。

症状ごとに調べる担当を分ける

アイキャッチ画像を選ぶ作業と、テーマを変更する作業は別です。更新担当者が画像を設定できても、テーマのPHPを変更できるとは限りません。制作会社へ修正を依頼する場合も、「表示されない」という連絡だけでなく、次の状態を伝えます。

修正を依頼する側も、使用中のテーマ名、対象投稿のURL、表示したい場所、設定欄の有無、選んだ画像、表示される画面と表示されない画面を残します。テーマの変更を誰が行い、更新後に誰が確認するかも決めます。

最初に一つの投稿を選び、編集画面に設定欄があるか、画像が設定されているか、どの公開画面で表示されないかを記録してください。その三点がそろってから、テーマのどのテンプレートを確認するか決めます。