WordPress 3分間フッキング：SVGファイルのアップロードを許可する方法

WordPress 3分間フッキングシリーズについて

こんにちは、WordPressエンジニアの皆さん！埼玉県川越市を拠点に、WordPressサイトの開発やカスタマイズ、技術サポートを行っている私たちが、「WordPress 3分間フッキング」シリーズをお届けします。

あの国民的料理番組「3分間クッキング」をもじった、WordPress開発者のための「3分間フッキング」、今回はSVGファイルのアップロードを許可する方法をご紹介します！

このシリーズでは、WordPressの真髄とも言える「フック」を使った実用的なテクニックを、functions.phpに数行書くだけで実現できる形でお伝えしていきます。

なぜSVGファイルのアップロードを許可する必要があるのか？

WordPressは標準では、セキュリティ上の理由からSVGファイルのアップロードを許可していません。しかし、モダンなWebデザインにおいて、SVGファイルは非常に重要な役割を果たしています。

SVG（Scalable Vector Graphics）は、拡大縮小しても品質が劣化しない、軽量で高品質なベクターグラフィックスです！

具体的なメリットには以下のようなものがあります：

高解像度対応：どんなに拡大しても画質が劣化せず、あらゆる画面サイズで鮮明に表示
ファイルサイズの軽量化：複雑なデザインでも、PNGやJPGに比べて格段に小さいファイルサイズ
アニメーションや対話性：CSSやJavaScriptでアニメーションや対話的な要素を追加可能
アクセシビリティ：SVGはテキストベースなので、検索エンジンやスクリーンリーダーにも認識されやすい
透過対応：背景に関係なく、きれいに表示される

特にロゴ、アイコン、シンプルなイラストなどにSVGは適しています。レスポンシブデザインが当たり前となった現在、様々なデバイスサイズに対応する必要があり、SVGの重要性はますます高まっています。

ただし、SVGファイルはXML形式でコードを含むため、悪意あるスクリプトが埋め込まれる可能性もあります。セキュリティ対策も考慮する必要があります。

それでは、SVGファイルのアップロードを許可するフックコードを見てみましょう！

SVGアップロード許可のコード解説

add_filter('upload_mimes', 'wp3min_allow_svg_upload');

function wp3min_allow_svg_upload($mimes) {
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}

add_filter('upload_mimes', 'wp3min_allow_svg_upload');

function wp3min_allow_svg_upload($mimes) {

$mimes['svg'] = 'image/svg+xml';

$mimes['svgz'] = 'image/svg+xml';

return $mimes;

}

このシンプルなコードで、WordPressでSVGファイルがアップロード可能になります。では、その仕組みを詳しく解説していきましょう。

upload_mimesフィルターフックの活用

最初の行で「upload_mimes」というフィルターフックに自作関数をフックしています。

WordPressは、ファイルをアップロードする際に「MIME（Multipurpose Internet Mail Extensions）タイプ」というファイル形式の識別子をチェックします。upload_mimesフィルターを使うと、WordPressが許可するMIMEタイプのリストを変更することができます。

add_filter('upload_mimes', 'wp3min_allow_svg_upload');

1	add_filter('upload_mimes', 'wp3min_allow_svg_upload');

wp3min_allow_svg_upload関数の役割

この関数は、WordPressが許可するMIMEタイプの配列（$mimes）を受け取り、SVGファイル用のMIMEタイプを追加して返します。

具体的には：

$mimes['svg'] = 'image/svg+xml'; – 通常のSVGファイル（.svg拡張子）を許可
$mimes['svgz'] = 'image/svg+xml'; – 圧縮版のSVGファイル（.svgz拡張子）も許可

この変更により、WordPressのメディアアップローダーでSVGファイルが選択できるようになります。

実装手順

それでは、実際にこのコードを使ってSVGファイルのアップロードを許可してみましょう！

WordPressの管理画面から「外観」→「テーマエディター」へ移動します
右側のファイル一覧から「functions.php」を選択します
ファイルの適切な位置に、以下のコードを追加します

/**
 * SVGファイルのアップロードを許可する
 */
add_filter('upload_mimes', 'wp3min_allow_svg_upload');

function wp3min_allow_svg_upload($mimes) {
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}

/**

* SVGファイルのアップロードを許可する

add_filter('upload_mimes', 'wp3min_allow_svg_upload');

function wp3min_allow_svg_upload($mimes) {

$mimes['svg'] = 'image/svg+xml';

$mimes['svgz'] = 'image/svg+xml';

return $mimes;

}

「ファイルを更新」ボタンをクリックして保存します

「メディア」→「新規追加」から、SVGファイルをアップロードしてみましょう

これだけで、WordPressでSVGファイルがアップロードできるようになります！

セキュリティ対策の重要性

SVGファイルは基本的にXMLファイルであり、悪意のあるJavaScriptなどを含めることが可能です。そのため、SVGファイルのアップロードを許可する場合は、適切なセキュリティ対策が不可欠です。

特に不特定多数のユーザーがファイルをアップロードできるサイトでは、対策が重要です。

セキュリティ対策として、以下のような方法があります：

1. SVGサニタイザーの使用

SVGファイルを「サニタイズ」（消毒）して、潜在的に危険なコードを除去する方法があります。以下はサニタイズ処理を追加する例です：

/**
 * SVGファイルのアップロード時にサニタイズする
 */
function wp3min_sanitize_svg($file) {
    if ($file['type'] === 'image/svg+xml') {
        // SVGファイルの内容を読み込む
        $content = file_get_contents($file['tmp_name']);
        
        // 危険な要素を削除（簡易的な例）
        $content = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', '', $content);
        
        // サニタイズしたコンテンツを書き戻す
        file_put_contents($file['tmp_name'], $content);
    }
    
    return $file;
}
add_filter('wp_handle_upload_prefilter', 'wp3min_sanitize_svg');

/**

* SVGファイルのアップロード時にサニタイズする

function wp3min_sanitize_svg($file) {

if ($file['type'] === 'image/svg+xml') {

// SVGファイルの内容を読み込む

$content = file_get_contents($file['tmp_name']);

// 危険な要素を削除（簡易的な例）

$content = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', '', $content);

// サニタイズしたコンテンツを書き戻す

file_put_contents($file['tmp_name'], $content);

}

return $file;

}

add_filter('wp_handle_upload_prefilter', 'wp3min_sanitize_svg');

より高度なサニタイズには、専用のライブラリやプラグインを使用することをお勧めします。例えば「svg-sanitizer」などのライブラリが利用できます。

2. SVGファイルのアップロード権限制限

管理者や編集者など、信頼できるユーザーのみにSVGファイルのアップロードを許可する方法もあります：

/**
 * 管理者のみにSVGアップロードを許可する
 */
function wp3min_allow_svg_for_admins($mimes) {
    // 現在のユーザーが管理者の場合のみSVGを許可
    if (current_user_can('administrator')) {
        $mimes['svg']  = 'image/svg+xml';
        $mimes['svgz'] = 'image/svg+xml';
    }
    return $mimes;
}
add_filter('upload_mimes', 'wp3min_allow_svg_for_admins');

/**

* 管理者のみにSVGアップロードを許可する

function wp3min_allow_svg_for_admins($mimes) {

// 現在のユーザーが管理者の場合のみSVGを許可

if (current_user_can('administrator')) {

$mimes['svg'] = 'image/svg+xml';

$mimes['svgz'] = 'image/svg+xml';

}

return $mimes;

}

add_filter('upload_mimes', 'wp3min_allow_svg_for_admins');

応用テクニック

SVGファイルのアップロード許可だけでなく、さらに使いやすくするための応用テクニックも紹介します。

1. SVGファイルのプレビュー表示を修正

WordPressでSVGファイルをアップロードできるようになっても、メディアライブラリでのプレビュー表示が正しく機能しないことがあります。以下のコードで修正できます：

/**
 * SVGファイルのプレビュー表示を修正
 */
function wp3min_fix_svg_thumb_display() {
    echo '
    <style>
        /* メディアライブラリでのSVGサムネイル表示を修正 */
        .attachment-266x266, .thumbnail img {
            width: 100% !important;
            height: auto !important;
        }
    </style>';
}
add_action('admin_head', 'wp3min_fix_svg_thumb_display');

/**

* SVGファイルのプレビュー表示を修正

function wp3min_fix_svg_thumb_display() {

echo '

<style>

/* メディアライブラリでのSVGサムネイル表示を修正 */

.attachment-266x266, .thumbnail img {

width: 100% !important;

height: auto !important;

}

</style>';

}

add_action('admin_head', 'wp3min_fix_svg_thumb_display');

2. SVGファイルのサイズを確認できるようにする

通常、WordPressはSVGファイルの表示サイズを計算できません。以下のコードでSVGファイルのサイズを計算できるようにします：

/**
 * SVGファイルのサイズを確認できるようにする
 */
function wp3min_get_svg_dimensions($response, $attachment, $meta) {
    if ($response['mime'] === 'image/svg+xml' && empty($response['sizes'])) {
        $svg_path = get_attached_file($attachment->ID);
        
        if (!$svg_path) {
            return $response;
        }
        
        $svg = simplexml_load_file($svg_path);
        if (!$svg) {
            return $response;
        }
        
        $attrs = $svg->attributes();
        $width = (int) $attrs->width;
        $height = (int) $attrs->height;
        
        if ($width && $height) {
            $response['sizes'] = array(
                'full' => array(
                    'url' => $response['url'],
                    'width' => $width,
                    'height' => $height,
                ),
            );
        }
    }
    
    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'wp3min_get_svg_dimensions', 10, 3);

/**

* SVGファイルのサイズを確認できるようにする

function wp3min_get_svg_dimensions($response, $attachment, $meta) {

if ($response['mime'] === 'image/svg+xml' && empty($response['sizes'])) {

$svg_path = get_attached_file($attachment->ID);

if (!$svg_path) {

return $response;

}

$svg = simplexml_load_file($svg_path);

if (!$svg) {

return $response;

}

$attrs = $svg->attributes();

$width = (int) $attrs->width;

$height = (int) $attrs->height;

if ($width && $height) {

$response['sizes'] = array(

'full' => array(

'url' => $response['url'],

'width' => $width,

'height' => $height,

);

}

return $response;

}

add_filter('wp_prepare_attachment_for_js', 'wp3min_get_svg_dimensions', 10, 3);

3. 複数のファイル形式を一度に追加

SVGファイル以外にも、複数のファイル形式を一度に追加することもできます：

/**
 * 複数のファイル形式を許可
 */
function wp3min_allow_custom_file_types($mimes) {
    // SVGファイルを許可
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    
    // WebPファイルを許可
    $mimes['webp'] = 'image/webp';
    
    // PDFファイルを許可（デフォルトで許可されていることが多いが念のため）
    $mimes['pdf'] = 'application/pdf';
    
    return $mimes;
}
add_filter('upload_mimes', 'wp3min_allow_custom_file_types');

/**

* 複数のファイル形式を許可

function wp3min_allow_custom_file_types($mimes) {

// SVGファイルを許可

$mimes['svg'] = 'image/svg+xml';

$mimes['svgz'] = 'image/svg+xml';

// WebPファイルを許可

$mimes['webp'] = 'image/webp';

// PDFファイルを許可（デフォルトで許可されていることが多いが念のため）

$mimes['pdf'] = 'application/pdf';

return $mimes;

}

add_filter('upload_mimes', 'wp3min_allow_custom_file_types');

実装時の注意点

SVGファイルのアップロードを許可する際は、以下の点に注意してください：

必ずセキュリティ対策を行い、信頼できるソースからのファイルのみをアップロードすること
プラグインや他のコードとの競合に注意すること
WordPressのバージョンアップによって挙動が変わる可能性があること
一部のホスティング環境では、サーバー側で特定のファイル形式のアップロードを制限している場合があること

また、SVGファイルは直接テーマやプラグインのCSSで利用する場合と、メディアライブラリからコンテンツに挿入する場合で、扱い方が少し異なることもあります。

用途	推奨される方法
ロゴやアイコン	SVGをメディアライブラリにアップロードして使用
インタラクティブな要素	インラインSVGとして直接コードに埋め込む（サニタイズ必須）
大量のアイコン	SVGスプライトを使用してパフォーマンスを向上
複雑なアニメーション	SVGにCSSやJavaScriptを組み合わせて使用
ユーザーがアップロードする場合	特に厳格なサニタイズ処理を実装

まとめ

いかがでしたか？たった数行のコードで、WordPressでSVGファイルのアップロードを許可できることが分かりました。

SVGファイルを活用することで、より軽量で高品質なビジュアル表現が可能になり、サイトのパフォーマンスとユーザー体験を向上させることができます。

今回のポイントをおさらいしましょう：

upload_mimesフィルターフックを使ってWordPressが許可するファイル形式を追加できる
SVGファイルは高品質で軽量、拡大縮小しても劣化しないベクターグラフィック
セキュリティ対策としてSVGファイルのサニタイズを忘れずに行うこと
より高度な応用として、プレビュー表示の修正やサイズ計算の対応も可能

埼玉県川越市を拠点とする私たちは、このようなWordPressの機能拡張や最適化などのテクニカルサポートも提供しています。サイトのパフォーマンス向上やビジュアル表現の質にこだわりたい方は、ぜひご相談ください。

次回の「WordPress 3分間フッキング」もお楽しみに！別のフックを使った便利技をご紹介します。

よくある質問

Q: SVGファイルをアップロードしようとすると「セキュリティ上の理由でアップロードできません」というエラーが出ます

A: サーバー側の設定でSVGファイルのアップロードが制限されている可能性があります。ホスティング会社に確認するか、.htaccessファイルなどでSVGファイルのMIMEタイプを追加する必要がある場合があります。

Q: SVGファイルがアップロードできても正しく表示されません

A: メディアライブラリでの表示問題は、本記事で紹介したプレビュー表示修正コードを試してみてください。また、SVGファイル自体に問題がないか確認することも重要です。

Q: フロントエンドでSVGファイルを最も効率的に使う方法は？

A: 少数のSVGなら直接インラインで埋め込むのが最も効率的です。大量のアイコンを使用する場合はSVGスプライトを作成し、<use>要素で参照する方法がパフォーマンスに優れています。いずれの場合も適切なサニタイズ処理を行ってください。

サイトのビジュアル面の強化やWordPressのパフォーマンス最適化、セキュリティ対策などでお悩みの場合は、WordPressカスタマイズ・プラグイン開発サービスをご検討ください。また、技術的なスキルアップを目指す方にはWordPress顧問エンジニアサービスもおすすめです。

エーデルハーツ

Custom WordPress Support & Development