WordPressでデカい画像をサイズ指定と自動トリミングして反映する方法

投稿日:2022/10/14　最終更新日:2022/10/15

Table of Contents

なぜサイズ指定とトリミング？

WordPressでは基本設定で画像サイズを変更することが出来ます。

しかし、基本設定は全てのページで効いてしまうため、特定の画像に効かせるためには個別での設定が必要になってきます。

これが出来ると画像アップの際にでかめの画像をあらかじめトリミングしたりしなくてすむため、

作業効率をアップさせることが出来ます。

まずはfunctions.phpに以下を追加します。

add_image_size('任意のテキスト', 横サイズ, 縦サイズ, $crop );

add_image_size関数は新しい画像サイズをWordPressに登録する関数になります。

つまり、基本設定にあるサイズに新しいサイズを追加することになります。

第1引数の‘任意のテキスト’を記入します。

こちらは紐づけをするためのテキストですので後で使用することになります。

ただ、指定はありませんので文字列であれば何でもOKです。

第2引数は画像の横サイズを記入します。

pxのみの指定しか出来ず、0なども反映されませんので0以外の数値で入力しましょう。

第3引数は画像の縦サイズを記入します。

詳細は横サイズの説明と同じです。

第4引数は画像の切り抜きをするかどうかを設定します。

初期値はfalseで切り抜きはせず、trueにすると指定したサイズで切り抜きがされます。

また、それ以外にもarray( x_crop_position, y_crop_position )のように配列での指定をすることが出来ます。

例えば画像を切り抜きつつ、上下中央寄せにしたい場合は、、

add_image_size('sample_text', 400, 200, array(center, center));

としてあげればOKです。

画像の表示は以下のコードを追加します。

<?php echo wp_get_attachment_image(get_post_meta($post->ID, 'フィールド名', true), '任意のテキスト', , $icon, $attr); ?>

wp_get_attachment_image関数は添付ファイルがある場合はimg要素で出力をします。

つまり、画像が設定されていたら<img ~~ />で出力をしてくれるということです。

第1引数は表示したい画像のIDを指定します。

カスタムフィールドで作成する方が楽だと思いますので、私的にはget_post_meta関数で画像のフィールド名を指定して取得をしています。

第2引数は画像サイズを指定します。

ここは先ほどのadd_image_size関数で指定した ‘任意のテキスト’ を入力すればOKです。

第3引数は添付ファイルを表すメディアアイコンを使用するか銅貨を設定します。

私は使わないことが多いので基本はfalseにしています。

第4引数はimgタグの設定を追加します。

$attr = array(
　'src' => $src,　// ここは触らないと思います
　'class' => "attachment-$size",　// クラスを設定できます
　'alt' => "テキスト",　// altを設定
);

これででかめの画像を事前にトリミングせずに自動でトリミング反映することが出来るようになります。

ぜひお試しを！