填写您的邮件地址,订阅我们的精彩内容:

如何在WordPress后台使用新的媒体管理器上传图片到指定的input中

WordPress3.5之后使用了新的媒体管理器,不同于之前使用弹窗+iframe的方式打开,新的媒体管理面板美观大气,且效率更高。那么如何在自己的开发中,在后台使用这个新的面板呢?

其实方法简单的不能再简单了,通过简单的代码脚本控制即可实现。当然,你得有一定的开发基础,否则有些地方可能还是无法理解。

1.载入媒体管理器

无论是你的插件,还是你的主题开发文件中,使用下面的代码,在进入后台的时候即可发现媒体面板的所有脚本和样式都载入了。

add_action('admin_init','load_media_style_script');
function load_media_style_script(){
? add_action('admin_enqueue_scripts','load_media_style_script_init');
}
function load_media_style_script_init() {
? global $wp_version;
? if(function_exists('wp_enqueue_media') && $wp_version >= 3.5) {
??? wp_enqueue_media();
? }
? else {
??? wp_enqueue_script('media-upload');
??? wp_enqueue_script('thickbox');
??? wp_enqueue_style('thickbox');
? }
? wp_register_script('admin_options_media_uploader',get_template_directory_uri().'/admin-options/js/uploader.js');
? wp_enqueue_script('admin_options_media_uploader');

? wp_enqueue_style('media');
}

红色的部分注意,你需要建立一个js文件,当然,它的具体位置你可以根据实际情况进行修改,实际上也可以不用建立,如果你可以直接在页面中加入这段脚本,可以直接在后台某个页面的html中混入这部分代码。具体代码在下面的3中会讲。

但其实,你可能更希望在某一个菜单中才使用,而不是全局都使用,可以把上面第一行加入到菜单的初始函数中,例如把上面第一行改为下面的代码:

add_action('admin_menu','my_theme_page');
function my_theme_page() {
  $admin_options_page = basename(__FILE__);
? if(@$_GET['page'] == $admin_options_page) {
??? add_action('admin_enqueue_scripts',array('AdminOptions','scripts_init'));
? }
? add_theme_page('Theme Options','Theme Options','edit_themes',$admin_options_page,'admin_options_display');
}
function admin_options_display() {
  // 这个地方用来显示菜单下的内容
}

把上面两段代码融合在一起,就可以让后台某个菜单下载入媒体管理器的脚本和样式了。

2.合理的触发按钮

在后台要放置一个触发按钮,这个按钮的功能有两个作用,一个是打开媒体面板,另一个功能还要告诉媒体管理器要把图片插入到哪个input中。因此,我把input和button搭配起来使用:

<input type="text" name="logo" class="regular-text" id="admin-options-logo">
<button class="button upload-media" data-insert-to="#admin-options-logo">上传</button>

红色的部分,.upload-media这个css类用来作为点击弹出媒体管理器的触发类,后面的data-insert-to属性用来告诉媒体管理器要插入到哪个input(textarea)中,其值为css选择器。

2014-11-08-163436

3.通过脚本来实现整个过程

通过点击上面创建的“上传”按钮,就可以打开媒体控制面板。在选择某一个图片或文件的时候,点击确定按钮,可以把选择的图片的URL再放入上面的input#admin-opitions-logo中。

jQuery(function($) {
?? //uploading files variable
?? var custom_file_frame;
?? jQuery(document).on('click', '.upload-media', function(event) {
???? var $this = $(this);
????? event.preventDefault();
????? //If the frame already exists, reopen it
????? if (typeof(custom_file_frame)!=="undefined") {
???????? custom_file_frame.close();
????? }

????? //Create WP media frame.
????? custom_file_frame = wp.media.frames.customHeader = wp.media({
???????? //Title of media manager frame
???????? title: "Upload or Select one", // 媒体管理器打开后,顶部的标题
???????? library: {
??????????? type: 'image'
???????? },
???????? button: {
??????????? //Button text
??????????? text: "Use It" // 媒体管理器确定按钮中要显示的文字
???????? },
???????? //Do not allow multiple files, if you want multiple, set true
???????? multiple: false
????? });

????? //callback for selected image
????? custom_file_frame.on('select', function() {
???????? var attachment = custom_file_frame.state().get('selection').first().toJSON();
???????? //do something with attachment variable, for example attachment.filename
???????? //Object:
???????? //attachment.alt - image alt
???????? //attachment.author - author id
???????? //attachment.caption
???????? //attachment.dateFormatted - date of image uploaded
???????? //attachment.description
???????? //attachment.editLink - edit link of media
???????? //attachment.filename
???????? //attachment.height
???????? //attachment.icon - don't know WTF?))
???????? //attachment.id - id of attachment
???????? //attachment.link - public link of attachment, for example ""http://site.com/?attachment_id=115""
???????? //attachment.menuOrder
???????? //attachment.mime - mime type, for example image/jpeg"
???????? //attachment.name - name of attachment file, for example "my-image"
???????? //attachment.status - usual is "inherit"
???????? //attachment.subtype - "jpeg" if is "jpg"
???????? //attachment.title
???????? //attachment.type - "image"
???????? //attachment.uploadedTo
???????? //attachment.url - http url of image, for example "http://site.com/wp-content/uploads/2012/12/my-image.jpg"
???????? //attachment.width
         // 通过调用不同的值来搞定你想要实现的功能。
???????? var url = attachment.url;
???????? jQuery($this.attr('data-insert-to')).val(url);
????? });

????? //Open modal
????? custom_file_frame.open();
?? });
});

你可以根据自己的情况来修改上面的红色部分,基本上可以完成我们要的功能了。

2014-11-08-163623

从上面的代码可以看出,实际上WordPress的media管理器是非常灵活的,所要使用到的代码也非常简单,上面的1只是为了实现一些环境功能,如果排除掉这些的话,实际上真正起作用的代码是第三段。通过这个代码,你可以灵活的在WordPress后台添加上传和选择图片的按钮了。

下面我简单说几句