プラグインなしでWordPressの画像アップロード時にWebPを生成する

PREMIUM TRADING compatible with many FX brokers
PREMIUM TRADING is the best cashback site in the English speaking world

WordPressで画像をアップロードした時にWebP画像を生成する

今どきのWebブラウザならまず対応している軽量画像フォーマット、WebP。

サイトの高速化のためにWebPを使う機会も増えてきました。

https://trapezium-movie.com/

映画『トラペジウム』のキービジュアルもWebPですがこの画質・サイズで361KB。

WordPressプラグインのEWWW Image Optimizerなんかを使えば簡単にWebPに変換できるんですが、



別にプラグインなしでも簡単に機能を追加できるので管理人は自作関数を使うことにしました。

サーバーにcwebpがインストールされていればプラグインなしでWordPressのメディアアップロード時に勝手にWebpを作成できます。

さくらサーバーはcwebpが最初から入っているみたいですね。

Xサーバーとかも自分でwebpをアップロードすれば使えるようです。

画像アップロード時にWebPに変換するコード

以下のコードをfunctions.phpに書くと画像をアップロードした時に『画像ファイル名.webp』でWebPが作成されます。

別途関数名を付けたり、クラスに分けてもいいですが記事に掲載するには短い方がいいので匿名関数を使用。

  • アップロードした画像をWebPに変換

add_filter('wp_handle_upload', function($file) {
    $path = $file['file'];
    $editor = wp_get_image_editor($path);
    $tmpPath = $path . '_tmp';

    if ($file['type'] !== 'image/webp') {
        if (!is_wp_error($editor)) {
            $editor->save($path);
            exec(sprintf('cwebp "%1$s" -o "%1$s.webp"', $path));
        }
    }

    return $file;
});
  • 生成されるサムネイルなどの別サイズの画像をWebPに変換

add_filter('wp_generate_attachment_metadata', function ($imageMeta) {
    if (exif_imagetype($imageMeta['file']) === IMAGETYPE_WEBP) {
        return $imageMeta;
    }
    $uploadDir = wp_upload_dir();
    foreach (array_keys($imageMeta['sizes']) as $targetSize) {
        if ($targetMeta = $imageMeta['sizes'][$targetSize]) {
            exec(sprintf('cwebp "%1$s/%2$s" -resize %d %d -o "%1$s/%2$s.webp"', $uploadDir['basedir'], $targetMeta['file'], $targetMeta['width'], $targetMeta['height']));
        }
    }

    return $imageMeta;
});

あとはNginxやらApacheやらの設定で画像ファイルにアクセスされた時にWebP側を表示すればOK。

Nginx + WordPressにおいてのWebP化対応

本体の画像が削除された時にWebPも削除する

WebP画像はWordPressのメディアのアップロード・削除機能とは無関係に作られるものなので、

画像を削除してもWebPファイルは残ります。

画像削除時にWebPも削除したい場合、以下のURLのコードで削除できます。

WordPress function to delete add-on .webp files with their paired attachments

Enable Media Replaceで画像を入れ替えた時には非対応

画像入れ替えプラグインEnable Media ReplaceではWordPressの標準機能を使っていないので、

Enable Media Replaceで入れ替えた画像はWebPに変換されません。

なので画像の差し替えもfunctions.phpを使ったコードに変更しました。

WordPress関連記事



PREMIUM TRADING compatible with many FX brokers
PREMIUM TRADING is the best cashback site in the English speaking world

About site

スマートフォンで海外FX&ビットコイン取引をする方法の解説。TariTali推し。

search

Categories