プログラミング

WordPressで使用可能な画像の拡張子をまとめてみた

ブログやサイト運営でwordpressを利用している方は多いと思います。

 

記事を書くときに必ずと言っていいほど必要になってくるのが画像の挿入です。
ユーザーの目を惹きつけてその記事に興味を持ってもらうために設置するアイキャッチ画像や、記事内の説明をわかりやすくするために記事の中に画像を入れたりもすると思います。

 

そこで、画像ならどんな画像でもアップロードできるのか?という疑問が湧いてきました。
私たちがよく使っているpngやjpgなら普通に使えるんだろうな〜という予想を持ちつつも、使いたい画像が違う拡張子だったときどうしよう、PhotoshopやIllustratorで作った画像は使えるのか?など色々気になってしまったのでまとめてみました。

初期設定のWordpressで使うことができる画像の拡張子

wordpressの初期設定で使用可能な画像の拡張子は以下になります。(画像以外はもっとあります)

・jpg, jpeg, jpe
・gif
・png
・bmp
・tif, tiff
・ico

意外と少ないですね。PhotoshopやIllustratorで作った拡張子がpsdやaiの画像ファイルはアップロードできないようです。

PhotoshopやIllustratorで作成した画像をWordpressに投稿する

f:id:hatorihatorihatorik:20181002154957j:plain

PhotoshopやIllustratorで作った画像はWordpressに設置されているfunctions.phpというファイルを書き換えることでアップロードできるようになります。

Photoshopで作った画像をアップロードしたい場合

Photoshopで作った画像をアップロードしたい場合は以下のコードをfunctions.phpにコピペしましょう。

function allow_upload_psd( $mimes ) {
  $mimes['psd'] = 'image/x-photoshop';
  return $mimes;
}
add_filter( 'upload_mimes', 'allow_upload_psd' );

Illustratorで作った画像をアップロードしたい場合

Illustratorで作った画像をアップロードしたい場合は以下のコードをfunctions.phpにコピペしましょう。

function allow_upload_ai( $mimes ) {
  $mimes['ai'] = 'image/x-illustrator';
  return $mimes;
}
add_filter( 'upload_mimes', 'allow_upload_ai' );

どんな拡張子でも設定すれば投稿できるようになるみたいです。

指定した特定の拡張子でしか投稿できないように制限もできる

特定の画像の拡張子しか投稿できないように制限を加えることもできます。

これも同じくfunctions.phpにコピペしていきます。今回は例としてjpgファイルしか投稿できないような指定をします。

function restrict_upload_mimes($mimes) {
  $mimes = array(
    'jpg|jpeg|jpe' => 'image/jpeg',
  );
  return $mimes;
}
add_filter('upload_mimes','restrict_upload_mimes');

これによりjpgファイルしか投稿できない設定が完了しました。他の拡張子でも’jpg|jpeg|jpe’ => ‘image/jpeg’,の部分を書き換えることで自分で選んだ拡張子に制限することができます。

指定した特定の拡張子のみアップロードできないようにもできる

さきほど紹介した2つで十分だとは思いますがコードはなるべく短い方が便利ですよね。
指定した拡張子をアップロードができないような設定もできます。今回はpngファイルをアップロードできないように設定しました。

 

function custom_mime_types( $mimes ){
  unset( $mimes['png'] );
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

画像以外の設定も同じ要領でできる

f:id:hatorihatorihatorik:20181002154853j:plain

今回は画像の拡張子指定の方法のみを紹介しましたが、画像以外でも設定することができます。

functions.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',
  'tif|tiff' => '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',
  'ra|ram' => 'audio/x-realaudio',
  'wav' => 'audio/wav',
  'ogg|oga' => 'audio/ogg',
  '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',
  // 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',
 ) );
}