在元箱中使用 WordPress 3.5 Media Uploader？

問題描述

這可以做嗎

我喜歡新上傳者的工作原理。我猜測它與 jQuery 呼叫有關，就像其他方式一樣。

編輯

這是我目前使用的程式碼

jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
    imageField = $(this).prev('input');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
});
window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
    $(imageField).val(imgurl);
    tb_remove();
};
$('.clear_field').click(function() {
    var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
    jQuery(this).parent().siblings('.custom_upload_image').val('');
    return false;
});
});

最佳解決方案

為了讓你開始，基本的功能和覆蓋，據我所知，目前可能會有更好的解決方案，但我只有兩天與 3.5 還：

// open modal - bind this to your button
    if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
        wp.media.editor.open( ##unique_id_here## );

// backup of original send function
   original_send = wp.media.editor.send.attachment;

// new send function
   wp.media.editor.send.attachment = function( a, b) {
       console.log(b); // b has all informations about the attachment
       // or whatever you want to do with the data at this point
       // original function makes an ajax call to retrieve the image html tag and does a little more
    };

// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility

// backup original window.send_to_editor
   window.original_send_to_editor = window.send_to_editor;

// override window.send_to_editor
   window.send_to_editor = function(html) {
       // html argument might not be useful in this case
       // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
   }

這不是完整的工作答案。你必須自己定義和跟蹤您的輸入欄位等。這只是讓你開始。如果你有更具體的問題，請問。

並確保在指令碼完成時重新分配原來的功能。

從評論中提取：

How can I listen to the close event of the lightbox?

// add listener:
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }

次佳解決方案

這是一個關於如何在主題選項中使用 WP 3.5 媒體上傳器的小型 tutorial 。這是我想出來的，它對我來說是完美的。讓我知道如果你想出了更好的解決方案。

這是我如何在主題選項中實現程式碼：

jQuery(document).ready(function($){
  $('.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', '');
  wp.media.editor.send.attachment = function(props, attachment){
    $("#"+id).val(attachment.url);
    wp.media.editor.send.attachment = send_attachment_bkp;
  }

  wp.media.editor.open(button);
  return false;

  });
});

更新

此程式碼僅適用於帖子編輯頁面。要使其在主題選項頁面上工作，您需要新增 wp_enqueue_media();

第三種解決方案

我做的幾乎一樣，它還沒有準備好但它的作品：

在 php 中：

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id

javascript：

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

window.send_to_editor = function (html) {
    var imgurl = jQuery('img', html).attr('src');
    console.log(jQuery('img', html));
    console.log(html);
    console.log(imgurl);
    // set the url as the value
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

這將使您能夠將影像 url(任意大小) 上傳併傳送到<input> 元素。我試圖做一個設定它，它的工作原理，只有我現在需要的是一個可靠的方式傳送附件 ID 到<input>

第四種方案

我認為 @janw 有一個完全正確的，但我無法做一件事情。 Jan 插入媒體庫按鈕：

do_action( 'media_buttons', 'default_featured_image' );

然後 pre-empts 的預設動作使用：

jQuery('#default_featured_image_button').click(function () {...

我遇到的問題是以這種方式插入媒體按鈕不會將一個”default_featured_image_button” 的 ID 分配給該連結。實際上它不會在插入的連結上新增任何 ID 。所以這是我做的，讓它上班。

我在我的輸入欄位之後新增了這個行到我的元框回撥函式：

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />

然後我排隊我的自定義 jquery 檔案和 thickbox css 檔案，也在我的 functions.php 檔案中，使用：

add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');

function jhsir_load_image_set_js() {
    wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
    wp_enqueue_style( 'thickbox' );
}

最後我的 image-set.js 檔案包含以下內容：

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

    var formfield = null;

    $('#upload_logo_button, #upload_background_button').click(function() {

        $('html').addClass('Image');

        formfield = $(this).prev('input').attr('name');
        formfield_id = $(this).prev('input').attr('id');

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        return false;
    });

    // user inserts file into post.
    // only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp normally handles the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( 'img', html).attr('src');

            $( "#" + formfield_id ).val(fileurl);

            tb_remove();

            $('html').removeClass('Image');
            formfield = null;
        } else {
            window.original_send_to_editor(html);
        }
    };
});

您將注意到，我使用變數儲存剛剛在呼叫 jQuery 的連結之前的輸入欄位的名稱和 ID 。這樣就可以在同一頁上重複使用這個程式碼。您只需要為所有按鈕分配一個類，或者像我一樣為 jquery 中的按鈕使用個別 ID 。我希望這可以幫助一個人，因為我的答案是我的。

參考文獻

Using WordPress 3.5 Media Uploader in meta box?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在元箱中使用 WordPress 3.5 Media Uploader？