某些时候,我们想在自己的页面插入媒体库中的图片等媒体,可以使用WordPress发布/编辑文章使用的那个控件。官方也有简单的使用教程,但并不能满足我的需求,各种搜索,整理如下。
比如,我为图片添加了一个额外属性,比如“图片来源”,在插入图片的时候如何将这个属性添加到文章页面中。它默认拼凑的HTML代码最终的效果是图片+说明,标题啊描述啊这些自带的属性也是不会给展示到文章页面中的,更别说我自己额外添加的“图片来源”了。(PS:添加属性使用的Filter是attachment_fields_to_edit)
这可怎么办?很显然的需要重写它插入这个动作函数,也就是有了图片信息的时候,最终插入到文章页面的HTML该由我自己拼。可它是什么我并不知道,各种搜索也少有资料。一翻折腾后才查到,插入到文章页面的方法是wp.media.editor.insert(html)执行,html是什么就插入什么。但我没有图片信息,无法增加我想增加的啊。再了解到,它默认插入的是数据其实是由wp.media.editor.send.attachment(props, attachment)来决定,props是对方方式、链接这些,attachment则是选中的图片的信息了。但是,额外添加的属性却是被放到一块并且被存储为原始HTML代码,你还得从里边匹配才得。
上边还看不到实际值,在右边很远的地方呢。
这特么,得出动正则大法才能把我需要的“原创拍摄”整出来啊。最终方案定了,覆盖它的wp.media.editor.send.attachment()方法,自己拼要插入的HTML代码。但是,你这只是插入图片需要这样,它这个控件可不单单是插入图片的,还有音频,视频,附件等等,非图片还是得用它原来的方案。因此,得分类讨论,只动图片这一类型。
/** * 重写编辑器准备图片的方法 */ ;jQuery(document).ready(function(e) { var _original = wp.media.editor.send.attachment; wp.media.editor.send.attachment = function(props, attachment) { console.log(props); console.log(attachment); if (attachment.type === 'image') { var source = ''; var HOME_URL = location.protocol + '//' + location.hostname; if (attachment.compat && attachment.compat.item) { var pattern = /\[image_source\]['|"][\s]*value=['|"](.*)['|"]/; var item = attachment.compat.item; var matchResult = item.match(pattern); source = matchResult ? matchResult[1] : ''; } var result = '<div class="article-body-img">'; result += '<img class="align' + props.align + '" src="' + attachment.url.replace(HOME_URL, '') + '" alt="' + (attachment.alt || '') + '" />'; result += '<small><em>' + (attachment.description || '') + ' <span class="photo-source">图片来源:' + source + '</span></em></small>'; result += '</div>'; return result; } else { return _original.apply(this, arguments); } } });
至此,为图片添加额外属性并插入到文章页面中解决。
上边是在插入这一块动的刀,但如何显示这个模态框呢?显示都显示不了变何插入呢。显示也简单,首先得在PHP中使用wp_enqueue_media()将所需要的Js+CSS+HTML引进来,再在Js中使用wp.media()创建一个对象,调用对象的open()方法即可。
var frame = null; var $add = jQuery('#add'); $add.click(function(e) { e.preventDefault(); if (frame) { frame.open(); return; } frame = wp.media.frames.frame = wp.media({ title: '选择或上传一张图片插入到该场景中', button: { text: '使用该图片' }, library: { orderby: 'date', order: 'DESC', type: 'image', } }); frame.on('select', function() { var media_id = frame.state().get('selection').first().toJSON().id; if (!media_id) { alert('错误!没有选择图片'); return; } jQuery.ajax({ url: $add.attr('data-url'), type: 'post', dataType: 'json', data: 'media_id=' + media_id + '&action=four_big_add_group_item', beforeSend: function() { LOADING.show('正在保存,请稍候...'); }, success: function(result) { console.log(result); if (result.code == 1) { location.reload(); } else { alert(result.msg); } }, error: function(xhr, statusText) { alert(statusText); }, complete: function() { LOADING.hide(); } }) }); frame.open(); });
以上是弄四大旗舰过程中,为场景添加图片的代码。关键是要找到它的API,在这里,“select”事件就是点了插入按钮后触发,触发后会关闭模态框,要阻止关闭,我测试那得重写close()方法,但你就无法关闭了,因此不可取。官方的文档没有介绍,我是看的一个插件里边的介绍。
以上是两点关于WordPress上传控件的使用。参考文档如下:
官方文档:https://codex.wordpress.org/Javascript_Reference/wp.media
介绍插件:https://github.com/ericandrewlewis/wp-media-javascript-guide
其他参考:
http://mikejolley.com/2012/12/21/using-the-new-wordpress-3-5-media-uploader-in-plugins/
http://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options
2016/02/17更新:
对于WP原始的插入图片,其实还是选择插入到媒体比较好,可以点击图片查看大图。但它是在当前页面打开,要查看文章剩下的内容还得点击后退,体验不佳。如何改成在新页面打开呢,也就是在a链接上添加一个target=”_blank”属性。可以仿着上边来,先保存原始的wp.media.editor.insert,再重写之将要插入的值添加这个属性即可。
var _insert = wp.media.editor.insert; wp.media.editor.insert = function(html) { _insert.call(html.replace(/<a href=/, '<a target="_blank" href=')); }