乌徒帮技术范儿WordPressWordPress使用 › WordPress新媒体管理界面添加修改选项,增加新的功能面板

WordPress新媒体管理界面添加修改选项,增加新的功能面板

分类:WordPress使用

由于新的插件开发中需要用到wordpress的媒体上传管理面板,因此特地对这个问题进行了研究。wordpress3.5之后媒体管理面板有了巨大的变化,用户体验倍增。但也是由于这个原因,导致老的弹窗方式还能使用,而新的管理面板接口又鲜为人知,所以在找资料过程中也很纠结。幸运的是,在一些网站中找到了相关的内容,据此我完成本文,希望对朋友们有所帮助。

修改媒体管理面板中的选项卡文字

在wordpress开发中,有的时候其实你希望为你的网站用户呈现不一样的内容。

function wpse85351_media_strings($strings) {
    // only for subscribers:
    if(!current_user_can('edit_posts')){
        // remove "mediaLibraryTitle"
        unset($strings["mediaLibraryTitle"]);
    }
    return $strings;
}
add_filter('media_view_strings','wpse85351_media_strings');

这里主要使用到media_view_strings这个HOOK,它主要用来呈现选项卡的文本。

删除某一个选项

而实际上,在某些情况下,你并不希望你的用户显示相册(所有图片),而只是让他可以上传而已,因此你可以尝试下面的代码。

function remove_medialibrary_tab($tabs){
  if ( !current_user_can( 'administrator' ) || !current_user_can( 'editor' ) || !current_user_can( 'contibutor' ) || !current_user_can( 'author' ) ) {
    unset($tabs['library']);
    return $tabs;
  } else {
    return $tabs;
  }
}
add_filter('media_upload_tabs','remove_medialibrary_tab');

if ( !current_user_can('upload_files') ){
    add_action('init', 'allow_user_to_upload');
}

function allow_user_to_upload() {
    $subscriber = get_role('subscriber');
    $subscriber->add_cap('upload_files');
}

本代码来自stackexchange社区,主要用到media_upload_tabs这个HOOK,它所要实现的就是在媒体管理面板中添加或修改某个选项。

当然,在这个基础上,你可以增加更多的判断,来确定让用户都能做什么事情。

增加一个选项卡

而在某些开发中,你愿意自己开发某一个功能,用来插入或实现某种功能,不妨试试这个功能。(话说,通过这个功能,我们就可以实现有缩进的wordpress代码插入了。)

// 在新媒体管理界面添加一个百度网盘的选项
add_filter('media_upload_tabs', 'wp_storage_to_pcs_media_tab' );
function wp_storage_to_pcs_media_tab($tabs){
    $newtab = array('file_from_pcs' => '百度网盘');
    return array_merge($tabs,$newtab);
}

用到了和上面同样的HOOK,但是不同的是,这个地方使用了array_merge函数,让$tabs增加一个选项。这样,当你打开媒体控制面板之后,就会多出一个名称为“百度网盘”的选项了。

为新增的选项卡创建功能

虽然上面一步已经添加了新的选项卡,但实际上,它什么都不能做,只是多一个选项卡而已,右边是一片空白的。

wordpress有一个奇怪的现象,在这个地方竟然要使用iframe,如下:

// 这个地方需要增加一个中间介wp_iframe,这样就可以使用wordpress的脚本和样式
add_action('media_upload_file_from_pcs', 'media_upload_file_from_pcs_iframe');
function media_upload_file_from_pcs_iframe() {
	wp_iframe('wp_storage_to_pcs_media_tab_box');
}
// 在上面产生的百度网盘选项中要显示出网盘内的文件
//add_action('media_upload_file_from_pcs','wp_storage_to_pcs_media_tab_box');
function wp_storage_to_pcs_media_tab_box() {
	// 在这里使用你的功能代码,注意,这里使用的代码显示的内容将被放在<body>之间,下面会提到不放在body之间的问题
}

上面提到,wordpress会把新增的内容放在iframe中,其实在上面的这个代码中,你还可以直接使用:

add_action('media_upload_file_from_pcs', 'wp_storage_to_pcs_media_tab_box');

这样就绕过了wp_iframe。这样的后果就是,你需要在wp_storage_to_pcs_media_tab_box函数中自己撰写js、css等,而不能使用wordpress本身的脚本和样式文件。当然,有的时候还是有用的。至于如何选择,你可以自己尝试。

将你面板中的内容添加到文本编辑器中:window.send_to_editor

在wordpress的javascript库中有一个函数用来实现向wp_editor(php)函数(用来打印文本编辑器)中插入内容的函数,即window.send_to_editor,网上关于它的讨论特别多。我们这里只是简单的使用它,不去探讨它的原理。

上文我们提到,我们希望通过在媒体编辑器中添加一段代码(如php),点击插入之后把这段代码插入到当前编辑的光标处。但我们不能直接使用window.send_to_editor,因为上面提到,我们自己创建的管理面板内容是被放在iframe中,因此,我们必须使用window.parent,代码如下:

$('#btn').click(function(){
	window.parent.send_to_editor($html);
	window.parent.tb_remove();
});

其中,$html可以是任意的html代码,它将被插入到当前的光标处。而第二句window.parent.tb_remove();则是插入之后要把媒体管理面板关闭。

好了,通过本文,我想你已经过可以理解新媒体管理面板的自定义问题了。如果你还不是很了解,可以跟随下面的这些参考文献了解更多。

http://sumtips.com/2012/12/add-remove-tab-wordpress-3-5-media-upload-page.html
https://gist.github.com/Fab1en/4586865
http://wordpress.stackexchange.com/questions/76980/add-a-menu-item-to-wordpress-3-5-media-manager
http://cantina.co/2012/05/15/tutorial-writing-a-wordpress-plugin-using-the-media-upload-tab-2/
http://wordpress.stackexchange.com/questions/76980/add-a-menu-item-to-wordpress-3-5-media-manager
http://stackoverflow.com/questions/5671550/jquery-window-send-to-editor
http://wordpress.stackexchange.com/questions/50873/how-to-handle-multiple-instance-of-send-to-editor-js-function
http://codeblow.com/questions/jquery-window-send-to-editor/
http://wordpress.stackexchange.com/questions/85351/remove-other-tabs-in-new-wordpress-media-gallery

function remove_medialibrary_tab($tabs){
  if ( !current_user_can( 'administrator' ) || !current_user_can( 'editor' ) || !current_user_can( 'contibutor' ) || !current_user_can( 'author' ) ) {
    unset($tabs['library']);
    return $tabs;
  } else {
    return $tabs;
  }
}
add_filter('media_upload_tabs','remove_medialibrary_tab');

if ( !current_user_can('upload_files') ){
    add_action('init', 'allow_user_to_upload');
}

function allow_user_to_upload() {
    $subscriber = get_role('subscriber');
    $subscriber->add_cap('upload_files');
}
填写个人信息,赶快回复吧!