2018年1月18日
  • 自社保有メディアのサイト運営によるインターネット広告事業・WordPressによるサイト制作事業・コワーキングスペース・シェアオフィス・貸会議室の運営事業を行っています。

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

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

コメント一覧

khoshino2012年10月1日 4:04 PM /

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

kawa03102012年10月1日 4:20 PM /

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

evian2012年10月1日 4:25 PM /

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

sobaxmen2012年10月1日 4:26 PM /

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

popstaplerate2012年10月1日 4:56 PM /

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

t_hira2012年10月1日 4:59 PM /

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

bren_boss2012年10月1日 6:03 PM /

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

odyssey2012年10月1日 8:04 PM /

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

aqun002012年10月1日 9:33 PM /

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

kenty2362012年10月1日 11:23 PM /

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

firstelement2012年10月2日 7:57 AM /

http://t.co/G831N5vx http://t.co/7UynXm6y

primarytext2012年10月2日 5:37 PM /

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

onahead2012年11月11日 1:28 AM /

今度やってみよう

suzukisan__2012年11月11日 1:28 AM /

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

たかはし のり2013年4月2日 2:37 PM /

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

duke012013年4月2日 4:10 PM /

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

小野 浩雅(本名でない)2013年4月15日 3:32 PM /

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

コメントを残す

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

CAPTCHA