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)
。
答案 0 :(得分:34)
你以一种无意的方式解决这个问题。你的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();
});
答案 1 :(得分:33)
如果您没有在帖子编辑页面上,请不要忘记使用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');
}
答案 2 :(得分:7)
我对此代码进行了一些修改,使其可以同时用于多个字段:
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;
});
});
答案 3 :(得分:4)
如果编辑器关闭,我发现什么都没有触发自定义功能。我用这个:
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
});
}
答案 4 :(得分:3)
我没有太多机会玩这个,但对于那些希望利用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列表填充输入字段,按照它们在编辑器中设置的顺序(使用新的拖放功能)。
该函数希望将短代码发回以在主编辑器中放置,但我们不想这样做,因此我们创建一个新对象,返回一个空白字符串以便插入。
另请注意,这不会处理如上所述插入单个图像 - 它只是将其放入帖子编辑器中。因此,尝试组合两个侦听器,或删除相应的选项卡。
修改
花了一些时间查看核心,我认为使用here所设定的技术实际上可以更轻松地完成整个过程,但正如您将要阅读的那样,我还没有弄清楚如何预先重新打开媒体管理器时选择图像。