管理画面にメディアアップローダを組み込む

1から解析していたら大変なことになりそうだったが、http://firegoby.jp/archives/2261ここを見て、あっけなく実装出来た。
少しばかり解析しようとjavascript部分のみ抜き出す

<script>
jQuery('document').ready(function(){
jQuery('.media-upload').each(function(){//aタグの画像編集ボタンのそれぞれについて
var rel = jQuery(this).attr("rel");//rel属性(すなわちid,nameと同じ)
jQuery(this).click(function(){//クリックイベントをバインド
window.send_to_editor = function(html) {//send_to_editor(html)定義
imgurl = jQuery('img', html).attr('src');//引数html内のimgタグのsrcを得る
jQuery('input#'+rel).val(imgurl);//ここでinputの内容を書き込んでいる
tb_remove();//自分自身を消す
}
formfield = jQuery('#'+rel).attr('name');//inputフィールド
tb_show(null, 'media-upload.php?post_id=0&type=image&TB_iframe=true');//iframeを開く
return false;
});
});
});
</script>

send_to_editor(html)は、多分media-upload.jsかどこかで定義されていて、文字通り、html内容をエディタに転送する。そこを上書きして、普段の「投稿に挿入」の代わりに、自分の作ったインプットなどに転送するようにカスタムするわけだ。
 iframeが絡んだ転送って何やら難しそうな気がするが、要はネストされたHTMLなので、親ウインドウからjQueryで自在に操作できる。最後にtb_remove()で自分を消せば完了。
 もちろん、必要なスクリプトはロードしておく必要がある

add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}

と、あまりハマらずに実装出来たが、ファイルを上げるだけなら普通のの方が使いやすいように思う。特にWPに慣れていないユーザならなおさらであろう。
もちろんを使う場合は、独自処理を加える事になる。この記事がかなり素晴らしい。
http://wordpress.stackexchange.com/questions/4307/how-can-i-add-an-image-upload-field-directly-to-a-custom-write-panel/4413#4413
投稿画面のカスタマイズならばこのリンク先のコードがそのまま使える。
単なるオプション画面ならば、wp_handle_upload()の部分だけ使って、update_option()すれば良い。
いずれにせよ、move_upload_file何ちゃらは一切手を染めずに済みそうだ。

後日談:メディアアップローダ内のマークアップが変更になり、上記では動かなくなりました。そのうち改訂版を出します。
jQueryでIDを引っ張ってくる部分をアレンジして下さい!
imgurl = jQuery(‘img’, html).attr(‘src’);//引数html内のimgタグのsrcを得る
ここです。

後日談2:ウイジェット内で実装しようとしたらうまく行かなかった。
jQuery(‘input#’+rel).val(imgurl);//ここでinputの内容を書き込んでいる
jqueryセレクタにinputを加えたらうまく行った。IDがかぶってたのかな?

コメント

タイトルとURLをコピーしました