在登录WordPress后顶部总有一个小小的工具栏(Adminbar),但您绝对不知道这里面还可以自定义出许多实用的效果!这篇文章将为您列举在修改顶部工具栏时的10多个小技巧。原文修改自techNerdia的《30+ WordPress Admin Bar Tips and Tricks》转载请注明出处。
请注意:以下代码均放至主题目录下的functions.php文件下,如果您在登录WP后台后依旧没有看到顶部工具栏,不如试试在主题文件中的footer.php里加入一行<?php wp_footer();?> 看看是否解决了问题。以下技巧在WordPress 3.4.1下测试通过,WP若无较大改动应该可以继续使用。
对所有用户和访客禁用顶部工具栏
一行代码搞定:
remove_action( 'init', '_wp_admin_bar_init' );
仅对管理员用户显示顶部工具栏
if ( !current_user_can( 'manage_options' ) ) { remove_action( 'init', '_wp_admin_bar_init' ); }
仅在后台显示顶部工具栏
或许我们在访问前台时可以不用看到它。
if ( is_admin() ) { remove_action( 'init', '_wp_admin_bar_init' ); }
仅在前台显示顶部工具栏
与上条相反的功能,仅仅加了个感叹号……
if ( !is_admin() ) { remove_action( 'init', '_wp_admin_bar_init' ); }
移除顶部工具栏28px的间距
某些博客的顶部工具栏前面还有一段空白,可用以下代码删除
function remove_adminbar_margin() { $remove_adminbar_margin = '<style type="text/css"> html { margin-top: -28px !important; } * html body { margin-top: -28px !important; } </style>'; echo $remove_adminbar_margin; } /* wp-admin area */ if ( is_admin() ) { remove_action( 'init', '_wp_admin_bar_init' ); add_action( 'admin_head', 'remove_adminbar_margin' ); } /* websites */ if ( !is_admin() ) { remove_action( 'init', '_wp_admin_bar_init' ); add_action( 'wp_head', 'remove_adminbar_margin' ); }
移除顶部工具栏上的WordPress Logo
function remove_wp_logo() { global $wp_admin_bar; $wp_admin_bar->remove_menu('wp-logo'); } add_action( 'wp_before_admin_bar_render', 'remove_wp_logo' );
移除顶部工具栏上的评论提示
评论提示是什么?就是那个在网站名右边的泡泡,不需要时可以关掉。
function remove_comment_bubble() { global $wp_admin_bar; $wp_admin_bar->remove_menu('comments'); } add_action( 'wp_before_admin_bar_render', 'remove_comment_bubble' );
移除顶部工具栏“新建”按钮
function disable_new_content() { global $wp_admin_bar; $wp_admin_bar->remove_menu('new-content'); } add_action( 'wp_before_admin_bar_render', 'disable_new_content' );
移除顶部工具栏“升级”按钮
在插件或主题有新版本时会自动提示,可直接关闭。
function disable_bar_updates() { global $wp_admin_bar; $wp_admin_bar->remove_menu('updates'); } add_action( 'wp_before_admin_bar_render', 'disable_bar_updates' );
在顶部工具栏添加一个带链接的按钮
function custom_adminbar_menu( $meta = TRUE ) { global $wp_admin_bar; if ( !is_user_logged_in() ) { return; } if ( !is_super_admin() || !is_admin_bar_showing() ) { return; } $wp_admin_bar->add_menu( array( 'id' => 'custom_menu', 'title' => __( 'Menu Name' ), /* 这里是按钮的名称 */ 'href' => 'http://google.com/', /* 注意改里面的链接 */ 'meta' => array( target => '_blank' ) ) ); } add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 ); /* add_action后面的15是按钮的位置,具体修改看下 10 = 在WP Logo之前 15 = 在WP Logo之后 25 = 在网站名称之后 100 = 最后 */
在顶部工具栏添加一个带下滑链接的按钮
类似于这样:
function custom_adminbar_menu( $meta = TRUE ) { global $wp_admin_bar; if ( !is_user_logged_in() ) { return; } if ( !is_super_admin() || !is_admin_bar_showing() ) { return; } $wp_admin_bar->add_menu( array( 'id' => 'custom_menu', 'title' => __( 'Menu Name' ) ) /* 更改按钮名称 */ ); $wp_admin_bar->add_menu( array( 'parent' => 'custom_menu', 'id' => 'custom_links', 'title' => __( 'Google'), /*更改链接 */ 'href' => 'http://google.com/', /* 更改链接地址 */ 'meta' => array( target => '_blank' ) ) ); } add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 ); /* 15的修改方法和上面一样 */
更换顶部工具栏的WP Logo
图片最好为png格式:
function add_mysites_logo() { global $wp_admin_bar; foreach ( (array) $wp_admin_bar->user->blogs as $blog ) { $menu_id = 'blog-' . $blog->userblog_id; $blogname = emptyempty( $blog->blogname ) ? $blog->domain : $blog->blogname; $blavatar = '<img src="' . get_bloginfo('template_directory') . '/images/NEW-ICON-HERE.png" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>'; /* /images/NEW-ICON-HERE.png 请自行修改 */ $wp_admin_bar->add_menu( array( 'parent' => 'my-sites-list', 'id' => $menu_id, 'title' => $blavatar . $blogname, 'href' => get_admin_url( $blog->userblog_id ) ) ); } } add_action( 'wp_before_admin_bar_render', 'add_mysites_logo' );
让顶部工具栏有透明效果
比较炫,透明度可随意调整。
function adminbar_opacity() { $adminbar_opacity = '<style type="text/css">#wpadminbar { filter:alpha(opacity=50); opacity:0.5; }</style>'; echo $adminbar_opacity; } /* wp-admin area */ if ( is_admin() ) { add_action( 'admin_head', 'adminbar_opacity' ); } /* websites */ if ( !is_admin() ) { add_action( 'wp_head', 'adminbar_opacity' ); }
只在鼠标移至顶部时显示工具栏
function hide_adminbar() { $hide_adminbar = '<script type="text/javascript"> $(document).ready( function() { $("#wpadminbar").fadeTo( "slow", 0 ); $("#wpadminbar").hover(function() { $("#wpadminbar").fadeTo( "slow", 1 ); }, function() { $("#wpadminbar").fadeTo( "slow", 0 ); }); }); </script> <style type="text/css"> html { margin-top: -28px !important; } * html body { margin-top: -28px !important; } #wpadminbar { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; } #wpadminbar:hover, #wpadminbar:focus { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; } </style>'; echo $hide_adminbar; } /* wp-admin area */ if ( is_admin() ) { add_action( 'admin_head', 'hide_adminbar' ); } /* websites */ if ( !is_admin() ) { add_action( 'wp_head', 'hide_adminbar' ); }
更改顶部工具栏的颜色
基本上需要改的都写上了,本代码预置的颜色为蓝色。
function change_adminbar_colors() { $change_adminbar_colors = '<style type="text/css"> #wpadminbar *, #wpadminbar{ color:#ffffff;text-shadow:#444444 0 -1px 0; } #wpadminbar{ background-color:#003399; background-image:-ms-linear-gradient(bottom,#000033,#003399 5px); background-image:-moz-linear-gradient(bottom,#000033,#003399 5px); background-image:-o-linear-gradient(bottom,#000033,#003399 5px); background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399)); background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px); background-image:linear-gradient(bottom,#000033,#003399 5px); } /* menu separators */ #wpadminbar .quicklinks>ul>li{border-right:1px solid #003399;} #wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.ab-emptyempty-item{border-right:1px solid #000033;} #wpadminbar .quicklinks .ab-top-secondary>li{border-left:1px solid #000033;} #wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar .quicklinks .ab-top-secondary>li>.ab-emptyempty-item{border-left:1px solid #003399;} /* menu hover color and hover link color */ #wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item{background:#333333;color:#ffffff;} #wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ab-label{color:#ffffff;} #wpadminbar .menupop.hover .ab-label{color:#ffffff;} /* menu, on mouse over hover colors */ #wpadminbar .ab-top-menu>li:hover>.ab-item,#wpadminbar .ab-top-menu>li.hover>.ab-item,#wpadminbar .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus{ color:#fafafa; background-color:#000033; background-image:-ms-linear-gradient(bottom,#003399,#000033); background-image:-moz-linear-gradient(bottom,#003399,#000033); background-image:-o-linear-gradient(bottom,#003399,#000033); background-image:-webkit-gradient(linear,left bottom,left top,from(#003399),to(#003399)); background-image:-webkit-linear-gradient(bottom,#003399,#000033); background-image:linear-gradient(bottom,#003399,#000033); } /* menu item links hover color */ #wpadminbar .menupop li:hover,#wpadminbar .menupop li.hover,#wpadminbar .quicklinks .menupop .ab-item:focus,#wpadminbar .quicklinks .ab-top-menu .menupop .ab-item:focus{background-color:#ccffcc;} /* menu item non-link colors */ #wpadminbar .ab-submenu .ab-item{color:#333333;} /* menu item link colors */ #wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#0099cc;} /* my sites hover color */ #wpadminbar .quicklinks .menupop .ab-sub-secondary>li:hover,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li.hover,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li .ab-item:focus{background-color:#dfdfdf;} /* update menu colors */ #wpadminbar .quicklinks a span#ab-updates{background:#eeeeee;color:#333333;} #wpadminbar .quicklinks a:hover span#ab-updates{background:#ffffff;color:#000000;} /* howdy menu */ #wpadminbar .ab-top-secondary{ background-color:#003399; background-image:-ms-linear-gradient(bottom,#000033,#003399 5px); background-image:-moz-linear-gradient(bottom,#000033,#003399 5px); background-image:-o-linear-gradient(bottom,#000033,#003399 5px); background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399)); background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px); background-image:linear-gradient(bottom,#000033,#003399 5px); } /* Howdy menu, username text color in dropdown */ #wpadminbar #wp-admin-bar-user-info .display-name{color:#333333;} #wpadminbar #wp-admin-bar-user-info .username{color:#999999;} /* search */ #wpadminbar #adminbarsearch .adminbar-input{color:#ccc;text-shadow:#444 0 -1px 0;background-color:rgba(255,255,255,0);} #wpadminbar #adminbarsearch .adminbar-input:focus{color:#555;text-shadow:0 1px 0 #fff;background-color:rgba(255,255,255,0.9);} #wpadminbar.ie8 #adminbarsearch .adminbar-input{background-color:#003399;} #wpadminbar.ie8 #adminbarsearch .adminbar-input:focus{background-color:#fff;} #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder{color:#ddd;} #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder{color:#ddd;} </style>'; echo $change_adminbar_colors; } /* wp-admin area */ if ( is_admin() ) { add_action( 'admin_head', 'change_adminbar_colors' ); } /* websites */ if ( !is_admin() ) { add_action( 'wp_head', 'change_adminbar_colors' ); }
学习了,以后常来!
怎么指定作用用户组呢?例如如果我要针对编辑组添加子菜单的话。
学习学习
在顶部工具栏添加一个带链接的按钮
这个只能添加一个,添加两个就会出错,修改了不同的id也出错,是什么问题呀?
766057766@qq.com
这篇真的好详细,之前试了几个都无法移除有选项卡节点的下拉菜单。