・画像サイズをカスタマイズするには？
こんな疑問にお答えします。
WordPressで画像をアップロードすると「サムネイル・中・大」サイズが自動生成されますよね。
このサイズ感を設定するには、管理画面の設定＞メディアから編集可能です。
ただ、3つ以外のサイズを作りたかったり、自分好みにカスタマイズしたい場合もあります。
実はあるコードを書けば、カスタマイズ可能。
簡単にできるよ！
ということで、この記事では「画像サイズのリサイズ・カスタマイズ方法」について解説していきます！
・画像サイズのリサイズとカスタマイズ方法
・画像サイズをリサイズやカスタマイズ時の注意点
目次
【WordPress】画像サイズのリサイズ・カスタマイズ方法【add_image_size()】
結論：画像サイズをカスタマイズするには「add_image_size()」を使います。
add_image_size()は、WordPressで画像のサイズを追加するための関数です。
これを使うことで、好みのサイズにカスタマイズできます。
functions.phpにて下記のように記述します。
add_image_size( $name, $width, $height, $crop );| $name | 画像サイズの名前。 重複しないように設定。 |
| $width | 画像の幅 |
| $height | 画像の高さ |
| $crop | リサイズ後に画像を切り取るかどうか。 真偽値（true/false）で指定。 array( ‘center’, ‘top’ )などで基点指定可能。 |
実際に使ってみるとこんな感じになります↓
add_image_size( 'original', 370, 500);幅370pxに縮小された画像が生成されます。
add_image_size( 'original', 370, 500, true );幅370px、高さ500pxにトリミングされた画像が生成されます。
<!-- 上部真ん中 -->
add_image_size( 'original', 370, 500, array( 'center', 'top' ) );
<!-- 下部真ん中 -->
add_image_size( 'original', 370, 500, array( 'center', 'bottom' ) );
<!-- 真ん中 -->
add_image_size( 'original', 370, 500, array( 'center', 'center' ) );
<!-- 左上 -->
add_image_size( 'original', 370, 500, array( 'left', 'top' ) );
<!-- 左下 -->
add_image_size( 'original', 370, 500, array( 'left', 'bottom' ) );
<!-- 左真ん中 -->
add_image_size( 'original', 370, 500, array( 'left', 'center' ) );
<!-- 右上 -->
add_image_size( 'original', 370, 500, array( 'right', 'top' ) );
<!-- 右下 -->
add_image_size( 'original', 370, 500, array( 'right', 'bottom' ) );
<!-- 右真ん中 -->
add_image_size( 'original', 370, 500, array( 'right', 'center' ) );幅370px、高さ500pxでarrayで指定した位置を基点としトリミングされた画像が生成されます。
反映方法は「the_post_thumbnail」や「wp_get_attachment_image」を使います。
<!-- アイキャッチ画像を表示 -->
<?php the_post_thumbnail( 'original' ); ?>
<!-- 画像 IDで指定 -->
<?php echo wp_get_attachment_image( 30, 'original' ) ?>（※the_post_thumbnailを使う場合はアイキャッチ画像を有効化してからお使いください！）
【簡単】アイキャッチ画像の表示・取得方法【WordPress】 【注意点】画像サイズのリサイズ・カスタマイズ方法【add_image_size()】
最後に「add_image_size()」を使う際の注意点を紹介します。
- 画像が増える
- それ以前の画像には効かない
順に見ていきましょう。
「add_image_size()」を使うことで、新たなサイズの画像を生成することになります。
つまり画像が増えるということ。
1枚アップロードすると、生成分増加します。その分サーバーの容量を圧迫するのが注意点。
そのためサイズを追加しすぎるのは、あまりオススメしません。。
ちなみに自動生成される画像は「upload」フォルダに保存されるよ！
「add_image_size()」にてサイズを追加しても、以前の画像に対しては効きません。
そのため既にアップロードした画像がトリミングされないのが注意点。
ただ対策があるので大丈夫！
「Regenerate Thumbnails」というプラグインを使えば、投稿済み画像も再生成してくれますよ。
【解説】「Regenerate Thumbnails」プラグイン使い方【WordPress】 【WordPress】画像サイズのリサイズ・カスタマイズ方法【add_image_size()】：まとめ
- 「add_image_size()」を使えばリサイズ・カスタマイズ可能
- 「the_post_thumbnail」や「wp_get_attachment_image」を使って反映
- サイズ追加するほど画像生成数が増える
- 既にアップロードした画像には効かない（プラグインを使うのが対策）
画像のカスタマイズをしたい場合は覚えておこう！
