ブログ

株式会社コミュニティコム採用情報 自由な働き方ができるから、パパ・ママにも優しい職場 復業OK、起業したい方、経験を積みたい方、あなたの夢を応援します

WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法

こんにちは。株式会社コミュニティコムの星野邦敏です。

いやぁ、もう10月ですね!早い、早い。月日の経つのは本当に早いですね。

さて、今日は、WordPressの投稿画面の「アップロード/挿入」から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)、それ以外でもWordPressのアップロードファイルとして想定されていない拡張子のファイルをアップロードしたい場合の、その方法について、以下で解説します。

まず、前提として、現在の最新版WordPress3.4.2の場合、WordPressの投稿画面からアップロードできるファイルは、普段は触ることは無いと思いますが、WordPressのwp-includesフォルダのfunctions.phpファイルの中に、以下のソースコードがあります。

ココに書かれている拡張子であれば、何もしなくても、WordPressの管理画面からファイルをアップロードして投稿に挿入することができます。
例えば、PDFファイル(拡張子が.pdf)やWordファイル(拡張子が.docまたは.docx)やExcelファイル(拡張子が.xlsまたは.xlsx)やPowerPointファイル(拡張子が.pptまたは.pptx)がアップロードできるのも、以下のソースコード内に記述があるからです。

しかし、それ以外の拡張子のファイルをアップロードしようとすると、以下のような画面が出て、拒否されてしまいます。
WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法
エラーのためアップロードに失敗しました
このファイルタイプはセキュリティの観点から許可されていません。』
と出てしまいます。

ここで、以下のソースコードを見てみると、PhotoshopやIllustratorの元のデータファイル(拡張子がpsdやaiのファイルデータ)は、WordPressの投稿でアップロードすることを想定していないことが分かります。

しかしながら、例えば、元のデータファイルを公開したい場合もあるかもしれません。

また、実例なのですが、書籍の執筆などの際に、出版社の人とデータのやり取りをする場合、WordPressをユーザーのみ閲覧できるようなクローズドサイトにして、そのWordPressの中で書籍の原稿を書いて、かつ、データのやり取りもする、という仕組みを作った場合、出版社の編集者とPhotoshopやIllustratorの元のデータファイル(拡張子がpsdやaiのファイルデータ)のやり取りをします。このような時、psdデータやaiデータをアップロードできないと、メール添付やDropboxなど、また別のツールを使わないといけなくなり、不便な場合もあるでしょう。

さらには、PhotoshopやIllustratorの元のデータファイル(拡張子がpsdやaiのファイルデータ)以外にも、以下のソースコード内に無い拡張子でアップしたい場合もあると思います。

WordPressコアファイルのwp-includesフォルダの中のfunctions.phpファイル
この中で書かれている拡張子は、WordPressで標準でファイルをアップロードできます。

function get_allowed_mime_types() {
static $mimes = false;

if ( !$mimes ) {
// Accepted MIME types are set here as PCRE unless provided.
$mimes = apply_filters( 'upload_mimes', array(
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
'bmp' => 'image/bmp',
'tif|tiff' => 'image/tiff',
'ico' => 'image/x-icon',
'asf|asx|wax|wmv|wmx' => 'video/asf',
'avi' => 'video/avi',
'divx' => 'video/divx',
'flv' => 'video/x-flv',
'mov|qt' => 'video/quicktime',
'mpeg|mpg|mpe' => 'video/mpeg',
'txt|asc|c|cc|h' => 'text/plain',
'csv' => 'text/csv',
'tsv' => 'text/tab-separated-values',
'ics' => 'text/calendar',
'rtx' => 'text/richtext',
'css' => 'text/css',
'htm|html' => 'text/html',
'mp3|m4a|m4b' => 'audio/mpeg',
'mp4|m4v' => 'video/mp4',
'ra|ram' => 'audio/x-realaudio',
'wav' => 'audio/wav',
'ogg|oga' => 'audio/ogg',
'ogv' => 'video/ogg',
'mid|midi' => 'audio/midi',
'wma' => 'audio/wma',
'mka' => 'audio/x-matroska',
'mkv' => 'video/x-matroska',
'rtf' => 'application/rtf',
'js' => 'application/javascript',
'pdf' => 'application/pdf',
'doc|docx' => 'application/msword',
'pot|pps|ppt|pptx|ppam|pptm|sldm|ppsm|potm' => 'application/vnd.ms-powerpoint',
'wri' => 'application/vnd.ms-write',
'xla|xls|xlsx|xlt|xlw|xlam|xlsb|xlsm|xltm' => 'application/vnd.ms-excel',
'mdb' => 'application/vnd.ms-access',
'mpp' => 'application/vnd.ms-project',
'docm|dotm' => 'application/vnd.ms-word',
'pptx|sldx|ppsx|potx' => 'application/vnd.openxmlformats-officedocument.presentationml',
'xlsx|xltx' => 'application/vnd.openxmlformats-officedocument.spreadsheetml',
'docx|dotx' => 'application/vnd.openxmlformats-officedocument.wordprocessingml',
'onetoc|onetoc2|onetmp|onepkg' => 'application/onenote',
'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',
// 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',
) );
}

return $mimes;
}

上記のソースコード内に無い拡張子のファイルを管理画面からアップロードしたい場合には、WordPressには、
upload_mimes
というapply_filtersが用意されていますので、このフックに引っ掛ける形で、自分のWordPressテーマ内のfunctions.phpに、以下のようなソースコードを書きましょう。
(すなわち、WordPressのwp-contentフォルダ内のthemesフォルダ内の自分の有効化しているテーマフォルダの中のfunctions.phpに記述をする、ということです。)

Photoshopのデータ(拡張子が.psd)の場合

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

Illustratorのデータ(拡張子が.ai)の場合

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

これで、PhotoshopやIllustratorの元のデータファイル(拡張子がpsdやaiのファイルデータ)がWordPressの投稿画面からアップロードできるようになりますし、想定されていない他の拡張子ファイルでも同じように投稿画面からアップロードすることができるようになるという、応用することができると思います。

以上となります。

なお、ここまで偉そうに書きましたが、これは、大曲さん達とWordPress 3.x (速習デザイン)を執筆した際に、大曲さんが実装したことです。

ということで、大曲さん、ありがとうございます。
WordPress 3.x (速習デザイン)はそのような形で書き上がりまして、今に至っています。もし良かったら、WordPress 3.x (速習デザイン)もよろしくお願い致します。

ということで、別の案件で、この実装をすることになったので、自分の知識の整理のためにも記載しました。