3.5 Wordpress媒體上傳器手動執行

Question

我有問題了解如何實現新的WP媒體上傳器到我的主題選項頁面。是否有關於如何做到這一點的文檔或什麼是如此的解釋？我已經看到了一些如何做到這一點的示例，但沒有一個關於它們的代碼有任何好的解釋。是否有選項列表如何自定義媒體上傳框架？我的意思是，那豈不是很好，如果你可以做這樣的事情（見//創建媒體框架）：

// Uploading files 
var file_frame; 
jQuery('.upload_image_button').live('click', function() { 
    // If the media frame already exists, reopen it. 
    if (file_frame) { 
     file_frame.open(); 
     return; 
    } 

    // Create the media frame. 
    file_frame = wp.media.frames.file_frame = wp.media({ 
     title: 'My frame title', 
     button: { 
      text: 'My button text', 
     }, 
     id: 'logo-frame', 
     multiple: false, 

     editing_sidebar: false, // Just added for example 
     default_tab: 'upload', // Just added for example 
     tabs: 'upload, library', // Just added for example 
     returned_image_size: 'thumbnail' // Just added for example 


    }); 

    // When an image is selected, run a callback. 
    file_frame.on('select', function() { 
     var attachment; 
     // We set multiple to false so only get one image from the uploader 
     attachment = file_frame.state().get('selection').first().toJSON(); 

     // Do something with attachment.id and/or attachment.url here 

    }); 

    // Finally, open the modal 
    file_frame.open(); 
    return false 
}); 

Answer 1

對於WP 3.5，你可以使用新媒體上傳。我希望你知道你在做什麼。這個想法是調用wp_enqueue_script（這隻適用於WP> = 3.5 btw）。一旦腳本被調用，您可以操作JavaScript對象。你必須做一些檢查才能看到你的全套選項。

首先，你必須排隊腳本：

add_action('wp_enqueue_scripts', 'front_upload_enqueues'); 
function front_upload_enqueues() { 
    wp_register_script('uploads', 
     // path to upload script 
     get_template_directory_uri().'/lib/js/media-upload.js' 
    ); 
    wp_enqueue_script('uploads'); 
    if (function_exists('wp_enqueue_media')) { 
     // this enqueues all the media upload stuff 
     wp_enqueue_media(); 
    } 
} 

然後，你必須添加的JavaScript（jQuery的在我的情況）：

jQuery(document).ready(function($){ 
    var frame; 
    /* 
    * Upload button click event, which builds the choose-from-library frame. 
    * 
    */ 
    $('.form-table').on('click', '.member-upload-field .btn-upload', function(event) { 
     var $el = $(this); 
     event.preventDefault(); 

     // Create the media frame. 
     frame = wp.media.frames.customHeader = wp.media({ 
      title: $el.data('choose'), 
      library: { // remove these to show all 
       type: 'image', // specific mime 
       author: userSettings.uid // specific user-posted attachment 
      }, 
      button: { 
       text: $el.data('update'), // button text 
       close: true // whether click closes 
      } 
     }); 

     // When an image is selected, run a callback. 
     frame.on('select', function() { 
      // Grab the selected attachment. 
      var attachment = frame.state().get('selection').first(), 
       link = $el.data('updateLink'); 

      $el.prev('input').val(attachment.attributes.id); 
      $el.parent().prev().find('img').attr('src', attachment.attributes.url); 
     }); 

     frame.open(); 
    }); 

});