在 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。