Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

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

SVG

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

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

SVG

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

INDEX

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テーマを使用している場合はフィルターが用意されているので簡単です。

\ ぜひ使って欲しい /

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

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX