[英]WordPress 3.5 custom media upload for your theme options
最近發布了WordPress 3.5,我通過thickbox和window.send_to_editor
使用了WordPress媒體上傳系統,用於我的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)
。
你以一種無意的方式去做。 你的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();
});
如果您沒有在帖子編輯頁面上,請不要忘記使用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');
}
我對此代碼進行了一些修改,使其可以同時用於多個字段:
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
});
}
我沒有太多機會玩這個,但對於那些希望利用gallery元素的人來說,這段代碼應該讓你順利。
它只是一個起點 - 它只提供逗號分隔的圖像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列表填充輸入字段,按照它們在編輯器中設置的順序(使用新的拖放功能)。
該函數希望將短代碼發回以在主編輯器中放置,但我們不想這樣做,因此我們創建一個新對象,返回一個空白字符串以便插入。
另請注意,這不會處理如上所述插入單個圖像 - 它只是將其放入帖子編輯器中。 因此,嘗試組合兩個偵聽器,或刪除相應的選項卡。
編輯
花了一些時間查看核心,我認為使用這里列出的技術實際上可以更容易地完成整個過程,但正如您將要閱讀的那樣,當您重新打開時,我還沒有想出如何預先選擇圖像媒體經理。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.