[WordPress] SVGをアップロードする方法

ロゴなど画像のぼやけが感が気になりませんか？WordPressで使用するロゴを作る場合、JPGやPNGで作る場合が多いと思います。Retinaディスプレイ端末（キレイな画質の端末の事）が増えてきたので、端末によっては文字が滲んだ感じになってしまいます。そんな時はSVG画像がおすすめです。

しかし！WordPressではセキュリティー面の問題で、サポートされおらずSVGをアップロードする事ができません。拒絶されます。

WordPressでもプラグイン無しでSVGをアップロードする事が出来る設定を教えてもらいましたのでシェアします。

SVGの対応について

古いブラウザでない限り大丈夫な様です。最新情報をご確認下さい。
https://caniuse.com/

SVGの作り方

私のAdobe製品は古いので非対応です。（CS6）そこで、他の形式の画像をSVGに変換してくれるサイトを利用しました。PNGからSVGにしてもらいました。

Aconvert.com
ちなみに、CS6では2種のPNGの作成が出来ます。透過させたい時はPNG-8、背景があっても良い時はPNG-24で作ります。PNG-24の方がキレイらしいのですが、透過できないので選択出来ない場合も。CS6にはありませんが、PNG-32なら画質も良く、透過も出来るそうです。CS6では年々不便になってきましたが、サブスクが嫌いなので、まだ買い替える予定無し(笑）

function.phpへ追記する

さて、本題です。SVGをアップロードしてもエラーが出ない様にします。

皆さん子テーマをお使いだと思います。子テーマの中のfunction.phpにコードを書きます。慣れていない方はバックアップをお忘れなく。

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

.htaccessへの追記

.htaccessファイルは、子テーマ内にはありません。WordPress本体にあります。</IfModule>の上に足せば大丈夫です。

AddType image/svg+xml .svg

SVGをアップロードする

いつも画像をアップロードする時と同じです。エラーが出なくなっているはずです。

Swellで、SVGロゴを使用する場合

Swellテーマを使用している場合はフィルターが用意されているので簡単です。

あわせて読みたい

[WordPress] SWELL おすすめの初期設定あれこれ とっても使いやすいWordPressテーマ「SWELL」。記事を書く前、カスタマイズする前に済ませておきたい設定、プラグインの導入についてです。後からではなく最初に済ませ…

＼ ぜひ使って欲しい ／

高機能、驚きの使い心地
プログラミング不要で素敵なサイトが作れます

カスタマイズいろいろ

SWELL公式サイトへ