ロゴなど画像のぼやけが感が気になりませんか?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テーマを使用している場合はフィルターが用意されているので簡単です。
コメント ※ハンドルネームでお願いします