WordPressのアイキャッチ画像のサイズを追加するadd_image_size()

公開日 : 最終更新日 :

カテゴリー :

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

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

add_image_size()の仕様

add_image_size( $name, $width, $height, $crop );
引数名 説明 デフォルト 必須
$name
[string]
画像サイズの名前 なし
$width
[int]
画像の横幅
画像のピクセル数で指定
0
$height
[int]
画像の縦幅
画像のピクセル数で指定
0
$crop
[boolean
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に追加してください。

add_image_size()を使うためには、add_theme_support( ‘post-thumbnails’ )が必要になります。add_theme_support( ‘post-thumbnails’ )がないとadd_image_size()が動きません。

add_image_size()で追加したアイキャッチ画像はサイズを使うにはthe_post_thumbnail()を使って設定したアイキャッチ画像のサイズ名を指定します。

the_post_thumbnail( 'list-thumbnail' );

まとめ

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

URL

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>