「Additional image sizes」はWordpressでメディア(画像)を追加した時に自動で作成されるサムネイル画像のサイズを追加できるプラグインだ。
レスポンシブデザインで設計する場合等、画面サイズによって必要な画像サイズは異なってくる。
読み込み速度を早めるためにも最小画像サイズで読み込みたい訳だが、そうなってくるとサイズバリエーションも増えてくる。
さて、ご存知のようにサムネイル画像のサイズを変更させたいというだけであれば、
設定>メディアで下記のように任意の画像サイズを指定できる。
が、バリエーションは
- サムネイル
- 中サイズ
- 大サイズ
の3つのみとなっている。
サムネイル画像サイズを増やすには
もちろんPHPを編集する事で、バリエーションを増やすことができるわけだが、
「PHPはよくわからない」
「手っ取り早く追加させたい」
という場合にはプラグインを使わない手はない。
そこで登場するのが、「Additional image sizes」だ。
「Additional image sizes」の使い方
プラグインをインストールし、有効化すると「メディア」に「Additional image sizes」が追加される。
以下が編集画面だ。
上の画面は、「topthum」というW400×H265の新たなサイズを追加した後の画面だ。
NEW:に任意の名前を入力してサイズを追加していくことができる。
Cropにチェックを入れれば、指定の画像サイズにトリミングされる。
追加したサムネイル画像をループ内で読み込む
追加された画像は命名した名前を使ってループ内で読み込むことができる。
下は先ほど登録した「topthum」というサムネイル画像をループ内に読む込む際のコードだ。
<?php the_post_thumbnail('topthum'); ?>