WordPress 3.5 自定義媒體上傳為您的主題選項

問題描述

WordPress 3.5 最近發佈，我使用 Wordpress Media Upload 系統通過 thickbox 和 window.send_to_editor 在我的 WordPress 主題 (背景，標誌等) 的一些選項。

但是，如您所知，Wordpress 已經集成了一個新的媒體管理器，我想使用這個新功能將圖像/文件上傳為自定義字段。所以我花了早晨找到一種方法來獲得希望的結果。

我找到了這個解決方案，這對你們中的一些有用。感謝您提供有關您的代碼或任何改進您的想法的反饋意見！

HTML 示例：

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

jQuery 代碼：

$('.custom_media_upload').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

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

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

如果要查看 attachment 變量中包含的每個設置，都可以使用 console.log(attachment)或 alert(attachment)。

祝你有美好的一天！

最佳解決方案

不要忘記使用 wp_enqueue_media(3.5 中的新功能)，如果您不在發佈編輯頁面

要使用舊媒體上傳框，您可以這樣做：

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

次佳解決方案

你以這種無意的方式去做。您的 JavaScript 代碼應該看起來像這樣：

$('.custom_media_upload').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Custom Title',
        button: {
            text: 'Custom Button Text'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    })
    .open();
});

第三種解決方案

我修改了這個代碼，使其可以一次性用於多個字段：

HTML：

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

jQuery 的：

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

$('.custom_media_upload').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

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

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});

第四種方案

如果編輯器關閉，我沒有發現任何觸發自定義功能的內容。我用這個：

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
    //do some stuff
});

或更好：

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on('close', function(){
        //do some stuff
    });
}

第五種方案

我沒有太多的機會玩這個，但是對於那些想要利用圖庫元素的人來説，這段代碼應該讓你有所進步。

它只是一個起點 – 它只提供一個逗號分隔的圖像 ID 列表，但這應該足以開始創意。

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

這將按照編輯器中設置的順序 (使用新的拖放功能)，以逗號分隔的圖像 ID 列表填充輸入字段。

該函數希望將短代碼發送回主編輯器中放置，但我們不想這樣做，因此我們創建一個新對象，返回一個空白字符串進行插入。

另請注意，這不會像上述那樣處理插入一個圖像 – 它只是將它放入後編輯器。所以嘗試組合兩個監聽器，或刪除相應的選項卡。

編輯

花了一些時間看核心，我認為這個整個過程實際上可以使用 here 設計的技術變得更加簡單，但正如你所看到的，當我重新打開媒體管理器時，我還沒有想到如何使用 pre-select 。

參考文獻

WordPress 3.5 custom media upload for your theme options

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

WordPress 3.5 自定義媒體上傳為您的主題選項