[WP]管理画面に画像アップロード機能を組込む

投稿者 admin on June 13, 2014

WPの管理画面内で、画像アップロード機能を付けたいケースは多いだろう。

もちろん、普通にファイル選択フォームを作って$_FILESを通してガリガリ自前実装してもよい。

しかし、WPは高性能なajax画像アップロード機能を内蔵しているので、これを使わない手はない。

 

まずは、自分の作りたいページに、必要なjsを確実に読込むようにする。

//管理画面内でのスクリプトの準備
//////////////////////////////////////////////////////////////////////////////
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');
}

次に、管理ページのhtml吐き出し部分に、jsを仕込む

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('#'+rel).val('');
                    jQuery('#'+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;
        });
    });
});

ポイントがあるとしたら、window.send_to_editorだろうか。 これは、「投稿に挿入」ボタンが押された時に呼ばれるコールバック・メソッド。iframe内のhtmlを一式引き数に持っている。(windowのメソッドなのでiframeをまたげるのか?) 自分のフォームに合わせて、好きな処理を加えておく。ここではソースのurlを拾って、inputに埋め込んでいる。 iFrame越しのDOM操作を行なっている。

                imgurl = jQuery('img', html).attr('src');//引数html内のimgタグのsrcを得る
                    jQuery('#'+rel).val('');//クリアして
                    jQuery('#'+rel).val(imgurl);//ここでinputの内容を書き込んでいる

とまあ、jQueryのセレクタの力に依存した、かなり強引な方法だ。工夫次第ではファイル名でなく、IDも持って来れると思う。 複数ファイルの場合は?htmlを解析してwindow.send_to_editor内をガリガリゴリゴリ書いて行けば何とかなるはず。