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 (速習デザイン)もよろしくお願い致します。

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


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

  1. そんなわけでブログ記事を書きました。 RT WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 http://t.co/DdUYPMsE

  2. これは使える!|WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 http://t.co/6kEShYpy @khoshinoさんから

  3. WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 | 株式会社コミュニティコム – http://t.co/lwxAXwRS これは色々と応用を思いつくね。

  4. これは使える!|WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 http://t.co/6kEShYpy @khoshinoさんから

  5. WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 http://t.co/ELHn4a6L @khoshinoさんから

  6. WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 | 株式会社コミュニティコム – http://t.co/lwxAXwRS これは色々と応用を思いつくね。

  7. WordPressに、psdデータやaiデータをアップロードする方法 http://t.co/4Y4a0lD0

  8. 大曲さんが一所懸命実装したアップロードをSFTPでダウンロードしたのがぼくです | http://t.co/aIoImp9T

  9. WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 http://t.co/LLipqggx @khoshinoさんから

  10. そんなわけでブログ記事を書きました。 RT WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 http://t.co/DdUYPMsE

  11. [WordPress] / “WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 | 株式会社コミュニティコム” http://t.co/D0IJZAAe

  12. 今度やってみよう

  13. 今度やってみよう / “WordPressの投稿画面から、PhotoshopやIllustratorのデータ(拡張子がpsdやaiのファイルデータ)をアップロードする方法 | 株式会社コミュニティコム” http://t.co/xoo3cLIV

  14. WordPress に PSD をアップロードする方法ってどっかで見た気がするなぁ … と思ったら、星野さんが書いててくれてた http://t.co/0n1OU9SwhY よかった w

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

  16. togopicの某書き換え、やぐさんメソッドではできなくなっていて( http://t.co/OKUEFCPybu )、こちらのほう( http://t.co/9BxURDq7hg )でやったらできた。メモ。 #togofarm

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA