如何在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选择器。

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(); ?? }); });

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

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

0

评论0

请先

没有账号? 注册  忘记密码?

社交账号快速登录