Hiển thị Trình tải lên Phương tiện trong Plugin riêng trên Wordpress 3.5

Tôi có một chút vấn đề với Media Uploader trong WordPress 3.5 mới. Tôi đã tạo plugin riêng đang tải lên hình ảnh. Tôi đang sử dụng mã này:

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

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

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

Mã này hoạt động tốt, nhưng không may các hình thức xuất hiện không đầy đủ. Khi tôi chọn bất kỳ ảnh nào không hiển thị cho tôi 'Cài đặt hiển thị tệp đính kèm' ở bên phải. Tôi không biết tại sao. Tôi thử thêm tùy chọn vào phương tiện:

displaySettings: true,
displayUserSettings: true

Nhưng nó cũng không hoạt động.

Chỉ người tải lên

bên dưới một mã ví dụ, chỉ hoạt động trên trang chỉnh sửa bài. Nếu bạn cũng sẽ sử dụng trên trang khác, sau đó bao gồm chức năng wp_enqueue_media(), xem tiêu đề tiếp theo.

jQuery(document).ready(function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {

    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Giải thích ngắn gọn về Media Manager

1. Đầu tiên bao gồm các tập lệnh có liên quan, sử dụng chức năng cốt lõi: wp_enqueue_media(); Chức năng thiết lập tất cả các cài đặt có liên quan, bản địa hóa văn bản menu và tải trong tất cả các tệp javascript thích hợp.

   Bạn có thể thêm tập lệnh tùy chỉnh thông qua wp_enqueue_script().

   // Also adds a check to make sure `wp_enqueue_media` has only been called once.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();

   Thêm một tập lệnh mặc định cho tiêu đề tùy chỉnh: wp_enqueue_script( 'custom-header' ); Điều này tạo ra khung chọn hình ảnh và liên kết nó với một thành phần giao diện, ví dụ như một nút hoặc liên kết. Sau đó, nó gọi một url hoặc lựa chọn của chúng tôi với id hình ảnh được chọn. Đây là cùng một kịch bản được sử dụng khi chọn hình ảnh tiêu đề tùy chỉnh chủ đề.

2. Thêm nút vào trình quản lý phương tiện:

   <?php
   $modal_update_href = esc_url( add_query_arg( array(
       'page'     => 'my_media_manager',
       '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
   ), admin_url( 'upload.php' ) ) );
   ?>
   
   <p>
   <a id="choose-from-library-link" href="#"
       data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
       data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
       data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
   </a> |
   </p>

3. Xác định chức năng hành động cuối cùng, bạn cần thêm một số mã để xử lý id hình ảnh mà chúng tôi sẽ chuyển đến url liên kết cập nhật dữ liệu.

   // Add to the top of our data-update-link page
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Process and save the image id
       $options = get_option( 'my_media_manager_options', TRUE );
       $options['default_image'] = absint( $_REQUEST['file'] );
       update_option( 'my_media_manager_options', $options );
   }

Nguồn và gợi ý:

• http://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/
• http://mikejcar.com/2012/12/USE-the-new-wordpress-3-5-media-uploader-in-plugins/
• https://github.com/AgencyPMG/PMG-WP-Core/commit/6a5a1ee818b9a8f03bf7df6e9f16b118f999355c
• Móc lọc và hành động: http://core.trac.wordpress.org/ticket/22186#comment:46

Tôi cũng đã đặt câu trả lời trong trang web stackoverflow.com và điều đó sẽ giúp ích.

Tôi đang sử dụng phương pháp này để sử dụng trình tải lên phương tiện vào plugin tùy chỉnh của mình. Có thể đây sẽ là trợ giúp.

trong tệp chủ đề chính (index.php) thêm chúng.

wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');

Trong tệp admin_script.js ,

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

tệp quản trị (admin_sinstall.php),

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />

Thêm chi tiết trong blog của tôi

Thêm thông tin http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Chỉ cần sử dụng mã này để tải lên phương tiện truyền thông. bạn có liên kết trong phản ứng jquery.

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>