WordPress, 未対応のSVG, Webp画像ファイルをアップロードできるようにする

WordPressは画像ファイルのフォーマット、SVG, Webpに対応していません。でもかんたんな方法でアップロードできます。メディアのライブラリにも表示されます。

どんな画像フォーマットでも追加する方法は同じなのが良いところ。

ただし、若干の課題は残りますが。

一番簡単にする方法はプラグインをインストールすることですが、今回は自力で行います。自分でやってみると意外と簡単にできるのでプラグインをあまり使いたくない人におすすめ。

サンプルコード

いきなりですが、コードからお見せします。これをテーマやプラグインのルートphpファイルから読み込まれるようにしてください。

（テーマはfunctions.php。プラグインは (plugin_name).php。）

add_filter( 'ext2type', function( $ext2types ) {
	array_push( $ext2types, [ 'image' => [ 'svg', 'svgz', 'webp' ] ] );
	return $ext2types;
} );

add_filter( 'upload_mimes', function( $mimes ) {
	$mimes[ 'svg' ]  = 'image/svg+xml';
	$mimes[ 'svgz' ] = 'image/svg+xml';
	$mimes[ 'webp' ] = 'image/webp';

	return $mimes;
} );

add_filter( 'getimagesize_mimes_to_exts', function( $mime_to_ext ) {
	$mime_to_ext[ 'image/svg+xml' ] = 'svg';
	$mime_to_ext[ 'image/webp' ] = 'webp';
	return $mime_to_ext;
} );

これだけなので、このまま終わっても良いんですが、ちょっと説明を加えます。

【拡張子の追加】ext2typeフックのadd_filter

add_filter( 'ext2type', function( $ext2types ) {
	array_push( $ext2types, [ 'image' => [ 'svg', 'svgz', 'webp' ] ] );
	return $ext2types;
} );

最初の処理は、拡張子の追加です。画像に追加するので 'image' の配列に追加します。

WordPressではデフォルトでいくつかの拡張子が設定されているので、それに追加する処理。

元の処理は wp_get_ext_types() に書いてあります。中身を見ると、画像だけでなくいろいろな拡張子を追加できそうな気がします。

（確認してないので『気がする』と言ったができるはず。）

【アップロードの許可】upload_mimesフックのadd_filter

add_filter( 'upload_mimes', function( $mimes ) {
	$mimes[ 'svg' ]  = 'image/svg+xml';
	$mimes[ 'svgz' ] = 'image/svg+xml';
	$mimes[ 'webp' ] = 'image/webp';

	return $mimes;
} );

upload_mimesフックのフィルターは、アップロードに対応するファイルのMIME-Typeを変更します。ここではSVG, Webpの画像ファイルを追加しました。

フック名だけ見れば、許可するとかありませんが、get_allowed_mime_types() で実行されるので、MIME-Typeの許可のために使います。

MIME-Typeリストは、wp_get_mime_types() のmime_typesフックのフィルターで定義されているので、『そこで追加すりゃいいんじゃないの？』と思いますが、WordPress.orgの公式リファレンスでは、upload_mimesフックを使っているのでそれに習いました。

リファレンスでは、メディアでないjsonやdoc（Microsoft Word）を追加するサンプルもあります。

（やっぱりなんでも追加できる。）

【拡張子とMIME-Typeのマッピング】getimagesize_mimes_to_extsフックのadd_filter

add_filter( 'getimagesize_mimes_to_exts', function( $mime_to_ext ) {
	$mime_to_ext[ 'image/svg+xml' ] = 'svg';
	$mime_to_ext[ 'image/webp' ] = 'webp';
	return $mime_to_ext;
} );

'getimagesize' とあるので画像サイズを取っているように見えますが、実際は、拡張子とMIME-Typeのマッピングリスト（対応リスト）を取得しているだけのものです。

wp_check_filetype_and_ext()だけで使われています。

このマッピングリストは、この関数の中で固定値になっているので追加しないといけません。

$mime_to_ext = apply_filters(
    'getimagesize_mimes_to_exts',
    array(
        'image/jpeg' => 'jpg',
        'image/png'  => 'png',
        'image/gif'  => 'gif',
        'image/bmp'  => 'bmp',
        'image/tiff' => 'tif',
    )
);

【問題点】機能とデータの不足。

このままだと、まだ足りないところがあります。まずはデータ不足。イメージのメタデータがありません。

attachment_metadataには、画像のサイズ、アップロードファイル名があります。

また、WordPressは画像をアップロードすると、サイズごとのファイルを作成します。thumbnail, midium, largeなど。

この情報も入ってます。

画像メタがないと何が悪いのか？

画像メタがないと、『添付ファイルの詳細』画面（メディアライブラリで画像をクリックすると出る）の機能が制限されます。

まず、画像のキャプチャがファイルアイコンになり上手く表示されません。また、画像の回転などの編集もできません。

ただ編集に関しては、SVGファイルは中身がxmlなのでそれでもいいですし、編集機能をどう組み立てるかはカスタマイズのレベルがグッと上がるので、とりあえず機能しないと割り切ってもいいです。

画像取得関数でフルサイズしか取れない

WordPressにはいろんな画像取得関数がありますが、パラメータにサイズを指定します。このサイズ指定が効きません。

最悪、指定画像なしが返ってくることも。

画像遅延読み込み（Lazy-Loading）が効かない

WordPressは、画像や動画などの遅延読み込みがデフォルトになりました。

HTMLの<img>, <iframe>にwidth, height属性が必須なのですが、このサイズ属性が追加されません。

ですが、エディタの画像サイズを変えることで対応することはできます。

画像メタがないとけっこうな制限があるのでこれも実装したほうがいいですね？ 調べて上手くいったらご紹介します。