![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
SVG画像をアップロードしようとすると「このファイルタイプをアップロードする権限がありません。」と表示されます。アップロードする方法があれば教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- WordPressがSVG画像に対応していない理由が分かる
- アップロードを可能にするコードが分かる(手に入る)
- アップロードを可能にするプラグインが分かる
是非、最後までご覧ください。
本記事の内容
WordPressでSVG画像をアップロードする【SWELL可】
WordPressはSVG形式の画像に対応していない
SVGはテキストファイルのため悪意のあるコードを埋め込まれている可能性があるためです。
SVG画像をアップロードする際の注意点としては、
- 悪意のあるコードが埋め込まれていないか確認する
- アップロードできるのは管理者または信頼できる者だけにする
これでセキュリティ向上が期待できます。
functions.phpにコードを書いてSVG画像をアップロードする
管理画面メニューから、「メディア」を選択します。
![](https://hrdyuic.com/wp-content/uploads/0d4f927d6e136092e5e540b426dda9c7.jpg)
![](https://hrdyuic.com/wp-content/uploads/0d4f927d6e136092e5e540b426dda9c7.jpg)
SVG画像をメディアにドラッグ&ドロップします。
![](https://hrdyuic.com/wp-content/uploads/2cad327ac622550eda65315d6fe00210.jpg)
![](https://hrdyuic.com/wp-content/uploads/2cad327ac622550eda65315d6fe00210.jpg)
「このファイルタイプをアップロードする権限がありません。」と表示されます。
セキュリティ上の理由からアップロードできないようになっています。
![](https://hrdyuic.com/wp-content/uploads/f0e73e4c203276e391ad599fb11bae81.jpg)
![](https://hrdyuic.com/wp-content/uploads/f0e73e4c203276e391ad599fb11bae81.jpg)
では、アップロードを許可するコードを書きます。
管理画面メニューから、「外観」>「テーマファイルエディター」を選択します。
![](https://hrdyuic.com/wp-content/uploads/91382340f6d715f5b62138b86ac2f827.jpg)
![](https://hrdyuic.com/wp-content/uploads/91382340f6d715f5b62138b86ac2f827.jpg)
テーマを編集から、「テーマのための関数(functions.php)」を選択します。
![](https://hrdyuic.com/wp-content/uploads/90120c5ab11e3c34264a6ee53fd7b7fa.jpg)
![](https://hrdyuic.com/wp-content/uploads/90120c5ab11e3c34264a6ee53fd7b7fa.jpg)
以下のコードを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');
![](https://hrdyuic.com/wp-content/uploads/9835a9ec57ef05dc4aeb743f1f7dc202.jpg)
![](https://hrdyuic.com/wp-content/uploads/9835a9ec57ef05dc4aeb743f1f7dc202.jpg)
再度、メディアにSVG画像をドラッグ&ドロップするとSVG画像がアップロードされます。
![](https://hrdyuic.com/wp-content/uploads/6391946c82efcec867e0d22188447337.jpg)
![](https://hrdyuic.com/wp-content/uploads/6391946c82efcec867e0d22188447337.jpg)
SVG画像をクリックして「添付ファイルの詳細」を開きます。
- ファイルタイプ:
image/svg+xml
となっています。
![](https://hrdyuic.com/wp-content/uploads/6f921fd39f4f2d557f681eeb6405fb6f.jpg)
![](https://hrdyuic.com/wp-content/uploads/6f921fd39f4f2d557f681eeb6405fb6f.jpg)
プラグインを入れてSVG画像をアップロードする
管理画面メニューから、「プラグイン」>「新規プラグインを追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/375244c8003fde9a26d86295ed47427d.jpg)
![](https://hrdyuic.com/wp-content/uploads/375244c8003fde9a26d86295ed47427d.jpg)
「プラグインの検索…」に以下をコピペします。
![](https://hrdyuic.com/wp-content/uploads/6ab7bdf05358ea6c6910a550121c7f8d.jpg)
![](https://hrdyuic.com/wp-content/uploads/6ab7bdf05358ea6c6910a550121c7f8d.jpg)
Safe SVGを「今すぐインストール」>「有効化」します。
特に設定はなく有効化するだけでSVG画像をアップロードできます。
![](https://hrdyuic.com/wp-content/uploads/e20e5d9713f782d33ee7037d5a5a58e4.jpg)
![](https://hrdyuic.com/wp-content/uploads/e20e5d9713f782d33ee7037d5a5a58e4.jpg)
今回は以上です。