2026年5月20日

WordPressのアイキャッチ画像サイズを設定・変更する方法

メディア・画像

はじめに

WordPressのアイキャッチ画像（サムネイル）サイズはテーマで設定します。set_post_thumbnail_size() でデフォルトサイズを変更し、add_image_size() でカスタムサイズを追加できます。テーマ変更後は既存画像の再生成が必要です。

症状・原因

アイキャッチ画像が小さすぎる・大きすぎる
テーマを変えたら画像サイズが崩れた
一覧ページと詳細ページで違うサイズを使いたい
既存のアップロード済み画像を新しいサイズで再生成したい

解決手順

ステップ1：デフォルトのサムネイルサイズを変更する

// functions.php
add_action('after_setup_theme', function(): void {
    // アイキャッチ画像を有効化
    add_theme_support('post-thumbnails');

    // サムネイルのデフォルトサイズを設定
    // set_post_thumbnail_size(幅, 高さ, トリミング)
    set_post_thumbnail_size(800, 450, true);  // true = ハードクロップ（正確にこのサイズ）
    // set_post_thumbnail_size(800, 0, false); // 0 = 高さ自動（縦横比維持）
});

管理画面での設定:
設定 → メディア → 画像サイズ
  サムネイルのサイズ: 幅 150 / 高さ 150
  中サイズ:          幅 300 / 高さ 300（最大）
  大サイズ:          幅 1024 / 高さ 1024（最大）

ステップ2：カスタム画像サイズを追加する

// functions.php
add_action('after_setup_theme', function(): void {
    add_theme_support('post-thumbnails');

    // カスタムサイズを追加
    // add_image_size(名前, 幅, 高さ, トリミング)
    add_image_size('hero-image',    1920, 600,  true);  // ヒーロー画像
    add_image_size('card-thumb',    640,  360,  true);  // カード用16:9
    add_image_size('square-thumb',  400,  400,  true);  // 正方形
    add_image_size('wide-thumb',    800,  0,    false); // 横幅固定・高さ自動
});

// テンプレートでカスタムサイズを指定して表示
the_post_thumbnail('card-thumb');
// または
echo wp_get_attachment_image(get_post_thumbnail_id(), 'card-thumb');

// レスポンシブ対応（srcset自動生成）
the_post_thumbnail('card-thumb', [
    'class' => 'entry-thumbnail',
    'alt'   => esc_attr(get_the_title()),
    'loading' => 'lazy',
]);

ステップ3：既存画像を新しいサイズで再生成する

# WP-CLI で全画像を再生成
wp media regenerate --yes

# 特定のサイズのみ再生成（WP-CLI 2.5+）
# まず対象の attachment ID を確認
wp post list --post_type=attachment --format=ids | head -c 200

# 特定IDの画像のみ再生成
wp media regenerate 123 456 789

# 進捗確認しながら全件実行
wp media regenerate --yes --verbose

# 再生成が完了しているか確認
wp eval "
\$ids = get_posts(['post_type' => 'attachment', 'posts_per_page' => 5, 'fields' => 'ids']);
foreach (\$ids as \$id) {
    \$meta = wp_get_attachment_metadata(\$id);
    echo \$id . ': ' . implode(', ', array_keys(\$meta['sizes'] ?? [])) . PHP_EOL;
}
"

ステップ4：メディアライブラリに追加サイズを表示する

// functions.php — メディア挿入ダイアログにカスタムサイズを表示
add_filter('image_size_names_choose', function(array $sizes): array {
    return array_merge($sizes, [
        'hero-image'   => 'ヒーロー画像 (1920×600)',
        'card-thumb'   => 'カードサムネイル (640×360)',
        'square-thumb' => '正方形サムネイル (400×400)',
    ]);
});

ステップ5：アイキャッチ画像がない場合のフォールバック

// functions.php
function get_fallback_thumbnail_url(): string {
    return get_stylesheet_directory_uri() . '/assets/images/no-image.png';
}

// テンプレートで使用
if (has_post_thumbnail()) {
    the_post_thumbnail('card-thumb');
} else {
    echo '<img src="' . esc_url(get_fallback_thumbnail_url()) . '" alt="' . esc_attr(get_the_title()) . '" class="attachment-card-thumb size-card-thumb">';
}

注意事項

add_image_size() は after_setup_theme アクション内で呼び出してください
サイズを追加・変更した後は、既存画像の再生成（wp media regenerate --yes）が必要です。新規アップロード画像は自動で全サイズ生成されます
大量の画像がある場合、再生成には時間がかかります。WP-CLIを使うとタイムアウトの心配がありません
トリミング（第4引数 true）を使うと、指定サイズに必ずなりますが画像の一部が切れる場合があります

まとめ

アイキャッチ画像のサイズは set_post_thumbnail_size() でデフォルトを、add_image_size() でカスタムサイズを追加します。テーマ変更後や新サイズ追加後は wp media regenerate --yes で既存画像を再生成してください。

Post Views: 11