LoginSignup
8
10

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-04-29

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

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

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

wp-config.php に追記

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

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

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

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

WordPressの管理ページ-メディアライブラリで表示させる方法

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

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

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

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

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

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

img080602.png

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

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

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』を導入する方が手っ取り早い気もします...

8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10