2026年7月25日

2026年7月25日

WordPressのadd_image_size()で画像サイズを追加・管理する手順

WordPressで独自の画像サイズを使うには、after_setup_theme フックの中で add_image_size() を呼んでサイズを登録し、表示側では wp_get_attachment_image() や the_post_thumbnail() にそのサイズ名を渡します。この記事では、登録の書き方と切り抜き(クロップ)の指定、エディターで選べるようにする方法、既存画像の再生成、不要なサイズの整理までを説明します。

WordPressが画像サイズを作る仕組み

画像をアップロードすると、WordPressは元画像とは別に、登録されているサイズごとの縮小版を生成して保存します。標準で用意されているのは次のサイズです。

  • thumbnail(初期値 150×150、切り抜きあり)
  • medium(初期値 300×300 以内)
  • medium_large(幅 768、高さ制限なし)
  • large(初期値 1024×1024 以内)
  • 1536x1536 と 2048x2048(高解像度ディスプレイ向け)

thumbnail・medium・large の寸法は管理画面の「設定 > メディア」で変更できます。このほか、長辺が一定以上の大きな画像は縮小版が元画像として扱われ、ファイル名に -scaled が付きます(big_image_size_threshold フィルターで調整可能)。

ここで押さえておきたいのは、サイズの生成はアップロードした時点でしか行われないことです。後からサイズを追加しても、過去の画像には自動では作られません。

ステップ1:add_image_size()でサイズを登録する

関数の形は add_image_size( $name, $width, $height, $crop ) です。テーマに依存するサイズなら子テーマの functions.php、テーマを変えても使い続けたいサイズなら独自プラグインに書きます。親テーマを直接編集すると、更新時に消えます。

<?php
add_action( 'after_setup_theme', 'mytheme_register_image_sizes' );
function mytheme_register_image_sizes() {
    // アイキャッチ画像を使えるようにする(テーマが未対応の場合)
    add_theme_support( 'post-thumbnails' );

    // 一覧カード用:幅600・高さ400に切り抜く
    add_image_size( 'mytheme-card', 600, 400, true );

    // 記事上部用:幅1200以内に縮小(高さは比率なり、切り抜かない)
    add_image_size( 'mytheme-hero', 1200, 0, false );

    // 上端を基準に切り抜く例(人物写真で頭が切れるのを防ぐ)
    add_image_size( 'mytheme-portrait', 400, 500, array( 'center', 'top' ) );
}

サイズ名にはテーマやプラグイン名の接頭辞を付けておくと、他のプラグインと名前がぶつかりません。thumbnail や medium、post-thumbnail などコアが使う名前は避けてください。

切り抜き指定の違い

第4引数 $crop の意味は次のとおりです。

  • false(初期値): 縦横比を保ったまま、指定した幅と高さの枠に収まるよう縮小します。幅か高さに 0 を指定すると、その方向は制限なしになります。
  • true: 指定サイズぴったりに、中央を基準に切り抜きます。カード一覧のように高さを揃えたいときに使います。
  • 配列: array( 横位置, 縦位置 ) で切り抜きの基準を指定します。横は left・center・right、縦は top・center・bottom です。

もう一つの注意点は、WordPressは画像を拡大しないことです。元画像が指定サイズより小さい場合、そのサイズのファイルは作られず、表示時には近い別のサイズが使われます。「設定したのに反映されない」と感じたら、元画像の寸法を確認してください。

ステップ2:テンプレートで表示する

表示には wp_get_attachment_image() を使うのが基本です。<img> タグに srcset と sizes 属性が付き、width・height 属性も出力されるため、レイアウトのずれ(CLS)を抑えられます。

<?php
// アイキャッチ画像を表示
if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'mytheme-card', array( 'class' => 'card__image' ) );
}

// 添付ファイルIDから表示
$image_id = get_post_thumbnail_id();
if ( $image_id ) {
    echo wp_get_attachment_image( $image_id, 'mytheme-hero', false, array( 'loading' => 'lazy' ) );
}

URLだけが必要な場合は wp_get_attachment_image_url( $image_id, 'mytheme-card' ) を使い、出力時は esc_url() でエスケープします。

srcset に入るのは、表示するサイズと縦横比がほぼ同じサイズだけです。ハードクロップした独自サイズは比率が異なるため、他のサイズの srcset 候補には混ざりません。高解像度画面向けに、同じ比率で倍の寸法のサイズ(例: 1200×800)も登録しておくと、選ばれる候補が増えます。

ステップ3:エディターでサイズを選べるようにする

add_image_size() で登録しただけでは、ブロックエディターの画像ブロックやメディア挿入画面のサイズ選択には出てきません。選択肢に加えるには image_size_names_choose フィルターを使います。

<?php
add_filter( 'image_size_names_choose', 'mytheme_image_size_names' );
function mytheme_image_size_names( $sizes ) {
    return array_merge( $sizes, array(
        'mytheme-card' => __( 'カード(600×400)', 'mytheme' ),
        'mytheme-hero' => __( 'ワイド(幅1200)', 'mytheme' ),
    ) );
}

テンプレートでしか使わないサイズは、選択肢に出さないほうが投稿者が迷いません。

ステップ4:既存の画像にサイズを作る

追加したサイズを過去の画像にも作るには、サムネイルの再生成を行います。WP-CLIが使えるなら次のコマンドが手早い方法です。実行前にデータベースと wp-content/uploads/ のバックアップを取ってください。

# 登録済みのサイズ一覧を確認
wp media image-size

# 足りないサイズだけを作る
wp media regenerate --only-missing --yes

# 特定のサイズだけを作り直す
wp media regenerate --image_size=mytheme-card --yes

--only-missing などを付けずに全体を再生成すると、既定では古いサイズのファイルが削除されます。外部サイトやメールから古いファイルのURLを直接参照している場合は、--skip-delete を付けて残す選択肢もあります。

WP-CLIが使えない環境では、再生成用のプラグイン(「Regenerate Thumbnails」など)を使う方法があります。プラグインの更新状況と、現在のWordPressで動作確認されているかを導入前に確かめてください(2026年10月現在)。画像が数千枚以上ある場合、ブラウザからの処理は時間がかかり、途中で止まることもあります。

不要なサイズを整理する

サイズが増えるほど、1枚のアップロードで作られるファイルも増え、ディスク容量と処理時間を消費します。使っていないサイズは登録を外すと、以後のアップロードでは作られなくなります。

<?php
// テーマやプラグインが登録したサイズを外す
add_action( 'after_setup_theme', function () {
    remove_image_size( 'unused-size-name' );
}, 20 );

// コアの高解像度サイズを作らない例(使っていない場合のみ)
add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
    unset( $sizes['1536x1536'], $sizes['2048x2048'] );
    return $sizes;
} );

remove_image_size() は、そのサイズを登録しているコードより後に実行されるよう、優先度を大きくしています。コアのサイズを止めると srcset の候補が減るため、高解像度画面での見え方を確認してから判断してください。

登録を外しても、すでに作られたファイルはサーバーに残ります。不要なファイルを消したい場合は、前述の再生成をバックアップの後に行います。

確認とトラブルの見分け方

  • 登録されているかは wp media image-size、またはPHPで wp_get_registered_image_subsizes() の戻り値を見て確認する
  • 特定の画像に作られたかは、メディアライブラリの添付ファイル詳細や wp_get_attachment_metadata( $id ) の sizes を見る
  • サイズが作られない場合は、元画像が小さすぎないか、サーバーにGDかImagickが入っているか(「ツール > サイトヘルス」の情報で確認できます)を見る

まとめ

  • add_image_size() は after_setup_theme で呼び、子テーマか独自プラグインに書く
  • $crop は false(収める)・true(中央で切り抜く)・配列(基準位置を指定)の3通り
  • 表示は wp_get_attachment_image() を使うと srcset と寸法属性が付く
  • エディターに出すには image_size_names_choose フィルターを使う
  • 既存画像にはサイズが作られないため、バックアップの後に再生成する
  • 使わないサイズは外し、ファイルの増えすぎを防ぐ

お気軽にご相談ください

お見積りへ お問い合わせへ
▲