最新のWordpressでSVG画像がアップロードできない場合の解決方法です。
WordPressは、管理画面の「メディア」ページから、ファイルを簡単にアップロードすることができますが、
全てのフォーマット画像がアップロード許可されている訳ではなく、WordPress側で許可されているフォーマットのみアップロード可能となります。
よく使うファイルとしては、おなじみのJPEG、PNG、GIFあたりですが、実はそれ以外にも様々なファイルをアップロードすることができます。
画像だけでなく、動画ファイルや、音声ファイル、Word／Excel／PowerPoint等のオフィスファイルもアップロードが可能となっています。
どんなフォーマットに対応しているかどうかは、Wordpressコアファイルである、wp-include内のfunction.phpに記載されています。
function wp_get_mime_types() {
return apply_filters(
'mime_types',
array(
// Image formats.
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
'bmp' => 'image/bmp',
'tiff|tif' => 'image/tiff',
'ico' => 'image/x-icon',
// Video formats.
'asf|asx' => 'video/x-ms-asf',
'wmv' => 'video/x-ms-wmv',
'wmx' => 'video/x-ms-wmx',
'wm' => 'video/x-ms-wm',
'avi' => 'video/avi',
'divx' => 'video/divx',
'flv' => 'video/x-flv',
'mov|qt' => 'video/quicktime',
'mpeg|mpg|mpe' => 'video/mpeg',
'mp4|m4v' => 'video/mp4',
'ogv' => 'video/ogg',
'webm' => 'video/webm',
'mkv' => 'video/x-matroska',
'3gp|3gpp' => 'video/3gpp', // Can also be audio
'3g2|3gp2' => 'video/3gpp2', // Can also be audio
// Text formats.
'txt|asc|c|cc|h|srt' => 'text/plain',
'csv' => 'text/csv',
'tsv' => 'text/tab-separated-values',
'ics' => 'text/calendar',
'rtx' => 'text/richtext',
'css' => 'text/css',
'htm|html' => 'text/html',
'vtt' => 'text/vtt',
'dfxp' => 'application/ttaf+xml',
// Audio formats.
'mp3|m4a|m4b' => 'audio/mpeg',
'aac' => 'audio/aac',
'ra|ram' => 'audio/x-realaudio',
'wav' => 'audio/wav',
'ogg|oga' => 'audio/ogg',
'flac' => 'audio/flac',
'mid|midi' => 'audio/midi',
'wma' => 'audio/x-ms-wma',
'wax' => 'audio/x-ms-wax',
'mka' => 'audio/x-matroska',
// Misc application formats.
'rtf' => 'application/rtf',
'js' => 'application/javascript',
'pdf' => 'application/pdf',
'swf' => 'application/x-shockwave-flash',
'class' => 'application/java',
'tar' => 'application/x-tar',
'zip' => 'application/zip',
'gz|gzip' => 'application/x-gzip',
'rar' => 'application/rar',
'7z' => 'application/x-7z-compressed',
'exe' => 'application/x-msdownload',
'psd' => 'application/octet-stream',
'xcf' => 'application/octet-stream',
// MS Office formats.
'doc' => 'application/msword',
'pot|pps|ppt' => 'application/vnd.ms-powerpoint',
'wri' => 'application/vnd.ms-write',
'xla|xls|xlt|xlw' => 'application/vnd.ms-excel',
'mdb' => 'application/vnd.ms-access',
'mpp' => 'application/vnd.ms-project',
'docx' => 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'docm' => 'application/vnd.ms-word.document.macroEnabled.12',
'dotx' => 'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
'dotm' => 'application/vnd.ms-word.template.macroEnabled.12',
'xlsx' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'xlsm' => 'application/vnd.ms-excel.sheet.macroEnabled.12',
'xlsb' => 'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
'xltx' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
'xltm' => 'application/vnd.ms-excel.template.macroEnabled.12',
'xlam' => 'application/vnd.ms-excel.addin.macroEnabled.12',
'pptx' => 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'pptm' => 'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'ppsx' => 'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
'ppsm' => 'application/vnd.ms-powerpoint.slideshow.macroEnabled.12',
'potx' => 'application/vnd.openxmlformats-officedocument.presentationml.template',
'potm' => 'application/vnd.ms-powerpoint.template.macroEnabled.12',
'ppam' => 'application/vnd.ms-powerpoint.addin.macroEnabled.12',
'sldx' => 'application/vnd.openxmlformats-officedocument.presentationml.slide',
'sldm' => 'application/vnd.ms-powerpoint.slide.macroEnabled.12',
'onetoc|onetoc2|onetmp|onepkg' => 'application/onenote',
'oxps' => 'application/oxps',
'xps' => 'application/vnd.ms-xpsdocument',
// OpenOffice formats.
'odt' => 'application/vnd.oasis.opendocument.text',
'odp' => 'application/vnd.oasis.opendocument.presentation',
'ods' => 'application/vnd.oasis.opendocument.spreadsheet',
'odg' => 'application/vnd.oasis.opendocument.graphics',
'odc' => 'application/vnd.oasis.opendocument.chart',
'odb' => 'application/vnd.oasis.opendocument.database',
'odf' => 'application/vnd.oasis.opendocument.formula',
// WordPerfect formats.
'wp|wpd' => 'application/wordperfect',
// iWork formats.
'key' => 'application/vnd.apple.keynote',
'numbers' => 'application/vnd.apple.numbers',
'pages' => 'application/vnd.apple.pages',
)
);
}
上記のものはWordpress 5.2.4のもので、Wordpressのバージョンによって内容が微妙に変わってきます。
結構な種類のファイルがアップロード可能ですが、意外と使えないフォーマットもあります。
その一例としてSVGファイルです。
SVGは、JPEG、PNG、GIF等の「点」で表現するラスタ形式画像と違い、画像をベクトルで表現するベクター形式画像です。
複雑な画像には向かないフォーマットですが、ロゴや線のはっきりしたイラストには非常に適していてます。
ベクトルデータな為、どんなに拡大しても画質が変わることはありません。
＊ 古いブラウザはSVGを扱えないという時代もありましたが、現在のブラウザではほとんど使用することが可能となっています。
そんな便利なSVG画像ですが、Wordpressでは何故かアップロード許可されていません。
ではどうすれば良いかと言うと、
WordPress 4.9.9までのバージョンであれば、
「使用テーマ内のfunction.php」へ以下のコードを記載すればOKです。
//SVG arrow
function arrow_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'arrow_mime_types');
ただし、現在のWorpress 5.0以上のバージョンではセキュリティ機能が厳しくなり、上記のやり方では機能しません。
プラグインでSVGをアップロードする方法
WordPressのプラグインを使用すれば、上記のようにfunction.phpにいろいろ書き込まなくとも即解決します。
おすすめは、「Safe SVG」というプラグイン。
設定は特に不要でプラグインをインストールして有効化すればOKです。
（Ver.5以上のWordpressだけでなく全てのバージョンに対応しています。）
内部的には手動でfunctions.phpに書き込んだことと同じことをやっているだけなので、このプラグインを入れたから動作が遅くなるということはないかと思います。
確認環境：Wordpress5.2.4
コメント
[…] WordPress で SVG 画像をアップロードする方法 | Tamoc […]
[…] WordPress で SVG 画像をアップロードする方法 | Tamoc […]