jQuery WordPress 3.5 自定义媒体上传为您的主题选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13847714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WordPress 3.5 custom media upload for your theme options
提问by Mattpx
WordPress 3.5 has been released recently, I used the WordPress Media Upload system via thickbox and window.send_to_editorfor some options in my WordPress theme (backgrounds, logos etc...).
WordPress 3.5 最近发布了，我通过thickbox 使用了WordPress 媒体上传系统以及window.send_to_editor我的WordPress 主题中的一些选项（背景、徽标等...）。
But as you know WordPress has integrated a new Media Manager, I wanted to used this new feature to upload images/files as custom fields. So I spent the morning to find a way to get the wished result.
但正如您所知，WordPress 集成了一个新的媒体管理器，我想使用这个新功能将图像/文件作为自定义字段上传。所以我花了一个上午的时间来寻找一种方法来获得想要的结果。
I found with this solution, which can be useful for some of you. Thanks to give me your feedback on the code or any improvements you have in mind!
我找到了这个解决方案，它对你们中的一些人很有用。感谢向我提供您对代码的反馈或您想到的任何改进！
HTML Sample:
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 Code:
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;
});
If you want to see every settings contained in the attachmentvariable you can do a console.log(attachment)or alert(attachment).
如果您想查看attachment变量中包含的每个设置，您可以执行 aconsole.log(attachment)或alert(attachment)。
采纳答案by Xaver
Don't forget to use wp_enqueue_media(new in 3.5) if you'r not on the post edit page
wp_enqueue_media如果您不在帖子编辑页面上，请不要忘记使用（3.5 中的新功能）
To use the old media upload box you can do this:
要使用旧的媒体上传框，您可以执行以下操作：
if(function_exists( 'wp_enqueue_media' )){
wp_enqueue_media();
}else{
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
回答by DiverseAndRemote.com
Your going about it in a way that was unintended. Your javascript code should probably look something like this:
你以一种意想不到的方式进行。你的 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();
});
回答by Phil Johnston
I modified this code a bit more to make it usable for multiple fields at once:
我稍微修改了此代码，使其可同时用于多个字段：
HTML:
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：
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;
});
});
回答by Xaver
I found nothing to trigger a custom function if the editor closes. I uses this:
如果编辑器关闭，我发现没有任何东西可以触发自定义函数。我用这个：
wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
//do some stuff
});
or better:
或更好：
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
});
}
回答by Mark
I haven't had much chance to play with this, but for those looking to leverage the gallery element, this code should set you on your way.
我没有太多机会来玩这个，但对于那些希望利用画廊元素的人来说，这段代码应该会让你走上正轨。
It is just a start point - it only provides a comma separated list of image id's, but that should be enough to start being creative.
这只是一个起点 - 它只提供一个逗号分隔的图像 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>
This will populate the input field with a comma separated list of the image id's, in the order they were set in the editor (using the new drag and drop functionality).
这将使用逗号分隔的图像 ID 列表填充输入字段，按照它们在编辑器中设置的顺序（使用新的拖放功能）。
The function expects the shortcode to be sent back for placement in the main editor, but we don't want to do this, so we create a new object that returns a blank string for insertion.
该函数希望将短代码发回以放置在主编辑器中，但我们不想这样做，因此我们创建了一个新对象，该对象返回一个空白字符串以进行插入。
Also note, this doesn't handle inserting a single image as described above - it'll just put it into the post editor. So try combining the two listeners, or remove the appropriate tabs.
另请注意，这不会处理如上所述插入单个图像 - 它只会将其放入帖子编辑器中。因此，尝试组合两个侦听器，或删除相应的选项卡。
EDIT
编辑
Having spent some time looking at the core, I think this whole process can actually be done easier using the technique laid out here, but as you'll read I haven't figured out yet how to pre-select the images when you reopen the media manager.
花了一些时间查看核心后，我认为使用此处列出的技术实际上可以更轻松地完成整个过程，但是正如您将阅读的那样，我还没有弄清楚如何在您重新打开媒体经理。
