WordPressでは通常SVGファイルをアップロードすることはできないようになっています。
アップロードしようとすると、「セキュリティ上の理由によりこのファイル形式は許可されていません」というエラー表示されます。
しかし、下記の設定でアップロードできるようにすることができます。
wp-config.php に追記
wp-config.php 内の下部、「編集が必要なのはここまでです～（That’s all, stop editing～）」の上方あたりに、define('ALLOW_UNFILTERED_UPLOADS', true); を追記します。
これによりすべての種類のファイルアップロードが可能になります。
define('ALLOW_UNFILTERED_UPLOADS', true);
/* 編集が必要なのはここまでです ! WordPress でのパブリッシングをお楽しみください。 */
/* That’s all, stop editing! Happy blogging. */
- 参考サイト：WordPressの「セキュリティ上の理由によりこのファイル形式は許可されません」エラーの処理方法
- 参考サイト：wp-config.phpに1行追加するだけですべての種類のファイルをアップロード可能にする方法
WordPressの管理ページ－メディアライブラリで表示させる方法
WordPressへSVG形式ファイルをアップロードできるようになったものの、管理ページ上ではSVGは表示されません。複数のSVGファイルをアップした際は、ファイル名だけで判別することになりますが、それでは不便です。
下記の方法で、管理ページ上でもSVGを表示させることができました。
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へ加えても、アップロードができない場合は...
SVGファイルをテキストエディタで開いて、
<?xml version="1.0" encoding="UTF-8"?>
の一行が先頭にあるかを確認してください。
この一行がないと、アップロードできませんでした。
『添付ファイルの詳細』でもSVGを表示させる方法（2022/02/20追記）
『svg-support』というWordPressプラグインがあります。
このプラグインの中に『添付ファイルの詳細』でもSVGを表示させるコードがありました。
プラグインの作者: Benbodhiさんに感謝です。
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』を導入する方が手っ取り早い気もします...