WordPress のアイキャッチ画像を使用して、表示箇所 （個別記事、固定ページなど） に応じて、画像サイズの異なるサムネイルを表示させる方法。

◆導入方法（基本的な使い方）

１．テーマの functions.php ファイルに下記のコードを追加。

[PHP]add_theme_support( ‘post-thumbnails’ );[/PHP]

２．次にサムネイルの大きさを設定するため、下記のコードを追加する。

[PHP]set_post_thumbnail_size( $width, $height, $crop_flag );[/PHP]

• width : 画像の幅
• height : 画像の高さ
• crop_flag : 切り抜きモードの指定。「true」を指定すると、設定した縦横比で切り抜かれ、画像サイズの大きさに合わせて縮小される。
  「指定なし（記入なし）」の場合は、リサイズモードになり、設定した縦横比と異なる画像を縮小した時に、サムネイルの幅高さどちらかのサイズに足りなくなる。

[PHP]set_post_thumbnail_size( 100, 100, true ); // 切り抜き[/PHP]

[PHP]set_post_thumbnail_size( 100, 100 ); // リサイズ[/PHP]

 

 

 

 

３．サムネイルを表示したいテンプレートのループ内に下記のコードを記入。

[PHP]<?php the_post_thumbnail(array(100,100)); ?>[/PHP]

 

４．サムネイルが無い場合に表示される画像ファイルを指定する場合。
サムネイルが無い場合に表示される画像ファイル( no_image.jpg )を テーマの「images フォルダ」 にアップロードしておく。画像ファイルは上記で指定したサイズ（100 x 100）で用意する。
※サムネイルの無い場合に表示される画像ファイル名は、必要に応じて適宜変更してください。

サムネイルを表示したいテンプレートのループ内に下記のコードを記入。
※サムネイルは左寄せになっているので、必要のない場合は削除してください。

[PHP]<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail(array(100,100), array(‘class’ => ‘alignleft’)); ?>
<?php else : ?>
<img src=”<?php bloginfo(‘template_url’) ?>/images/no_image.jpg” alt=”no_image” />
<?php endif; ?>[/PHP]

 

◆複数サイズのサムネイルを表示

１．テーマの functions.php ファイルに下記のコードを追加。

[PHP]add_image_size( $handle, $width, $height, {$hard_crop_switch} ) [/PHP]

• handle : ハンドル（サムネイル画像サイズの名前）
• width : 画像の幅
• height : 画像の高さ
• hard_crop_switch : 切り抜きモードの指定。

[PHP]set_post_thumbnail_size( 100, 100, true ); // 通常のサムネイル
add_image_size( ‘medium_thumbnail’, 150, 150, true ); // 個別記事、固定ページでのサムネイル[/PHP]

２．サムネイルを表示したいテンプレートのループ内に下記のコードを記入。

[PHP]<?php the_post_thumbnail( ‘medium_thumbnail’ ); ?>[/PHP]

 

※既存の画像（アップロード済み画像）についてはサムネイルは作成されないので注意。
サムネイルを再生成する必要がある場合は、「 Regenerate Thumbnails （Viper007Bond） 」プラグインを使用するといいようだ。