画像のサイズを追加する

たとえば記事一覧では大きなアイキャッチ画像を、サイドバーの新着記事一覧では小さなアイキャッチ画像を表示したいということはよくあります。

メディアアップローダを使って画像をアップロードすると、WordPressは自動的に'thumbnail'、'medium'、'large'の3つのサイズのサムネイルを自動生成します。適当なサイズがあるのならこの中から選んでも良いでしょう。

適当なサイズが見つからない場合は、add_image_size()関数を使ってサイズを追加することができます。

function twpp_setup_theme() {
  add_theme_support( 'post-thumbnails' );
  add_image_size( 'small-thumb', 50, 50, true );
}

add_action( 'after_setup_theme', 'twpp_setup_theme' );

第1引数にサイズの名前を、第2引数と第3引数で幅と高さを指定します。

第4引数の$cropは画像の切り取られ方を指定する引数です。詳しくはこのライブラリを参照してください。

追加したサイズの画像を出力する

追加したサイズのアイキャッチ画像を表示するときは、the_post_thumbnail()にサイズの名前を渡します。

<?php the_post_thumbnail( 'small-thumb' ); ?>

引数に何も渡さない場合は、'post_thumbnail'が使われます。

アイキャッチ画像でない画像ファイルのサムネイルが必要なときは、wp_get_attachment_image()を使います。

<?php echo wp_get_attachment_image( 20, 'small-thumb' ) ?>

第1引数に画像のIDを、第2引数にサイズの名前を渡します。この関数は<img>タグを文字列として返しますので、echoすれば画像を表示することができます。

画像サイズを追加するときの注意

画像サイズを追加すると、追加したサイズ分の画像が増えることになります。これはアイキャッチ画像である、ないにかかわらず、メディアアップローダで画像をアップロードするたびに生成されます。

1枚1枚の容量はそれほど大きくないかもしれませんが、数が増えるとサーバの容量を圧迫しますので、追加のし過ぎには注意してください。

なお、画像はサーバのuploadフォルダにサイズを付記したファイル名で保存されます。