WordPress の管理画面内にメディアアップローダーを呼び出す方法のメモ書きです。
プラグインの設定画面等で、メディアファイルの ID が取得したいと思ったので調べてみました。
スポンサーリンク
標準のメディアアップローダーを呼び出す
今回試した内容は WordPress 3.5 以降が対象となりますが、WordPress にはメディアアップローダーを使う API が用意されています。
このあたりは流石 WordPress と言ったところ。
とりあえず必要な部分だけですが、テキストフォームとボタンのパーツを HTML で以下のように書いておきます。
<input name="mediaid" type="text" value="" /> <input type="button" name="media" value="選択" /> <input type="button" name="media-clear" value="クリア" /> <div id="media"></div>
テキストフォームにはメディアファイルの ID、div 要素にはプレビュー用のサムネイル画像を表示させる予定です。
次に、以下のような javascript を書きます。
(function ($) {
var custom_uploader;
$("input:button[name=media]").click(function(e) {
e.preventDefault();
if (custom_uploader) {
custom_uploader.open();
return;
}
custom_uploader = wp.media({
title: "Choose Image",
/* ライブラリの一覧は画像のみにする */
library: {
type: "image"
},
button: {
text: "Choose Image"
},
/* 選択できる画像は 1 つだけにする */
multiple: false
});
custom_uploader.on("select", function() {
var images = custom_uploader.state().get("selection");
/* file の中に選択された画像の各種情報が入っている */
images.each(function(file){
/* テキストフォームと表示されたサムネイル画像があればクリア */
$("input:text[name=mediaid]").val("");
$("#media").empty();
/* テキストフォームに画像の ID を表示 */
$("input:text[name=mediaid]").val(file.id);
/* プレビュー用に選択されたサムネイル画像を表示 */
$("#media").append('<img src="'+file.attributes.sizes.thumbnail.url+'" />');
});
});
custom_uploader.open();
});
/* クリアボタンを押した時の処理 */
$("input:button[name=media-clear]").click(function() {
$("input:text[name=mediaid]").val("");
$("#media").empty();
});
})(jQuery);
参考にさせて頂いたサンプルをカスタマイズしてみました。
39 行目の file の中に選択されたメディアファイルの情報が詰まってますので、必要な情報を取り出して指定した要素に挿入するという感じです。
もし、サムネイル画像ではなくフルサイズ画像の URL が取得したい場合はこんな感じです。
.
.
.
$("#media").append('<img src="'+file.attributes.sizes.full.url+'" />');
/* もしくは */
$("#media").append('<img src="'+file.toJSON().url+'" />');
.
.
.
後は上記の javascript とメディアアップローダの javascript API を管理画面で読み込むように設定します。(今回はプラグイン内のメインファイルに追加)
function my_admin_scripts() {
wp_register_script(
'mediauploader',
plugin_dir_url( __FILE__ ) . '/js/mediauploader.js',
array( 'jquery' ),
false,
true
);
/* メディアアップローダの javascript API */
wp_enqueue_media();
/* 作成した javascript */
wp_enqueue_script( 'mediauploader' );
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );
これで準備ができましたので動作確認をしてみます。
メディアアップローダの動作テスト
今回作成したパーツの初期画面は以下のような感じです。
初期画面
選択ボタンを押すと WordPress 標準のメディアアップローダが表示されます。
呼び出されたメディアアップローダー
ここで任意のメディアファイルを選んで右下のボタンで確定します。
メディアファイル選択後
上手いことメディアファイルの IDを取ることができました。
リセットする場合はクリアボタンを押すと値が空になります。
管理画面内でメディアアップローダーを呼び出す方法は以上になります。