WordPressで画像サイズを 指定する方法

WordPressで画像をアップロードすると、テーマのデザインや用途に応じて、サムネイル・中サイズ・大サイズなどの複数のサイズを自動生成してくれます。ただし、独自のレイアウトや複数のバリエーションが必要な場合には、テーマごとに追加の画像サイズを指定することもできます。

この記事では、WordPressの「メディア設定」を使った基本的なサイズ変更方法から、functions.phpでコードを追加して独自サイズを登録する方法、そして実際に記事（投稿）やテンプレートで画像を表示・取得する方法をまとめています。

メディア設定での基本サイズ変更

WordPressでは標準機能として、サムネイル、中サイズ、大サイズの3種類の画像サイズをカスタマイズできます。

1.管理画面にログイン

左メニューの「設定」から「メディア」をクリックします。

２.各サイズを設定

• サムネイルサイズ
• 中サイズ
• 大サイズ

ここで指定する数値を変更することで、アップロードされた画像を自動的にリサイズして生成してくれます。

補足：画像サイズを変更した後の注意点

すでにアップロード済みの画像には、新しいサイズは自動適用されません。過去にアップロードした画像でも新しいサイズを適用したい場合は、「Regenerate Thumbnails」などのプラグインを利用して、サムネイルを再生成する必要があります。

参考記事：WordPressのサムネイル画像を再生成するプラグイン

独自の画像サイズを追加する方法

サムネイル・中サイズ・大サイズの3つだけでは足りない場合や、サイト独自のレイアウトに応じた画像サイズが必要な場合は、テーマのfunctions.phpに独自サイズを設定するコードを追加することができます。

add_image_size('●●', 300, 200, true);

• ●● は任意の名前です。たとえば、banner や square-thumb のように、何の用途か分かる名前を付けると便利です。
• 300 は横幅、200 は縦幅をピクセルで指定します。
• 第4引数（ここでは true）は、切り抜き方法の設定です。
• true ：画像を指定サイズに強制的にトリミング（ハードクロップ）。
• false：縦横比を維持しながら指定幅・高さに合わせる（ソフトクロップ）。

functions.php に書くとき

<?php
// テーマの functions.php
function mytheme_setup() {
  add_image_size('banner', 1200, 400, true);
  add_image_size('square-thumb', 500, 500, true);
}
add_action('after_setup_theme', 'mytheme_setup');

独自サイズの画像を表示する方法

the_post_thumbnail() を使う場合

the_post_thumbnail( '●●' ); で、記事（投稿）のアイキャッチ画像を指定した独自サイズで表示できます。

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

ここでの●●には、先ほど add_image_size で登録した名前を入れます。たとえば banner や square-thumb など、自分が設定した任意の名称を指定してください。

画像のパスを取得する方法

アイキャッチ画像のURLだけを取得して、HTMLタグを自作したい場合などに使える方法をご紹介します。

単体でパスを取得する例

<?php
$attach_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($attach_id, '●●');
?>
<img src="<?php echo esc_url($image[0]); ?>" alt="<?php get_the_title(); ?>">

• get_post_thumbnail_id($post->ID)
  指定した投稿（この記事の場合は $post->ID）のアイキャッチ画像のIDを取得。
• wp_get_attachment_image_src( $attach_id, '●●' )
  第2引数で呼び出すサイズを指定。上記の add_image_size で登録した独自サイズ名や、thumbnail / medium / large / full などを指定できます。

ループ（while）内で使う例

<?php
if(have_posts()):
  while(have_posts()):
    the_post();
    $thumbnail_id = get_post_thumbnail_id($post->ID);
    $image = wp_get_attachment_image_src($thumbnail_id, '●●'); 
?>
    <img src="<?php echo esc_url($image[0]); ?>" alt="<?php the_title(); ?>" />
<?php
  endwhile;
endif;
?>

ここでも、'●●' には登録済みのサイズ名を指定します。

まとめ

WordPressでの画像サイズ指定には、大きく分けて下記の2通りがあります。

標準機能の「メディア設定」を使う

• サムネイル・中・大サイズを変更するだけなら十分。
• すでにアップロード済みの画像を新サイズに適用する場合は、サムネイル再生成プラグインが必要。

functions.php で add_image_size を使って独自サイズを追加する

• オリジナルテンプレートや特別なレイアウトが必要な場合に便利。
• 登録したサイズは the_post_thumbnail('●●') や wp_get_attachment_image_src($id, '●●') で呼び出せる。

2020年3月10日当時から、この方法はWordPressのテーマ開発においてスタンダードな手法として広く使われています。2024年現在も、ほとんどのバージョンで同じように有効な方法です。ただし、テーマによってはブロックエディター（Gutenberg）対応のために追加の処理や、functions.php に記述する優先度が異なる場合もあります。また、FSE（フルサイトエディティング）のテーマではカスタマイズが変化する可能性もあるため、最新のWordPress公式ドキュメントを参照すると安心です。

カスタム画像サイズを正しく設定・表示することで、適切なサイズの画像を効率的に使用できるようになり、表示パフォーマンスとデザインの両面でメリットがあります。ぜひこれらの方法を活用して、サイトをより魅力的かつ最適な形に仕上げてください。