WordPressの画像サイズについて、変更したい場合はございませんか?
管理画面の設定からサイズを変更することもできますが、別の方法を導入するとより多くのサイズパターンやトリミングなどを細かく設定することが可能です。
今回はアイキャッチ画像や、一覧のサムネイル画像を自在にサイズ変更・リサイズする方法を紹介していきたいと思います。
WordPressの画像をリサイズする方法
function.phpに下記コードを追加して編集するとリサイズの設定が可能です。
function add_theme_support_img(){
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // デフォルト投稿サムネイルサイズ (切り出しモード)
add_image_size( 'thumbnail-01', 幅, 高さ, false); // 追加の画像サイズ
add_image_size( 'thumbnail-02', 幅, 高さ, true); // 追加の画像サイズ
add_image_size( 'thumbnail-03', 幅, 高さ, array('left','top')); // 追加の画像サイズ
}
add_action('after_setup_theme','add_theme_support_img');
5~7行目の3種類のリサイズ設定が指定部分となります。
目的に応じて使い分けてください。
thumbnail-01~03の部分 | こちらは設定の名称となります。 画像を表示する際に指定する必要があるので、任意で名称を付けてください。 |
---|---|
幅 | 画像の横幅設定となります。 数値を入力してください。 |
高さ | 画像の縦幅設定となります。 数値を入力してください。 |
false | 縦横を同じ比率で縮小し、指定したサイズに収まるようにします。 ※比率が異なる場合は、指定したサイズの比率にはなりません。 |
true | 指定したサイズと同じ縦横比になるように画像の上下・左右を切り取り、そこから指定したサイズへ縮小します。 |
array('横位置','縦位置') | 指定した位置を基準に指定の縦横比で画像を切り取り、そこから指定してサイズへ縮小します。 |
名称を変更すれば設定はいくつも可能なので、必要なサイズを設定してくださいね。
次に表示するコードです。
テンプレートの側のループ内に記述してください。
the_post_thumbnail( 'thumbnail-01' );
('')内にご自身が指定した画像サイズ設定の名称を記載します。
function.phpと画像を出力するテンプレートをサーバーにアップしてください。
これで画像のリサイズ設定が完了です。
これからwordpressに登録される画像に関しては、指定サイズの画像が生成されるようになります。
すでにWordpressに登録済の画像をリサイズ
すでにwordpressに登録済の画像をリサイズする場合には、プラグインを利用して画像を生成する必要があります。
下記プラグインをwordpressにインストールしてください。
プラグインを有効化していただき、管理画面の【ツール > Regenerate Thumbnails】から画像を再生成すると登録済の画像も指定の画像サイズで生成されます。
WordPressの画像をリサイズする方法まとめ
WordPressの画像をリサイズする方法について紹介してきました。
これからWordpressのテンプレートをカスタマイズしたり、オリジナルのデザインを適用していくには、必ず必要となってくるテクニックなので、是非参考にしていただければと思います。