WordPress的3.5自定义媒体上传为您的主题选项
WordPress的3.5最近已经发布，我通过thickbox和window.send_to_editor WordPress媒体上传系统在我的WordPress主题（背景，标志等）的一些选项。
但正如你所知，Wordpress已经集成了一个新的媒体pipe理器，我想用这个新function上传图片/文件作为自定义字段。 所以我花了早上find一个方法来获得希望的结果。
我发现与这个解决scheme，这可能对你们中的一些人有用。 感谢您向我提供关于代码的意见或任何改进意见！
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; });
如果您想查看attachmentvariables中包含的每个设置，您可以执行console.log(attachment)或alert(attachment) 。
如果你不在post编辑页面，不要忘了使用wp_enqueue_media （3.5中的新function）
要使用旧的媒体上传框，你可以这样做：
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; }); });
如果编辑器closures，我什么都没有发现触发自定义函数。 我使用这个：
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>
这将按照它们在编辑器中设置的顺序（使用新的拖放function）以逗号分隔的图像ID列表填充input字段。
该函数需要将短代码发送回主编辑器，但我们不想这样做，所以我们创build一个新的对象，返回一个空string用于插入。
另外请注意，这不会像上面描述的那样处理插入单个图像 – 它只是把它放到post编辑器中。 因此，请尝试组合这两个侦听器，或删除相应的选项卡。
编辑
花了一些时间看看核心，我认为整个过程实际上可以使用这里列出的技术来简化 ，但是当你读完之后，我还没有想到如何在重新打开的时候预先select图像媒体经理。
