【超簡単＆プラグインなし】WordPressでSVGを取扱う方法

WordPressでは、デフォルトでSVGのアップロードができない仕様になっている。

「このファイルタイプはセキュリティの観点から許可されていません。」というエラーメッセージが表示されてしまう人向けの記事である。

たった一行の追記のみでOK

「public_html」内にある「wp-config.php」に以下のコードを追記する。

define('ALLOW_UNFILTERED_UPLOADS', true);

このコードは、Wordpressのメディアライブラリにアップロードできるファイルの種類を全て許可するものである。 これにより、SVGもアップロードができるようになる。

メディアライブラリで表示する

アップロードしたSVGファイルをメディアライブラリで確認すると、

このようなファイルアイコンが表示されてしまい、画像のサムネイルが表示されない現象が起きる。

使用しているテーマの「functions.php」に以下のコードを追記する。

add_filter( 'manage_media_columns', function( $columns ) {
    echo '<style>.media-icon img[src$=".svg"]{width:100%;}</style>';
    return $columns;
} );

ちなみにこのコードは、リスト表示のみに対応する。

　　←グリッド表示ではなく、リスト表示を選択

あとは普通の画像と同じように、記事や固定ページに挿入することで使用できる。

ちなみに、アイキャッチ画像としてSVGを使っても、Twitterなどにシェアされた時のOGP表示には対応していないため、そこはPNGかJPEG画像を使用することをオススメする。

おいWordpress、SVG対応しろ。

SVGは、一見画像ファイルのように見えるが、実はテキストファイルである。

このことから、SVGに悪質なプログラムなどを埋め込むことができるため、Wordpressでは、セキュリティの観点から取り扱いを制限しているのだ。

しかし、拡大しても画像劣化が無く、ファイルサイズを小さく抑えることのできるSVGはとても便利だ。

セキュリティ対策が行われ、デフォルトでSVGが取り扱えるようになることを切に願う。