on wordpress

WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。

WordPress 3.5で実装されたメディアアップローダーを自作プラグインやテーマの管理画面等で使うには以下の様な感じ。

以前と比べて簡単になりましたし、ボタンのテキストを変更したりとかもできるので、かなり使いやすくなった印象です。

スクリーンショット_2013_02_25_4_15

PHP側の処理

デモ用のプラグインとして動かすため、いろいろと書いてありますが注意すべき点は3つだけです。

  • 適当なフックで wp_enqueue_media() をコールする。(50行目)
  • カスタムメディアアップローダー用のJavaScriptを wp_enqueue_script() で設定する。(53行目)
  • メディアアップローダーを呼び出すボタン等を配置する。(42行目)

JavaScript

JavaScriptは以下のような感じです。

  • #demo-media とか #demo-images の部分は適当にHTMLとあわせましょう。
  • 20行目の multiple の値を false にすると画像を1つしか選択できなくなります。
  • 23行目の images に選択された画像が格納されます。multiple を false にした場合は、最初の1つだけを取り出せばオッケーです。
  • 選択可能なファイルを画像だけに限定するには、12〜16行目のコメントアウトを解除してください。

この例では <img /> を出力してるだけですが、実際に使用する場合は input 要素等を放り込んでください。

※追記 library: {type: image} を定義しても画像以外のファイルのアップロードを拒否してくれないみたいです。（リストに表示されなくなるだけ）
どっちにしろ必要に応じてphp側で処理しないといけないので、仕方ないですが。

とりあえず試したいって方のために、WordPressのプラグインとして置いておきます。

デモ用プラグインをダウンロード

これでも以前よりかなり簡単になったんですよ。笑