【WordPress】メディアアップローダーでSVGをアップロードする

WordPressのデフォルトのままでは、メディアアップローダーでjpgやpngのようにSVGファイルを扱えません。
というわけで、SVGファイルを扱えるようにする方法のご紹介です。

プラグインもあるようですが、ちょっとしたコードをfunctions.phpに入れるだけでOKです。

add_filter('upload_mimes','add_mime_types');
function add_mime_types($mimes){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}

svgの定義を追加してあげます。これでメディアアップローダーからアップロードすることができるようになります。

が、もともとWordPressでSVGをサポートしていないので、期待通り表示されないところもあります。投稿編集で「メディアを追加」からアップロードしたSVGファイルを選択できますが、幅・高さが1になってしまいました。一見表示されないのか？と思ってしまいますが、実際は1px x 1px の大きさで表示されています。そこで、ビジュアル編集ではなくテキスト編集から width= xxx height=xxx の部分を上書きすればOKです！

アイキャッチ画像も、SVGファイルを選択することはできるのですが、やはり画像の大きさが…
get_the_post_thumbnail なんかでアイキャッチを取得すると、大きさも1x1で取得してしまいますので、そのままimgで表示すると前述のように期待通りに表示されません。

そこで、無理やり？幅を上書きしてみました。
JavaScriptで…

jQuery(document).ready(function(){
$("img.attachment-post-thumbnail").attr("width","200");
});

あるいは、
スタイルシートで…

img.attachment-post-thumbnail{
width:200px;
}

無事表示されました。

何はともあれ、Happy SVG！