WordPress 3分間フッキングシリーズについて
こんにちは、WordPressエンジニアの皆さん！埼玉県川越市を拠点に、WordPressサイトの開発やカスタマイズ、技術サポートを行っている私たちが、「WordPress 3分間フッキング」シリーズをお届けします。
あの国民的料理番組「3分間クッキング」をもじった、WordPress開発者のための「3分間フッキング」、今回はSVGファイルのアップロードを許可する方法をご紹介します！
このシリーズでは、WordPressの真髄とも言える「フック」を使った実用的なテクニックを、functions.phpに数行書くだけで実現できる形でお伝えしていきます。
なぜSVGファイルのアップロードを許可する必要があるのか？
最近のWordPress（バージョン5.8以降）では、軽量な次世代画像フォーマットであるWebPファイルが標準でサポートされるようになりました。これにより、以前のようにfunctions.phpへコードを書かなくても、管理画面からWebP画像を自由にアップロードできます。
さらにWordPress 6.5以降では、より高い圧縮効率を持つ次世代画像フォーマットAVIFのアップロードにも対応しました。これにより、WordPress標準機能だけでもWebPやAVIFといった軽量画像フォーマットを利用できる環境が整ってきています。
一方で、SVGに関しては2026年現在の最新バージョンにおいても、標準では「セキュリティ上の理由（XMLベースのスクリプト混入リスク）」からアップロードが制限されています。将来的なバージョンではバリデーション機能と共に標準化される可能性もありますが、現状では今回ご紹介する「3分間フッキング」のテクニックが必須となります。
「WebPとAVIFは標準、SVGはあえてフックで許可する」。これが現在のWordPressにおける、パフォーマンスとセキュリティを両立させるための設計思想です。
モダンなWebデザインに欠かせないSVGの魅力
セキュリティ上の理由で制限されているSVGですが、モダンなWebサイト制作においてその役割は非常に重要です。
SVG（Scalable Vector Graphics）は、拡大縮小しても品質が劣化しない、軽量で高品質なベクターグラフィックスです！
具体的なメリットには以下のようなものがあります：
- 高解像度対応：どんなに拡大しても画質が劣化せず、4Kディスプレイやスマホでも鮮明に表示
- ファイルサイズの軽量化：複雑なアイコンやロゴでも、PNGやJPGに比べて格段にデータ量が小さい
- アニメーション・対話性：CSSやJavaScriptで動きをつけたり、ユーザーの操作に反応させることが可能
- アクセシビリティ：テキストベースのデータなので、検索エンジン（SEO）やスクリーンリーダーに認識されやすい
- 透過対応：背景デザインを選ばず、ロゴやイラストを美しく配置できる
特にロゴ、アイコン、シンプルなイラストなどはSVGの独壇場です。レスポンシブデザインが当たり前となった今、デバイスサイズを問わず美しさを保てるSVGの重要性はますます高まっています。
ただし、SVGはXML形式の「コード」を含んでいるため、悪意あるスクリプトが埋め込まれる脆弱性のリスクも孕んでいます。利便性を享受するためには、適切なセキュリティ対策が不可欠です。
それでは、安全にSVGを使いこなすための第一歩、アップロードを許可するフックコードを見てみましょう！
SVGアップロード許可のコード解説
|
1 2 3 4 5 6 7 |
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タイプのリストを変更することができます。
|
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」を選択します
- ファイルの適切な位置に、以下のコードを追加します
|
1 2 3 4 5 6 7 8 9 10 |
/** * 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; } |
これだけで、WordPressでSVGファイルがアップロードできるようになります！
セキュリティ対策の重要性
SVGファイルは基本的にXMLファイルであり、悪意のあるJavaScriptなどを含めることが可能です。そのため、SVGファイルのアップロードを許可する場合は、適切なセキュリティ対策が不可欠です。
特に不特定多数のユーザーがファイルをアップロードできるサイトでは、対策が重要です。
セキュリティ対策として、以下のような方法があります：
1. SVGサニタイザーの使用
SVGファイルを「サニタイズ」（消毒）して、潜在的に危険なコードを除去する方法があります。以下はサニタイズ処理を追加する例です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * 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ファイルのアップロードを許可する方法もあります：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * 管理者のみに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ファイルをアップロードできるようになっても、メディアライブラリでのプレビュー表示が正しく機能しないことがあります。以下のコードで修正できます：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * 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ファイルのサイズを計算できるようにします：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** * 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ファイル以外にも、複数のファイル形式を一度に追加することもできます：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * 複数のファイル形式を許可 */ 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を組み合わせて使用 |
| ユーザーがアップロードする場合 | 特に厳格なサニタイズ処理を実装 |
【実録】コードは正しいのにアップロードできない？「真の犯人」はSVGの中身にある
「functions.phpにフックを正しく書いた。Wordfenceなどのプラグインも止めた。なのにまだ『権限がありません』と怒られる……」。WordPress 6.8系においても、標準ではSVGアップロードは制限されたままですが、コードを書いただけでは突破できない「壁」に遭遇することがあります。
今回、私が直面した原因は、Illustratorから出力したSVGの1行目がコメントアウト（非表示扱い）されていたことでした。
WordPressは、ファイルの中身をスキャンしてMIMEタイプを厳格にチェックします。XML宣言がコメントになっていると、正当なSVGファイルとして認識されず、セキュリティ・ブロックがかかってしまうのです。
Macユーザーが陥る「中身が見えない」問題
ここで厄介なのが、Mac標準の「テキストエディット」や一部のエディタの設定です。SVGファイルをダブルクリックすると「画像」としてプレビューされてしまい、肝心のコード（XML宣言）に辿り着けないことがあります。
エンジニアであれば、迷わずターミナルを叩きましょう。私は今回、以下のプロセスで原因を特定しました。
1. ターミナルでファイルの「頭」を確認する
画像プレビューに騙されず、headコマンドでファイル構造の先頭を確認します。
|
1 2 3 |
yabea@edel Downloads % head icon.svg <!--?xml version="1.0" encoding="utf-8"?-->; <!-- Generator: Adobe Illustrator ... --> |
）を取り除き、正しいXML宣言へ修正しましょう。
|
1 |
<?xml version="1.0" encoding="utf-8"?> |
まとめ
いかがでしたか？たった数行のコードで、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顧問エンジニアサービスもおすすめです。
