WordPressの記事ページとかで使うアイキャッチ画像は「サムネイル」「中」「大」の設定ができます。アイキャッチ画像はサイズやトリミングの設定(サムネイルのみ)が「設定」⇒「メディア」で指定が出来たりしますが、標準で用意されているアイキャッチ画像の種類以外にも追加したいといった場合があります。そこでWordPressにアイキャッチ画像のサイズを追加する方法を紹介します。

アイキャッチ画像の種類の追加をするにはadd_image_size()を使います。add_image_size()は、以下のような関数を持っています。

add_image_size()の仕様

add_image_size( $name, $width, $height, $crop );
引数型説明デフォルト必須
$namestring画像サイズの名前なし○
$widthint画像の横幅
(画像のピクセル数で指定)		0
$heightint画像の縦幅
(画像のピクセル数で指定)		0
$cropboolean or array画像の切り抜きを行うか否かfalse

$nameは、アイキャッチ画像に追加するサイズ名を指定します。サイズ名には予約語があり以下のサイズ名以外を指定できます。$nameはadd_image_size()を使うときは必ず指定してください。

  • thumb
  • thumbnail
  • medium
  • large
  • post-thumbnail

※thumbとthumbnailは同じものでエイリアスです。

$width・$heightは、アイキャッチ画像の横幅・縦幅を指定します。幅の指定をするときはピクセル表示の数字のみ指定してください。

$cropは、アイキャッチ画像の切り抜きを行うかをbooleanの「true」 or 「false」または、切り抜く位置の配列で指定します。trueの場合は$width・$heightのサイズでアイキャッチ画像の切り抜きを行い、falseの場合は$width・$heightのサイズでリサイズのみ行います。配列で指定する場合は、array( ‘left’, ‘top’ )みたいな形でおこないます。引数の1つ目が、’left’ or ‘right’で2つ目が’top’ or ‘bottom’で指定できます。

add_image_size()の使い方

add_image_size()を使ったアイキャッチ画像のサイズ追加は以下の通りです。このコードを使用しているWordPressテーマのfunctions.phpに追加してください。

functions.php
function add_thumbnail_size() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'list-thumbnail', 320, 240, true );
    add_image_size( 'single-thumbnail', 720, 480, false );
}

add_action( 'after_setup_theme', 'add_thumbnail_size' );

まとめ

add_image_size()を使ったアイキャッチ画像のサイズを追加は、テーマをカスタマイズしていく上で厄介になりがちな画像のサイズ調整に役にたちます。特にスマホページなんかでPC向けの大きい画像を小さくして帯域を圧縮したりするのに有効です。