在 WordPress 3.5 的自己的插件中显示媒体上传器

问题描述

我在新版 WordPress 3.5 中的 Media Uploader 问题很少。我创建了自己的插件，上传图片。我使用这个代码 JS：

<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>

代码工作正常，但不幸的是，表单看起来不完整。当我选择任何图片不显示我的 「附件显示设置」 在右侧。我不知道为什么我尝试添加媒体选项：

displaySettings: true,
displayUserSettings: true

但它也不行。

最佳解决方案

只有上传者

下面的示例代码，仅在后编辑页面上工作。如果您还将在其他页面上使用，请包括功能 wp_enqueue_media()，请参阅下一个标题。

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;
  });

});

媒体经理的简短说明

1. 首先包括相关脚本，使用核心功能：wp_enqueue_media(); 该功能设置所有相关设置，本地化菜单文本，并加载所有相应的 javascript 文件。

   您可以通过 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();
   

   添加自定义标题的默认脚本：wp_enqueue_script( 'custom-header' ); 这将创建一个图像选择框架，并将其连接到界面元素，例如按钮或链接。然后它使用所选的图像 ID 调用 url 或我们的选择。这是选择主题自定义标题图像时使用的脚本。

2. 添加按钮到媒体管理器：

   <?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. 定义 Action 函数最后，您需要添加一些代码来处理我们将传递给 data-update-link url 的图像 ID 。

   // 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 );
   }
   

来源和提示：

• http://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/

• http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/

• https://github.com/AgencyPMG/PMG-WP-Core/commit/6a5a1ee818b9a8f03bf7df6e9f16b118f999355c

• 过滤器和动作钩：http://core.trac.wordpress.org/ticket/22186#comment:46

参考文献

• Display Media Uploader in Own Plugin on WordPress 3.5

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。