プラグインオプションページにインラインアップローダーを追加する
WPメディアライブラリの新しいメディアグリッドビューで紹介されているように、 インラインファイルアップローダ を私のプラグインのオプションページに実装したいと思います。
このドラッグ＆ドロップアップローダをページに入れて、使用時にエラーまたは添付データのJSONオブジェクトをJSに戻すことを想像します。
私の知る限りでは、wp.media.view.UploaderInlineにwp-includes/js/media-views.jsクラスが存在しますが、それを指定のマークアップと組み合わせて実装する方法はわかりません。
私が見つけた唯一のリソースは、ページにファイルをアップロードしたり追加したりするためのメディアモーダル（v3.5で導入された）の使い方に関するものです。ただし、メディアライブラリをその過程で表示したくないので、アップローダをインラインにするのが私の場合ははるかに良いでしょう。
軌道に乗るためにこれを実装したことがある人はいますか？
THX
さて、ここに私が思いついたものがあります：それは pluploadライブラリを使うことについてのすべて WPに同梱されています。
1.プラグインのオプションページに<div>を追加して、後でドラッグアンドドロップ領域にします。
<div class="your-plugin-uploader multiple">
<input id="your-plugin-uploader-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="your-plugin-uploader-button button">
<span class="ajaxnonce" id="<?php echo wp_create_nonce( __FILE__ ); ?>"></span>
</div>
2.プラグインのJSを登録し、plupload-allをスクリプトの依存関係として定義してください。
function se179618_admin_js() {
wp_register_script( 'your-plugin', WP_PLUGIN_URL . '/your-plugin/js/your-plugin.js', array( 'jquery', 'plupload-all' ) );
}
add_action( 'admin_enqueue_scripts', 'se179618_admin_js' );
3.ページの<head>にplupload設定を書き込みます
function se179618_admin_head() {
$uploader_options = array(
'runtimes' => 'html5,silverlight,flash,html4',
'browse_button' => 'my-plugin-uploader-button',
'container' => 'my-plugin-uploader',
'drop_element' => 'my-plugin-uploader',
'file_data_name' => 'async-upload',
'multiple_queues' => true,
'max_file_size' => wp_max_upload_size() . 'b',
'url' => admin_url( 'admin-ajax.php' ),
'flash_swf_url' => includes_url( 'js/plupload/plupload.flash.swf' ),
'silverlight_xap_url' => includes_url( 'js/plupload/plupload.silverlight.xap' ),
'filters' => array(
array(
'title' => __( 'Allowed Files' ),
'extensions' => '*'
)
),
'multipart' => true,
'urlstream_upload' => true,
'multi_selection' => true,
'multipart_params' => array(
'_ajax_nonce' => '',
'action' => 'my-plugin-upload-action'
)
);
?>
<script type="text/javascript">
var global_uploader_options=<?php echo json_encode( $uploader_options ); ?>;
</script>
<?php
}
add_action( 'admin_head', 'se179618_admin_head' );
4. AJAXアップローダによって呼び出されたアクションを追加します。
function se179618_ajax_action() {
// check ajax nonce
check_ajax_referer( __FILE__ );
if( current_user_can( 'upload_files' ) ) {
$response = array();
// handle file upload
$id = media_handle_upload(
'async-upload',
0,
array(
'test_form' => true,
'action' => 'my-plugin-upload-action'
)
);
// send the file' url as response
if( is_wp_error( $id ) ) {
$response['status'] = 'error';
$response['error'] = $id->get_error_messages();
} else {
$response['status'] = 'success';
$src = wp_get_attachment_image_src( $id, 'thumbnail' );
$response['attachment'] = array();
$response['attachment']['id'] = $id;
$response['attachment']['src'] = $src[0];
}
}
echo json_encode( $response );
exit;
}
add_action( 'wp_ajax_my-plugin-upload-action', 'se179618_ajax_action' );
5.プラグインのJSでアップローダを起動します
jQuery( document ).ready( function() {
if( jQuery( '.your-plugin-uploader' ).length > 0 ) {
var options = false;
var container = jQuery( '.your-plugin-uploader' );
options = JSON.parse( JSON.stringify( global_uploader_options ) );
options['multipart_params']['_ajax_nonce'] = container.find( '.ajaxnonce' ).attr( 'id' );
if( container.hasClass( 'multiple' ) ) {
options['multi_selection'] = true;
}
var uploader = new plupload.Uploader( options );
uploader.init();
// EVENTS
// init
uploader.bind( 'Init', function( up ) {
console.log( 'Init', up );
} );
// file added
uploader.bind( 'FilesAdded', function( up, files ) {
jQuery.each( files, function( i, file ) {
console.log( 'File Added', i, file );
} );
up.refresh();
up.start();
} );
// upload progress
uploader.bind( 'UploadProgress', function( up, file ) {
console.log( 'Progress', up, file )
} );
// file uploaded
uploader.bind( 'FileUploaded', function( up, file, response ) {
response = jQuery.parseJSON( response.response );
if( response['status'] == 'success' ) {
console.log( 'Success', up, file, response );
} else {
console.log( 'Error', up, file, response );
}
} );
}
} );
あなたがする必要がある最初の事はwp_enqueue_mediaを呼び出すことです。これに対する安全な場所は、admin_initアクションにあり、それを取り巻く条件付きです。
add_action( 'admin_init', function() {
$screen = get_current_screen();
if ( ! $screen || 'my-admin-page-slug' !== $screen->id ) {
return;
}
wp_enqueue_media();
} );
次に、管理者ページのコードに、インラインのJavaScriptを追加します（または、クリーンにしたい場合は、エンキューします）。
function my_admin_page_callback() {
...
?>
<a href="#" class="primary button upload">Upload</a>
<script type="text/javascript">
$('.upload.button').click(function(e) {
e.preventDefault();
var custom_uploader = wp.media({
title: 'Custom Title',
button: {
text: 'Custom Button Text'
},
multiple: false // Set this to true to allow multiple files to be selected
})
.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
// Do something with attachment.url;
// Do something with attachment.id;
})
.open();
});
</script>
<?php
...
}
ドラッグ＆ドロップボックスを入手するのは少し難しいかもしれませんが、自分で少し掘り下げると見つけることができるかもしれません。
これはwpバージョン4.7以上の例です。その作業は簡単です。このコードはデフォルトのWordpressの新しいページの追加（media-new.php）から直接取得したクローンスクリプトです。
function my_admin_enqueue_scripts() {
wp_enqueue_script('plupload-handlers');
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');
このHTMLをオプションページに追加してください。あなたがこのあなた自身の<form>要素の外側} _を守ることを忘れないでください。変数をグローバルな範囲外にするには、HTML出力を関数内にラップすることをお勧めします。この例では、すべての管理者ページに領域を表示するためにトップの管理者通知コンテナを貸しています。
function my_upload_new_media_html(){
/* everything is copied from media-new.php */
/* translated, and old browser option is there as well */
$title = __('Upload New Media');
$post_id = 0;
if(isset($_REQUEST['post_id'])){
$post_id = absint($_REQUEST['post_id']);
if(!get_post($post_id) || !current_user_can('edit_post', $post_id)) $post_id = 0;
}
if($_POST){
if(isset($_POST['html-upload']) && !empty($_FILES)){
check_admin_referer('media-form');
// Upload File button was clicked
$upload_id = media_handle_upload('async-upload', $post_id);
if(is_wp_error($upload_id)){
wp_die($upload_id);
}
}
wp_redirect(admin_url('upload.php'));
exit;
}
$form_class = 'media-upload-form type-form validate';
if(get_user_setting('uploader') || isset( $_GET['browser-uploader']))
$form_class .= ' html-uploader';
?>
<div class="wrap">
<h1><?php echo esc_html( $title ); ?></h1>
<form enctype="multipart/form-data" method="post" action="<?php echo admin_url('media-new.php'); ?>" class="<?php echo esc_attr( $form_class ); ?>" id="file-form">
<?php media_upload_form(); ?>
<script type="text/javascript">
var post_id = <?php echo $post_id; ?>, shortform = 3;
</script>
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>" />
<?php wp_nonce_field('media-form'); ?>
<div id="media-items" class="hide-if-no-js"></div>
</form>
</div>
<?php
}
add_action('all_admin_notices', 'my_upload_new_media_html');
そしてブーム、そこにあります。