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;
} );よくテーマのfunctions.phpにコードを挿入する説明が見られますが、よくありません。テーマは本来機能を入れるものではないので。
本来やるべきではありませんが、テーマに入れる場面ではfunctions.phpにいろいろな処理を入れると、数百行、へたすると千単位にもわたる縦長のソースコードになってしまいます。
その記述はプログラマの書くものではありません。機能、役割ごとにファイルを分割するのがプログラミングの基本中の基本。
functions.phpは、requireを使って各機能のphpファイルをロードする親ファイルに徹してください。
これだけなので、このまま終わっても良いんですが、ちょっと説明を加えます。
【拡張子の追加】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）を追加するサンプルもあります。
（やっぱりなんでも追加できる。）
WordPress.org公式リファレンス
【拡張子と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',
)
);【問題点】機能とデータの不足。
このままだと、まだ足りないところがあります。まずはデータ不足。イメージのメタデータがありません。
| テーブル | (wp)_postmeta |
| meta_key （カラム） | _wp_attachment_metadata |
attachment_metadataには、画像のサイズ、アップロードファイル名があります。
また、WordPressは画像をアップロードすると、サイズごとのファイルを作成します。thumbnail, midium, largeなど。
この情報も入ってます。
画像メタがないと何が悪いのか？
画像メタがないと、『添付ファイルの詳細』画面（メディアライブラリで画像をクリックすると出る）の機能が制限されます。
まず、画像のキャプチャがファイルアイコンになり上手く表示されません。また、画像の回転などの編集もできません。
ただ編集に関しては、SVGファイルは中身がxmlなのでそれでもいいですし、編集機能をどう組み立てるかはカスタマイズのレベルがグッと上がるので、とりあえず機能しないと割り切ってもいいです。
svgファイルとwebpファイルをテキストエディタで開くと違いが分かります。
svgは人間が読めますがwebpは読めません。
webpはpngなどと同じでラスター画像です。小さい点の集まりで表現する方法でテレビやモニターと同じ。拡大すると点が大きくなってモザイクに見えボヤけるのが特長。
対してsvgはベクター画像の一種です。これは点を線で結んで表現する方法で、色鉛筆で書いていくイメージ。
高度な数式を使っているのが特長。またベクターは、拡大・縮小してもボヤけない性質があります。
（もともと線なので常にくっきりと表現できる。）
画像取得関数でフルサイズしか取れない
WordPressにはいろんな画像取得関数がありますが、パラメータにサイズを指定します。このサイズ指定が効きません。
最悪、指定画像なしが返ってくることも。
画像遅延読み込み（Lazy-Loading）が効かない
WordPressは、画像や動画などの遅延読み込みがデフォルトになりました。
HTMLの<img>, <iframe>にwidth, height属性が必須なのですが、このサイズ属性が追加されません。
ですが、エディタの画像サイズを変えることで対応することはできます。
画像メタがないとけっこうな制限があるのでこれも実装したほうがいいですね？ 調べて上手くいったらご紹介します。
