このエントリーをはてなブックマークに追加
Facebook にシェア
[`evernote` not found]
LINEで送る

WordPress3.5あたりでメディアアップローダーが改善して自作でメタボックスに設置しやすくなりました。
ただ、メディアアップローダー周りのマニュアルが少なく、色々なサイトを参考に試行錯誤していました。

参考サイト
WordPressの管理画面内でメディアアップローダーを呼び出す
WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。

その中で参考になった（というかほぼまるごとコピった）サイトはこちら
wordpressの投稿画面にメディアアップローダー付きのカスタムフィールドを設置する。
画像を一度の処理で複数アップロードできる上にドラッグで並び替えができるというなかなか便利な仕様です。
（逆に単体のみの場合上のサイトが参考になります）
ただ、コードをそのままコピペをした場合多少不具合があったのでちょっと修正

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<?php
/////////////////////// メタボックスの追加と保存 ///////////////////////
  
add_action("admin_init", "metaboxs_init");
function metaboxs_init(){ // 投稿編集画面にメタボックスを追加する
    add_meta_box( 'myupload', 'アイテム画像', 'myupload_postmeta', 'post', 'side','high' ); // ポジションはsideが推奨です
    add_action('save_post', 'save_myupload_postmeta');
}
  
/////////////////////// メタボックス（画像アップロード用） ///////////////////////
   
function myupload_postmeta(){ //投稿ページに表示されるカスタムフィールド
    global $post;
    $post_id = $post->ID;
    $myupload_images = get_post_meta( $post_id, 'myupload_images', true );
    foreach( $myupload_images as $key => $img_id ){
        $thumb_src = wp_get_attachment_image_src ($img_id,'thumbnail');
        if ( empty ($thumb_src[0]) ){ //画像が存在しない空IDを強制的に取り除く
            delete_post_meta( $post_id, 'myupload_images', $img_id );
        } else {
            $myupload_li.=
            "\t".'<li class="img" id="img_'.$img_id.'">'."\n".
            "\t\t".'<span class="img_wrap">'."\n".
            "\t\t\t".'<a href="#" class="myupload_images_remove" title="画像を削除する"></a>'."\n".
            "\t\t\t".'<img src="'.$thumb_src[0].'"/>'."\n".
            "\t\t\t".'<input type="hidden" name="myupload_images[]" value="'.$img_id.'" />'."\n".
            "\t\t".'</span>'."\n".
            "\t".'</li>'."\n";
        }
    }
?>
<style type="text/css">
    #myupload_images { display:block; clear:both; list-style-type: none; }
    #myupload_images:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
    #myupload_images li { display:block; width:100%; margin:0; padding:5px 0; text-align:center; }
    #myupload_images li span.img_wrap { display:inline-block; margin:0; height:auto; width:auto; padding:4px; position:relative; background:#ccc; }
    #myupload_images li span img { margin:0; padding:0; max-height: 160px; width:auto; vertical-align:text-bottom; }
    #myupload_images li span input { display:none; }
    #myupload_images li span a.myupload_images_remove { position:absolute; top:-8px; right:-8px; height:32px; width:32px; text-align:center; vertical-align:middle; background:#ccc; border-radius:50%; }
    #myupload_images li span a.myupload_images_remove:before { content:'×'; display:inline-block; text-decoration:none; width:1em; margin-right:.2em; text-align:center; font-size:20px; line-height:20px; padding:6px; color:#fff; font-weight:bold; }
    #myupload_images li span a.myupload_images_remove:hover { background:#aaa; }
    #myupload_buttons a, #myupload_buttons input { padding:10px 15px; height:40px; line-height:20px; font-weight:bold; text-align:center; }
</style>
<div id="myupload_buttons">
    <a id="myupload_media" type="button" class="button" title="画像を追加・変更">アイテム画像の追加・削除</a>
    <input type="submit" name="save" id="save2" class="button" value="更新" />
    <p>ドラッグで好きな順に並べてください。</p>
</div>
<ul id="myupload_images">
<?php echo $myupload_li; ?>
</ul>
<input type="hidden" name="myupload_postmeta_nonce" value="<?php echo wp_create_nonce(basename(__FILE__)); ?>" />
<script type="text/javascript">
jQuery( function(){
    var custom_uploader;
    jQuery('#myupload_media').click(function(e) {
        e.preventDefault();
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
        custom_uploader = wp.media({
            title: _wpMediaViewsL10n.mediaLibraryTitle,
            library: {
                type: 'image'
            },
            button: {
                text: '画像を選択'
            },
            multiple: true, // falseのとき画像選択は一つのみ可能
            frame: 'select', // select | post. selectは左のnavを取り除く指定
            editing:   false,
        });
  
 
        custom_uploader.on('ready', function() {
           // jQuery('select.attachment-filters [value="uploaded"]').attr( 'selected', true ).parent().trigger('change');
            //「この投稿への画像」をデフォルト表示　不要ならコメントアウト
        });
        custom_uploader.on('select', function() {
            var images = custom_uploader.state().get('selection'),
                ex_ul = jQuery('#myupload_images'),
                ex_id = 0,
                array_ids = [];
            if ( ex_ul[0] ){ //すでに登録されている画像を配列に格納
                ex_ul.children('li').each( function( ){
                    ex_id = Number(jQuery(this).attr( 'id' ).slice(4));
                    array_ids.push( ex_id );
                });
            }
            console.log(images);
            images.each(function( file ){
                new_id = file.toJSON().id;
                if ( jQuery.inArray( new_id, array_ids ) > -1 ){ //投稿編集画面のリストに重複している場合、削除
                    ex_ul.find('li#img_'+ new_id).remove();
                }
                ex_ul.append('<li class="img" id=img_'+ new_id +'></li>').find('li:last').append(
                    '<span class="img_wrap">' +
                    '<a href="#" class="myupload_images_remove" title="画像を削除する"></a>' +
                    '<img src="'+file.attributes.sizes.thumbnail.url+'" />' +
                    '<input type="hidden" name="myupload_images[]" value="'+ new_id +'" />' +
                    '</span>'
                );
            });
        });
        custom_uploader.open();
    });
    jQuery( ".myupload_images_remove" ).live( 'click', function( e ) {
        e.preventDefault();
        e.stopPropagation();
        img_obj = jQuery(this).parents('li.img').remove();
    });
    jQuery( "#myupload_images" ).sortable({
        axis : 'y',
        cursor : "move",
        tolerance : "pointer",
        opacity: 0.6
    });
});
</script>
 
 
<?php }
   
/*データ更新時の保存*/
function save_myupload_postmeta( $post_id ){
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
    return $post_id; // 自動保存ルーチンの時は何もしない
    if (!wp_verify_nonce($_POST['myupload_postmeta_nonce'], basename(__FILE__)))
    return $post_id; // wp-nonceチェック
    if ( 'page' == $_POST['post_type'] ) {
        if ( !current_user_can( 'edit_page', $post_id ) ) // パーミッションチェック
        return $post_id;
    } else {
        if ( !current_user_can( 'edit_post', $post_id ) ) // パーミッションチェック
        return $post_id;
    }
    $new_images = isset($_POST['myupload_images']) ? $_POST['myupload_images']: null; //POSTされたデータ
    $ex_images = get_post_meta( $post_id, 'myupload_images', true ); //DBのデータ
    if ( $ex_images !== $new_images ){
        if ( $new_images ){
            update_post_meta( $post_id, 'myupload_images', $new_images ); // アップデート
        } else {
            delete_post_meta( $post_id, 'myupload_images', $ex_images );
        }
    }
}
?>

これでサイドバーにメタボックスが表示されて画像をアップロードできます。
欲をいえば直接ドラッグ＆ドロップで画像をアップロードできるように処理できるようにしたかったですね。