アイキャッチ画像の出し方と代替画像

アイキャッチ画像（サムネイル）はthe_post_thumbnail()で出します。押さえるのは「テーマ側の有効化」「サイズ指定」「未設定のときの代替」の3点です。

<?php the_post_thumbnail('large'); ?>

1. まずテーマで有効化する

編集画面に「アイキャッチ画像」の欄が出ていない場合は、テーマがまだ対応していません。functions.phpに1行足します。

add_theme_support('post-thumbnails');

カスタム投稿タイプでは、登録時のsupportsに'thumbnail'を含めます。ここを忘れると、投稿には欄があるのに商品には無い、という状態になります。

register_post_type('shohin', [
  'supports' => ['title', 'editor', 'thumbnail'],   // ← thumbnail
  // …
]);

2. サイズを指定する

the_post_thumbnail()の第1引数がサイズ名です。指定しないとpost-thumbnailという小さいサイズになるので、必ず指定する癖をつけます。

サイズの数値は「設定」→「メディア」で変更できます。画像は登録済みのサイズから自動で選ばれるので、大きすぎるfullを一覧に並べると重くなる点に注意します。

クラスを付けたいときは第2引数に配列を渡します。

<?php the_post_thumbnail('medium', ['class' => 'card-image']); ?>

3. 未設定のときに崩さない（代替画像）

アイキャッチは入っていないこともある——一覧ページで1枚だけ画像が欠けると、途端に見た目が崩れます。has_post_thumbnail()で分岐します。

<?php if (has_post_thumbnail()) : ?>
  <?php the_post_thumbnail('medium', ['class' => 'card-image']); ?>
<?php else : ?>
  <img class="card-image"
       src="<?php echo esc_url(get_theme_file_uri('images/no-image.png')); ?>"
       alt="" width="600" height="400">
<?php endif; ?>

get_theme_file_uri()はテーマ内のファイルのURLを返す関数です（get_template_directory_uri() . '/images/no-image.png'と同じ意味で、子テーマにも対応します）。

.card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

URLだけ欲しいとき

背景画像やOGPに使いたいときは、URLを返す関数を使います。

<?php $url = get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>
<?php if ($url) : ?>
  <div class="hero" style="background-image: url('<?php echo esc_url($url); ?>');"></div>
<?php endif; ?>

ループの外（別の投稿）のアイキャッチを出したいときは、get_the_post_thumbnail($post_id, 'medium')のようにIDを渡す形を使います。

一覧でリンク付きのカードにする

<article class="card">
  <a href="<?php the_permalink(); ?>">
    <?php if (has_post_thumbnail()) : ?>
      <?php the_post_thumbnail('medium', ['class' => 'card-image']); ?>
    <?php endif; ?>
    <h2><?php the_title(); ?></h2>
  </a>
</article>

画像とタイトルをまとめて1つのリンクにすると、クリックできる面積が広がって使いやすくなります。

独自サイズを追加する

「一覧は600×400で切り抜きたい」など、標準サイズに合わないときは自分で追加します。

add_theme_support('post-thumbnails');
add_image_size('card', 600, 400, true);   // 第4引数true＝切り抜く

<?php the_post_thumbnail('card'); ?>

• 第4引数true——指定サイズにぴったり切り抜く（一覧のカード向き）
• 第4引数false——縦横比を保って縮小（はみ出さないが高さがばらつく）

alt属性はどこから来る？

the_post_thumbnail()のalt属性には、メディアライブラリで入力した「代替テキスト」が入ります。空のままだとalt=""になります。

• 写真の内容を説明するテキストを、アップロード時に入れる運用にするのが理想
• 装飾目的の画像ならalt=""が正解（読み上げから除外される）

OGPのog:imageに使う

SNSでシェアされたときのサムネイルにもアイキャッチが使えます。

<?php
$og = is_singular() && has_post_thumbnail()
  ? get_the_post_thumbnail_url(get_the_ID(), 'large')
  : get_theme_file_uri('images/og-default.png');
?>
<meta property="og:image" content="<?php echo esc_url($og); ?>">

まとめ

1. 欄が出ないときはadd_theme_support('post-thumbnails')、カスタム投稿タイプはsupportsに'thumbnail'
2. サイズは必ず指定（'medium' 'large'など）。一覧にfullは重い
3. has_post_thumbnail()で分岐し、未設定には同じ比率の代替画像を出す
4. URLだけならget_the_post_thumbnail_url()。独自サイズはadd_image_size()（既存画像は再生成が必要）

画像は一覧の印象を大きく左右します。「無いときどうするか」まで決めておくと、運用が始まってから崩れません。