avif画像をWordPressのダッシュボードからアップロード方法

サイトカスタマイズ

先日の記事では、次世代画像フォーマットの1つであるavif形式画像ファイルをFTPツールでサーバーにアップロード後に、jgp/pngからavif(or)webp形式画像ファイルを表示させる.htaccessを使っての方法でした。

AVIF形式画像とWebp形式画像の切り分け表示の.htaccess設定方法
次世代画像フォーマットのavif形式画像とWebp形式画像を.htaccessにて振り分けし対応ブラウザにてそれぞれavif形式画像なのかwebp形式画像なのか対応する形式の画像フォーマットにて表示させる方法です。

このFTPツールでアップロードし直さなければならないのが一手間かかってしまいます。

スポンサーリンク
スポンサーリンク

WordPressのダッシュボードからavif形式画像ファイルをメディア内にアップロードする方法。

以下のコードを各テーマの子テーマ内のfunction.phpに追記することで、WordPressのダッシュボードからメディアのアップロードにて、エラー表示されずにjpg画像やpng画像そして、現在ではWordPressで通常にサポートされているWebp形式画像と同じようにavif形式画像ファイルもアップロードすることができます。

※function.phpをいじる際には、必ずバックアップとってからしてください。
スポンサーリンク

avif形式画像をWordPressダッシュボードからアップロードするコードです。

add_filter('upload_mimes', function($mimes) { $mimes['avif'] = 'image/avif'; return $mimes; });
add_filter('ext2type', function($types) { $types['image'][] = 'avif'; return $types; });
add_filter('wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
$filetype = wp_check_filetype( $filename, $mimes );
return ['ext'=>$filetype['ext'], 'type'=>$filetype['type'], 'proper_filename'=>$data['proper_filename']];
}, 10, 4 );

 

上記コードを子テーマのfunctionに追加することで、WordPressのダッシュボードにおいてavif形式画像ファイルもアップロード可能になります。

また、メディアファイル内でもavif形式画像がしっかりと表示されるようになります。

他にも、以下のコードを試してみたのですが以下のコードではエラー表示が出てうまくavif形式画像をダッシュボードからアップロードできませんでした。

スポンサーリンク

失敗コード

function add_mimes($mimes) {
$mimes['avif'] = 'image/avif'; // avif形式
return $mimes;
}
add_filter('upload_mimes','add_mimes');

 

と関連付けの為のコード

add_filter('ext2type',function($types){$types['image'][]='avif';return $types;});

 

※各themeにおいて画像ファイルのアップロード後に、それぞれのサイズを自動的に作成されるものもあります。その画像ファイルのサイズ変更した自動作成機能はおそらく各themeが対応しなければできないと思います。

スポンサーリンク

アイキャッチ画像やthemeによって元画像をリサイズされた新たな画像はFTPツールで該当画像を一度ダウンロード後に、

Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.

などで1枚づつavif形式画像に変換するか、

AVIF Converter - unlimited free conversions | avif.io
Fastest converter online. Supports bulk. Privacy protected. Convert all image types to AVIF for free.🚀 Compress your images now!⏱

上記の英語サイトのAVIF Converter – unlimited free conversionsにて複数枚の画像を一括変換するか、

(上記の英語サイトでは画像ファイルに日本語が入っているとavif形式画像に変換後にzipファイルでの一括ダウンロードですと日本語部分が文字化けします。気をつけてください。
一枚づつのダウンロードでしたら文字化けはしません。)
スポンサーリンク
スポンサーリンク

XnConverterなどで複数枚のリサイズされた画像をローカルで一括変換するかしかないと思います。

その後、再度リサイズされた後のavif形式画像をサーバーにアップロードしavif形式画像から順番にWebp形式画像、jpg//png画像を表示というようになると思います。

タイトルとURLをコピーしました