WordPressのメディアピッカー(写真選択)を自作プラグインなどで使う方法

WordPressの「メディアを追加」ボタンで表示されるファイル選択画面を自作プラグインなどで呼び出して使いたい場合の方法です。

結論からいうとfunctions.phpでwp_enqueue_media();を実行し、以下のjsコードの#btnNameや日本語箇所を適宜変更し、admin_print_scriptsなどにフックするなりしてwordpressの管理画面に読み込めるようにしてください。

function my_load_media() {
	wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'my_load_media' );
var file_frame;

jQuery('#btnName').live('click', function(e){
	e.preventDefault();

	if ( file_frame ) {
		file_frame.open();
		return;
	}

	file_frame = wp.media.frames.file_frame = wp.media({
		title: 'ここが画像選択画面のタイトルになります',
		library: {
			type: 'image',
			author: userSettings.uid
		},
		button: {
			text: '選択ボタンの名称です',
                	close: true
		},
		multiple: false
	});

	//ファイル選択後の処理
	file_frame.on( 'select', function() {
		attachment = file_frame.state().get('selection').first().toJSON();
		console.log(attachment.id)
	});

	file_frame.open();
});

これで#btnNameで指定したボタンなどをクリックするとファイル選択画面が「画像選択モード」で立ち上がったと思います。

wp.mediaにはココで使用している以外にもオプションがあり、メディアピッカーを色々と制御できるようになるので興味のある方はお調べになってみてください。

ページの先頭へ