wordpressで画像加工

はじめに

wordpressでは画像をアップロードするとサムネイル画像が自動生成される。
サムネイル画像が生成されるということは、画像をリサイズする関数やクラスが用意されているということ。
あまり紹介するページを見かけないが、結構便利なのでその関数やクラスを紹介する。

WP_Image_Editor クラス

wrodpressで画像を加工する場合は WP_Image_Editor クラスを使う。

WP_Image_Editor リファレンス

WP_Image_Editorの使用例

$image = wp_get_image_editor( 'cool_image.jpg' );
if ( ! is_wp_error( $image ) ) {
    $image->rotate( 90 );
    $image->resize( 300, 300, true );
    $image->save( 'new_image.jpg' );
}

WP_Image_Editorのメソッド

supports_mime_type( $mime_type )

エディターが指定されたMIMEタイプをサポートしているかどうかを確認する。

save( $destfilename = null, $mime_type = null )

画像をファイルに保存する。
$destfilename の指定がなければ既存ファイルを上書きする。

resize( $max_w, $max_h, $crop = false )

画像をリサイズする。
$crop を true にするとトリミングされる。デフォルトは false。
$crop にはトリミング位置を指定する配列を指定することも可能。
配列の指定方法について詳しくは トリミングの配列の仕様 を参照。

multi_resize( $sizes )

現在のイメージを処理し、単一のソースから複数のサイズをディスクに保存する。

使用例

$sizes_array =  array(
    // #1 - 100x100 矩形にリサイズ, はみ出した部分は切り抜く
    array ('width' => 100, 'height' => 100, 'crop' => true),
    // #2 - 横のmax 200, 縦のmax 100, 切り抜かない
    array ('width' => 200, 'height' => 100, 'crop' => false),
    // #3 - 縦 200 にリサイズ, 切り抜かない
    array ('width' => 9999, 'height' => 200, 'crop' => false),
    // #3 - 100x100 矩形にリサイズ, 左上を起点にしてはみ出した部分は切り抜く
    array ('width' => 450, 'height' => 450, 'crop' => array( 'left', 'top' ))
);

$resize = $img->multi_resize( $sizes_array );

ちなみに戻り値はリサイズされた画像たちのメタデータの配列。

crop( $src_x, $src_y, $src_w, $src_h, $dst_w = null, $dst_h = null, $src_abs = false )

画像をトリミングする。詳しくは wp_crop_image 関数 を参照。

rotate( $angle )

画像を反時計回りに $angle 度回転する。

flip( $horz, $vert )

画像を水平軸または垂直軸で反転する。

stream( $mime_type = null )

画像をブラウザにストリーミングする。

get_size()

画像の幅（width）と高さ（height）を持つ配列情報を取得する。

update_size( $width = null, $height = null )

画像サイズを設定する。

set_quality( $quality )

画像圧縮品質を1〜100％のスケールで設定する。単位の％は不要で整数（1〜100）で指定する。WP_Image_Editor クラスで定義されているデフォルトの品質は90。

get_output_format( $filename = null, $mime_type = null )

指定されたファイルの拡張子とMIME、または現在のファイルの拡張子とMIMEに基づいて、優先されるMIMEタイプと拡張子を返す。
リクエストがサポートされていない場合、デフォルトで $this->default_mime_type になる。
ファイル名が指定されている場合にのみ、修正されたファイル名を提供する。

generate_filename( $suffix = null, $dest_path = null, $extension = null )

現在のファイルに基づいて出力ファイル名を作成し、適切なサフィックスを追加する。

get_suffix()

高さと幅に基づいてファイルの適切なサフィックスを作成して返す。

make_image( $filename, $function, $arguments )

エディターの保存関数を呼び出すか、ファイルをストリームとして処理する。

get_mime_type( $extension = null )

wp_get_mime_types() からマップされた、拡張子から最初に一致したMIMEタイプを返す。

get_extension( $mime_type = null )

wp_get_mime_types() からマップされた、Mimeタイプから最初に一致した拡張子を返す。

wp_crop_image 関数

wordpressで画像のトリミングをする場合は wp_crop_image 関数が用意されている。

wp_crop_image リファレンス

書式

wp_crop_image( $src, $src_x, $src_y, $src_w, $src_h, $dst_w, $dst_h, $src_abs = false, $dst_file = false )

引数

$src

（string | int） （必須） ソースファイルまたは添付ファイルID。

$src_x

（int） （必須） 切り抜きの開始x位置。

$src_y

（int） （必須） 切り抜きの開始y位置。

$src_w

（int） （必須） トリミングする幅。

$src_h

（int） （必須） トリミングする高さ。

$dst_w

（int） （必須） 宛先の幅。

$dst_h

（int） （必須） 宛先の高さ。

$src_abs

（int） （オプション） ソースクロップポイントが絶対的な場合。 デフォルト値：false

$dst_file

（文字列） （オプション） 書き込む宛先ファイル。 デフォルト値：false

戻り値

（string | WP_Error）成功した場合は新しいファイルパス、失敗した場合はWP_Error。

add_image_size 関数

wordpressのサムネイル画像はデフォルトでは 'thumbnail'、'medium'、'large' の3つのサイズがある。

いずれも管理画面から変更できる。

この他にもサムネイル画像のサイズのバリエーションを add_image_size 関数で追加できる。

add_image_size リファレンス

書式

add_image_size( $name, $width, $height, $crop );

$crop を true にするとトリミングされる。デフォルトは false。
$crop にはトリミング位置を指定する配列を指定することも可能。
配列の指定方法について詳しくは トリミングの配列の仕様 を参照。

使用例

// 縦横比固定で縦か横の最大値が300pxになる。
add_image_size( 'fixed_ratio_thumb', 300, 300 );

// 辺が300pxの正方形の画像を生成。縦横の短い方を300pxに縮小し、長い方はセンター寄せにして300pxを超える部分をカットする。
add_image_size( 'center_crop_thumb', 300, 300, true );

// 画像の縦は上から300pxをはみ出た部分をカットする。
add_image_size( 'top_crop_thumb', 300, 300, array('center','top') );

ただし、サムネイル画像が生成されるのはアップロード時なので、
あとからこの関数でサイズを追加してもそのサイズのサムネイル画像は生成されない。
あとから追加したい場合は Regenerate Thumbnails などのプラグインで再生成する。

Regenerate Thumbnails

トリミングの配列の仕様

配列の指定方法は array( x_crop_position, y_crop_position ) で、デフォルトは array( 'center', 'center' )。
x_crop_position は left, center, right が利用でき、
y_crop_position は top, center, bottom が利用できる。