[WordPress] svgファイルをアップロードしたい（WPバージョン6.2以降対応）

公開日:2024/03/07

WordPressでは、セキュリティの観点からメディアライブラリにアップロードできるファイルに制限があります。svgファイルもその制限対象の一つになりますが、アイコン画像としてsvg形式のファイルを使用したいというケースがあります。
本記事では、svgファイルをメディアライブラリにアップロードするための方法を解説します。

手順①「wp-config.php」の修正

define('ALLOW_UNFILTERED_UPLOADS', true);

ファイルタイプによる制限をなくすオプションを有効にします。
この一文を

～

define('ALLOW_UNFILTERED_UPLOADS', true);

/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */

～

「編集が必要なのはここまでです」の上あたりに挿入します。

手順②「functions.php」の修正

// SVGファイルのアップロードを許可する
function my_upload_mimes($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';

    return $mimes;
}
add_action('upload_mimes', 'my_upload_mimes');

「upload_mimes」フックに関数を設定します。アップロード可能なファイルタイプが定義されている配列にsvgを追加します。
これまでは手順①だけでよかったのですが、WordPressのバージョン6.2以降から、両方の対応が必要になったようです。
参考：https://github.com/WordPress/gutenberg/issues/22861

補足：アップロード可能なファイルの種類を制限する

手順①のオプションを有効にすると、svg以外のファイルの制限もなくなってしまうため、セキュリティの観点上あまりよい状態とは言えません。運用上、アップロードするファイルを特定のものに制限してよいのであれば、手順②のコードを下記に置き換えたほうがよいです。

// アップロード可能なファイルを制限する
function my_upload_mimes() {
    $mimes = [
        'jpg|jpeg' => 'image/jpeg',
        'png' => 'image/png',
        'svg' => 'image/svg+xml',
    ];
    
    return $mimes;
}
add_filter('upload_mimes', 'my_upload_mimes');

補足：編集者にもアップロード権限を与える

上記の方法でアップロード可能になるのは管理者権限を持ったユーザーのみとなります。
管理者以外のユーザーにもアップロードできるようにするためには、下記のコードをfunctions.phpに追加します。

// 編集者権限にアップロード権限を設定する
function my_admin_init() {
  $role = get_role('editor');
  $role->add_cap('unfiltered_upload'); 
}
add_action('admin_init', 'my_admin_init');

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。