【コピペで簡単】WordPressへSVG画像をアップする方法

SVGとは画像フォーマット形式の一種として扱われています。
ベクター形式と呼ばれるもので拡大や縮小をしても劣化しないので、ロゴやアイコンなどでよく使われるようになりました。

お悩み

あれ？SVG画像を作ったから、WordPressで使おうと思ったけど

アップロードできないぞ…？

WordPressは標準状態ではSVG画像をアップロードできません。
SVGは、正確には文書形式の一種のためセキュリティーの都合上許可されていないようです。

WordPress初心者でも、記事に沿って3分で設定が完了しますので、ぜひ参考にしてください。

この記事で分かること

WordPressでSVG画像をアップできるようにする

[結論] functions.php
functions.phpへの追加方法
1. functions.phpを編集する
functions.phpに設定を追加すればSVG画像のアップは可能

[結論] functions.php

以下のコードをfunctions.phpに追加するだけです。
そのままコピペするだけでOKです！

// SVGのアップロードを許可
function add_file_types_to_uploads($file_types){
	$new_filetypes = array();
	$new_filetypes['svg'] = 'image/svg+xml';
	$file_types = array_merge($file_types, $new_filetypes);
	return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

functions.phpって何？という方は以下の記事をご覧ください。

WordPressのfunctions.phpを編集して、プラグインなしで機能追加しよう

お悩みプラグインが多くなってきて、何となく動作が重い…他にも機能追加したいけど、プラグイン以外に方法はないのかな？プラグインは便利ですが、数が多くなるとWordPressの動作が遅くなります。機能の一部しか必要ないのに、高機能プラグイン...

functions.phpへの追加方法

とても簡単なので、この記事を読みながら実際に設定してみてください。

functions.phpへの追加は今回の一度で問題ありません。一度設定してしまえば、今後はいつでもSVG画像がアップできます。

functions.phpを編集する

STEP1
「テーマファイルエディター」を開く

WordPressダッシュボードの左側メニューの「外観」⇒「テーマファイルエディター」をクリックします。

STEP2
「テーマのための関数 (functions.php)」を開く

テーマファイルの一覧から「テーマのための関数 (functions.php)」をクリックします。

STEP3
コードをfunctions.phpへコピペする
ファイルの内容へ以下のソースを追加します。
```
// SVGのアップロードを許可
function add_file_types_to_uploads($file_types){
	$new_filetypes = array();
	$new_filetypes['svg'] = 'image/svg+xml';
	$file_types = array_merge($file_types, $new_filetypes);
	return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
```
テーマによって他にもソースが書かれている場合がありますが、その際は一番後ろに追加してください。
追加したら、「ファイルを更新」ボタンをクリックして、編集内容を保存してください。