WordPressのメディアにSVGやCSSなどのファイルをアップロードできるようにするスニペット

ファイルアップロードのイラスト

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ファイル

SVGファイルの例

pngファイル

pngファイルの例
かかかず
かかかず

イラスト主体の場合、ファイルサイズもpngとさほど変わらないので、使いやすく綺麗です。

WP Add Mime Types

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にコピペしましょう。

コードを表示する

functions.php

function add_file_types_to_uploads($file_types){
 
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
 
    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

HTMLファイル

あまり使うことはないかもしれませんが、HTMLのファイルも、functions.phpにコピペするコードを書けばアップロードできるようになります。

HTMLファイルのバックアップ用に使うにはいいかもしれません 。

functions.phpにコピペするコード

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にコピペしましょう。

コードを表示する

functions.php

function custom_mime_types( $mimes ) {
    $mimes['css'] = 'text/plain';
    return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

さいごに

WordPressでアップロードできるファイル形式を増やすには、このように「プラグイン」か「functions.phpへの追加」のどちらかでできますが、もちろんこれ以外にサーバーにftpでアップロードすることもできるので、自分が使いやすい方法で、色々カスタマイズをしましょう。

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影