2026年5月20日

WordPressにカスタム画像サイズを追加する方法

メディア・画像

はじめに

WordPressの add_image_size() を使うと、テーマ専用のカスタム画像サイズを追加できます。ヒーロー画像・カードサムネイル・OGP画像など、用途に応じた最適サイズを定義することで、表示品質とパフォーマンスを両立できます。

症状・原因

デフォルトの画像サイズ（サムネイル・中・大）では用途に合わない
画像が引き伸ばされたり、余白が出たりする
OGP用に1200×630のサイズが必要
カスタムサイズを追加したが画像に反映されない

解決手順

ステップ1：`add_image_size()` の基本を理解する

// add_image_size(スラッグ, 幅px, 高さpx, トリミング)

// ハードクロップ（true）: 必ずこのサイズ。比率が違う場合は切り抜き
add_image_size('og-image', 1200, 630, true);

// ソフトクロップ（false）: 縦横比を維持。指定値を超えない最大サイズ
add_image_size('content-wide', 1200, 0, false);  // 高さ0 = 制限なし

// クロップ位置を指定（配列で指定）
// left/center/right × top/center/bottom
add_image_size('hero-face', 400, 400, ['center', 'top']); // 顔が上にある画像向け

ステップ2：子テーマの `functions.php` に追加する

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

    // OGP・SNSシェア用
    add_image_size('og-image',      1200, 630,  true);

    // ヒーロー・フルワイド
    add_image_size('hero-full',     1920, 600,  true);

    // 記事一覧カード
    add_image_size('card-16-9',     640,  360,  true);
    add_image_size('card-square',   400,  400,  true);

    // サイドバーウィジェット
    add_image_size('sidebar-thumb', 300,  200,  true);

    // コンテンツ幅（縦横比維持）
    add_image_size('content-wide',  800,  0,    false);
});

ステップ3：テンプレートで使用する

// アイキャッチ画像として表示
the_post_thumbnail('card-16-9');

// attachment IDから表示
$thumb_id = get_post_thumbnail_id();
echo wp_get_attachment_image($thumb_id, 'card-16-9', false, [
    'class'   => 'card-image',
    'loading' => 'lazy',
    'alt'     => esc_attr(get_the_title()),
]);

// 画像URLのみ取得
$image_data = wp_get_attachment_image_src($thumb_id, 'og-image');
if ($image_data) {
    [$url, $width, $height] = $image_data;
    // OGタグ用に使用
    echo '<meta property="og:image" content="' . esc_url($url) . '">';
}

// レスポンシブ srcset 付きで取得
$srcset = wp_get_attachment_image_srcset($thumb_id, 'content-wide');

ステップ4：不要なサイズを削除してサーバー容量を節約する

// functions.php — デフォルトサイズを無効化
add_filter('intermediate_image_sizes_advanced', function(array $sizes): array {
    // 使用しないサイズを削除
    unset($sizes['medium_large']);  // 768px幅（不要な場合）
    unset($sizes['1536x1536']);     // Gutenberg追加サイズ
    unset($sizes['2048x2048']);     // Gutenberg追加サイズ

    return $sizes;
});

# 現在登録されているサイズを確認
wp eval "
global \$_wp_additional_image_sizes;
print_r(get_intermediate_image_sizes());
echo PHP_EOL;
print_r(\$_wp_additional_image_sizes);
"

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

# 全画像を再生成（サイズ追加後に必須）
wp media regenerate --yes

# 特定の投稿IDの画像のみ
wp media regenerate 42 --yes

# 大量の場合はバッチ実行（メモリ節約）
wp post list --post_type=attachment --format=ids \
    | xargs -n 50 wp media regenerate --yes

注意事項

add_image_size() は after_setup_theme 内で使用してください
新しいサイズを追加しても既存のアップロード済み画像には自動適用されません。wp media regenerate が必要です
多くのサイズを登録すると、画像アップロード時の処理時間とサーバー容量が増加します。本当に必要なサイズのみ登録してください
ハードクロップ（true）は元画像より小さいサイズにのみ有効です

まとめ

add_image_size() でスラッグ・幅・高さ・クロップ方法を指定してカスタムサイズを追加し、the_post_thumbnail('スラッグ') または wp_get_attachment_image() で使用します。追加後は wp media regenerate --yes を忘れずに実行してください。

Post Views: 12