WordPressでSVG画像をアップロードする【SWELL可】

当ページのリンクには広告が含まれています。
プログラミング初心者

SVG画像をアップロードしようとすると「このファイルタイプをアップロードする権限がありません。」と表示されます。アップロードする方法があれば教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • WordPressがSVG画像に対応していない理由が分かる
  • アップロードを可能にするコードが分かる(手に入る)
  • アップロードを可能にするプラグインが分かる

是非、最後まで読んでみて下さい。

本記事の内容

WordPressでSVG画像をアップロードする【SWELL可】

WordPressはSVG形式の画像に対応していない

SVGはテキストファイルのため悪意のあるコードを埋め込まれている可能性があるためです。

SVG画像をアップロードする際の注意点としては、

  • 悪意のあるコードが埋め込まれていないか確認する
  • アップロードできるのは管理者または信頼できる者だけにする

これでセキュリティ向上が期待できます。

functions.phpにコードを書いてSVG画像をアップロードする

管理画面メニューから、「メディア」を選択します。

SVG画像をメディアにドラッグ&ドロップします。

「このファイルタイプをアップロードする権限がありません。」と表示されます。

セキュリティ上の理由からアップロードできないようになっています。

では、アップロードを許可するコードを書きます。

管理画面メニューから、「外観」>「テーマファイルエディター」を選択します。

テーマを編集から、「テーマのための関数(functions.php)」を選択します。

以下のコードをfunctions.phpにコピペします。


function add_svg_file_types_to_uploads($file_types) {
	if ( ! isset($file_types['svg']) ) {
		$file_types['svg'] = 'image/svg+xml';
	}
	return $file_types;
}
add_filter('upload_mimes', 'add_svg_file_types_to_uploads');

再度、メディアにSVG画像をドラッグ&ドロップするとSVG画像がアップロードされます。

SVG画像をクリックして「添付ファイルの詳細」を開きます。

  • ファイルタイプ:image/svg+xmlとなっています。

プラグインを入れてSVG画像をアップロードする

管理画面メニューから、「プラグイン」>「新規プラグインを追加」を選択します。

「プラグインの検索…」に以下をコピペします。

Safe SVG

Safe SVGを「今すぐインストール」>「有効化」します。

特に設定はなく有効化するだけでSVG画像をアップロードできます。

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容