WordPress｜SVG画像をアップロードできるようにする

WordPressでは通常SVGファイルをアップロードすることはできないようになっています。

アップロードしようとすると、「セキュリティ上の理由によりこのファイル形式は許可されていません」というエラー表示されます。

しかし、下記の設定でアップロードできるようにすることができます。

# wp-config.php に追記

`wp-config.php` 内の下部、「編集が必要なのはここまでです～（That’s all, stop editing～）」の上方あたりに、`define('ALLOW_UNFILTERED_UPLOADS', true);` を追記します。

これにより**すべての種類のファイルアップロードが可能**になります。

```php:wp-config.php
define('ALLOW_UNFILTERED_UPLOADS', true);

/* 編集が必要なのはここまでです ! WordPress でのパブリッシングをお楽しみください。 */
/* That’s all, stop editing! Happy blogging. */ 
```

* 参考サイト：[WordPressの「セキュリティ上の理由によりこのファイル形式は許可されません」エラーの処理方法](https://kinsta.com/jp/knowledgebase/sorry-this-file-type-is-not-permitted-for-security-reasons/)
* 参考サイト：[wp-config.phpに1行追加するだけですべての種類のファイルをアップロード可能にする方法](https://techmemo.biz/wordpress/allow-unfiltered-uploads/)

# WordPressの管理ページ－メディアライブラリで表示させる方法
WordPressへSVG形式ファイルをアップロードできるようになったものの、管理ページ上ではSVGは表示されません。複数のSVGファイルをアップした際は、ファイル名だけで判別することになりますが、それでは不便です。

下記の方法で、管理ページ上でもSVGを表示させることができました。

* 参考サイト：[メディアライブラリに SVG のサムネイルを表示させる](https://hiyoshi-it.com/show-svg-in-medialib/)

```php:functions.php
add_filter( 'upload_mimes', function ( $mimes ) {
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
});

add_filter( 'manage_media_columns', function ( $columns ) {
    echo '<style>.media-icon img[src$=".svg"]{width:100%;}</style>';
    return $columns;
});
```

使用中のテーマの `functions.php` に上記のコードを加えてください。
~~メディアライブラリの**リスト表示において**、SVGが表示されます（グリッド表示は不可）。~~

# それでもアップロードできない場合

上記のコードを`functions.php`へ加えても、アップロードができない場合は...

![img0806.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/bb8b887c-c980-2fb9-5fad-4c3ded4246b0.png)

SVGファイルをテキストエディタで開いて、

```xml:SVGファイル内
<?xml version="1.0" encoding="UTF-8"?>
```

の一行が先頭にあるかを確認してください。
この一行がないと、アップロードできませんでした。

![img080602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/9542db4c-84be-ad11-9b36-702c9fa64905.png)


# 『添付ファイルの詳細』でもSVGを表示させる方法（2022/02/20追記）

『[svg-support](https://ja.wordpress.org/plugins/svg-support/)』というWordPressプラグインがあります。
このプラグインの中に『添付ファイルの詳細』でもSVGを表示させるコードがありました。
プラグインの作者: Benbodhiさんに感謝です。

```php:svg-support/functions/attachment.php
function bodhi_svgs_response_for_svg($response, $attachment, $meta)
{
	if ($response['mime'] == 'image/svg+xml' && empty($response['sizes'])) {
		$svg_path = get_attached_file($attachment->ID);
		if (!file_exists($svg_path)) {
			// If SVG is external, use the URL instead of the path
			$svg_path = $response['url'];
		}
		$dimensions = bodhi_svgs_get_dimensions($svg_path);
		$response['sizes'] = array(
			'full' => array(
				'url' => $response['url'],
				'width' => $dimensions->width,
				'height' => $dimensions->height,
				'orientation' => $dimensions->width > $dimensions->height ? 'landscape' : 'portrait'
			)
		);
	}
	return $response;
}
add_filter('wp_prepare_attachment_for_js', 'bodhi_svgs_response_for_svg', 10, 3);

function bodhi_svgs_get_dimensions($svg)
{
	$svg = simplexml_load_file($svg);
	if ($svg === FALSE) {
		$width = '0';
		$height = '0';
	} else {
		$attributes = $svg->attributes();
		$width = (string) $attributes->width;
		$height = (string) $attributes->height;
	}
	return (object) array('width' => $width, 'height' => $height);
}
```

上記のコードをテーマの`functions.php`内に記載すると、SVGが『添付ファイルの詳細』でも表示されるようになります。

まぁ『[svg-support](https://ja.wordpress.org/plugins/svg-support/)』を導入する方が手っ取り早い気もします...