続きはWEBで。

技術的なこともそうでないことも、自由気ままに書き留めていくためのサイト

メディアライブラリにアップロードする画像を自動でリサイズする方法

WordPress標準機能として、メディア設定からサムネイルや中サイズ、大サイズの値を指定してその値の画像を自動生成することはできる。フルサイズ=自分がアップロードした画像に関してはリサイズ機能はないものの、結局記事本文内で一番使うのはフルサイズ画像だったりする。
でも一枚一枚画像をリサイズするのもめんどくさいので、任意のサイズ以上のフルサイズ画像がメディアライブラリにアップロード時に自動リサイズする方法をメモ。
ちなみに、画像サイズを最適化しておくと画像の容量も必然的に減るのでPageSpeed Insights的にも良いらしい。

よく「Imsanity」というプラグインが紹介されているが、個人的にプラグインの使用は最小限に抑えたい派なので今回プラグインは一切使いません。

画像を自動リサイズしてみる

ここでは1920×1200の画像を使っていきます。

f:id:hseki_luckey:20180420234248p:plain

以下のコードをfunctions.phpのどこかに記入するだけ。
ポイントは「WP Image Editor」という画像操作用のクラスを大いに活用するところ。

function auto_resize_at_upload($file){
    $img_type = array('image/jpg', 'image/jpeg', 'image/gif', 'image/png');
    if(in_array($file['type'], $img_type)){
        $width = 600;   // 最大の幅
        $height = 600;  // 最大の高さ
        $image = wp_get_image_editor($file['file']);
        if(!is_wp_error($image)){
            $size = $image->get_size();
            // 最大の幅に合わせてリサイズ
            if($size['width'] > $width) $image->resize($width, '', false);
            // 最大の高さに合わせてリサイズ
            if($size['height'] > $height) $image->resize('', $height, false);
            // リサイズ画像を保存
            $image->save($file['file']);
        }
    }

    return $file;
}
add_action('wp_handle_upload', 'auto_resize_at_upload');

最大の幅に合わせてリサイズ

600×375でリサイズに成功。

f:id:hseki_luckey:20180421001830p:plain

最大の高さに合わせてリサイズ

960×600でリサイズに成功。

f:id:hseki_luckey:20180421001524p:plain

さいごに

画像の最適化を行うことで、PageSpeed Insightsで点数を取りやすくなります。
リサイズだけでなく画像容量の圧縮を行いたい場合は「EWWW Image Optimizer」とかがオススメです。