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

SVG

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

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

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をアップロードする

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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください