WordPressのメニューのメディアは結構便利で、jpgやpngの画像系ファイルをはじめ、mp4のファイルをアップロードして利用できますが、一部使えないファイル形式もあったりします。
この記事では、SVGやCSSなどのファイルをアップロードできるようにする方法について
- プラグインを使ってアップロードできるファイルを増やす方法。
- WP Add Mime Typesのインストール方法。
- プラグインなしでSVGなどのファイルを使えるようにするコード一式。
の内容です。
WordPressでカスタムフィールドを使う時とか、ファイルのバックアップに使う時など設定しておくと便利なので、この記事を参考に設定してみてください。
プラグインで増やす方法
どんなフォーマットに対応しているかどうかは、wp-include内のfunction.phpの3076行目から書いてあります。
wp-include内のfunction.php
function wp_get_mime_types() {
/**
* Filters the list of mime types and file extensions.
*
* This filter should be used to add, not remove, mime types. To remove
* mime types, use the {@see 'upload_mimes'} filter.
*
* @since 3.5.0
*
* @param string[] $wp_get_mime_types Mime types keyed by the file extension regex
* corresponding to those 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',
'heic' => 'image/heic',
// 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',
)
);
}結構な種類のファイルが「メディア」にアップロードできますが、意外と使えないファイルがあり、例えばSVGファイルです。
SVGファイルは、拡大縮小に強いため、サイズ毎に画像を作らなくてもよく、どんなに拡大していってもくっきりとした表示を保つことができます。
以下が同じイラストで、デスクトップで見ると左がSVG。右がpngのファイルですが、左側のSVGファイルは輪郭の部分とかがボヤッとせずに、拡大しても綺麗に表示されます。
SVGファイル
pngファイル
かかかず
イラスト主体の場合、ファイルサイズもpngとさほど変わらないので、使いやすく綺麗です。
WP Add Mime Types
WP Add Mime Typesというプラグインは、アップロードできるファイル形式を増やしてくれるプラグインです。
設定は、「設定」→「Mime Types設定」で、設定画面の入力欄へ追加したいファイル形式を記載することで、アップロード可能なファイルを増やすことができます。
functions.php にコピペしてファイル形式を増やすことができますが、プラグインだと簡単にできてしまうので、インストールして有効化しましょう。
functions.phpにコピペして増やす方法
ファイル形式を増やす際、functions.phpにコピペしてファイル形式を増やすことができます。
プラグインほど数を増やさない場合は、このコピペだけの方がプラグイン を入れる必要もないので便利です。
SVGファイル
このコードをfunctions.phpにコピペすると、WordPressでアップロードできるファイル形式の配列へ接続し、許可済みのファイル形式としてSVGの拡張子（image/svg+xml）を追加することができます。
以下のコードをfunctions.phpにコピペしましょう。
コードを表示する
functions.php
function add_svg_to_upload_mimes( $upload_mimes ) {
$upload_mimes['svg'] = 'image/svg+xml';
$upload_mimes['svgz'] = 'image/svg+xml';
return $upload_mimes;
}
add_filter( 'upload_mimes', 'add_svg_to_upload_mimes', 10, 1 );
function svg_in_wp_kses_allowed_html( $tags ) {
$tags['svg'] = array(
'class' => true,
'xmlns' => true,
'width' => true,
'height' => true,
'viewbox' => true,
'aria-hidden' => true,
'role' => true,
);
$tags['g'] = array(
'fill' => true,
);
$tags['path'] = array(
'fill' => true,
'd' => true,
);
return $tags;
}
add_filter( 'wp_kses_allowed_html', 'svg_in_wp_kses_allowed_html', 10, 1 );HTMLファイル
あまり使うことはないかもしれませんが、HTMLのファイルも、functions.phpにコピペするコードを書けばアップロードできるようになります。
HTMLファイルのバックアップ用に使うにはいいかもしれません 。
SVGのコピペ用コードと同様、以下のコードをfunctions.phpにコピペしましょう。
コードを表示する
functions.php
function allow_update_mime ( $existing_mimes = array() ) {
$existing_mimes['html'] = 'text/html';
return $existing_mimes;
}
add_filter('upload_mimes', 'allow_update_mime'); CSSファイル
CSSは、メディアで使えるようにしておくと便利です。
以下のコードをfunctions.phpにコピペしましょう。
コードを表示する
functions.php
function custom_mime_types( $mimes ) {
$mimes['css'] = 'text/plain';
return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );さいごに
WordPressでアップロードできるファイル形式を増やすには、このように「プラグイン」か「functions.phpへの追加」のどちらかでできますが、もちろんこれ以外にサーバーにftpでアップロードすることもできるので、自分が使いやすい方法で、色々カスタマイズをしましょう。
