add_image_size()で画像サイズをカスタマイズ

add_image_size()で画像サイズをカスタマイズ

メディア設定以外にカスタムサイズを好きなだけ追加できます。

はじめに

アイキャッチを有効にするには、テーマの基本設定で、add_theme_support( 'post-thumbnails' );を記述しておきます。

表示する場合、the_post_thumbnail();で表示できます。
このようにする事でアイキャッチがある場合のみ表示します。

<?php if ( has_post_thumbnail() ) : ?>
		<?php the_post_thumbnail(); ?>
<?php else : endif ; ?>

デフォルト画像サイズ

the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 1024px x 1024px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)

メディア設定で変更できなくする

functions.phpで同一の画像サイズの名前を指定し設定した場合、上書きされて管理画面で設定されたメディアサイズよりも優先されます。

add_image_size( 'thumbnail', 100, 100, true );
add_image_size( 'medium', 200, 200 );
add_image_size( 'large', 600, 600 );

add_image_sizeの仕様

<?php add_image_size( $name, $width, $height, $crop ); ?>
パラメータ初期値説明
$name(なし)半角英数で名前を自由につけることができます。
$width0幅を指定
$height0高さを指定
$cropfalsetureにするとクロップを行います。
リサイズ&トリミングが行われます。

利用事例

トップページの更新情報とアーカイブページで、デザインを変えたい場合などに使用します。

add_image_size( 'square', 320, 320, true );

使いたい箇所に記述

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

$crop trueの挙動

上記の例のように$croptrueにして、
横x縦が、1500×1000の画像でも、1000×1500の画像でも、短い方の辺を320pxにリサイズしてから高さを320pxにトリミングします。

投稿済みの画像にも適用したい場合

リニューアル時などに投稿済み画像を新しいメディアサイズ用にリサイズする場合、Regenerate Thumbnailsなどのプラグインが便利。

Codex