当前位置:首页>WordPress建站>WordPress开发>25+自定义WordPress顶部管理工具条的技巧

25+自定义WordPress顶部管理工具条的技巧

使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧。

custom-wordpress-bar-wpdaxue_com

注:如无特殊说明,请将下面的代码添加到主题的 functions.php  或者插件的函数文件中。

对所有用户和访客隐藏工具条

  1. /*
  2. * 对所有用户和访客隐藏工具条
  3. */
  4. add_filter('show_admin_bar', '__return_false');

只对管理员显示工具条

  1. /*
  2. * 只对管理员显示工具条
  3. */
  4. if ( !current_user_can( 'manage_options' ) ) {
  5. add_filter('show_admin_bar', '__return_false');
  6. }

只在后台隐藏工具条

  1. /*
  2. * 只在后台隐藏工具条
  3. */
  4. if ( is_admin() ) {
  5. remove_action( 'init', '_wp_admin_bar_init' );
  6. }

只在前台隐藏工具条

  1. /*
  2. * 只在前台隐藏工具条
  3. */
  4. if ( !is_admin() ) {
  5. add_filter('show_admin_bar', '__return_false');
  6. }

多站点管理后台隐藏工具条

  1. /*
  2. * 对多站点后台隐藏工具条
  3. */
  4. if ( is_network_admin() ) {
  5. remove_action( 'init', '_wp_admin_bar_init' );
  6. }

移除工具条占位高度

隐藏工具条以后,顶部可能会残留 28 像素的空白,你可以使用下面的代码删除空白。

  1. /*
  2. * 移除工具条占位空白
  3. */
  4. function remove_adminbar_margin() {
  5. $remove_adminbar_margin = '<style type="text/css">
  6. html { margin-top: -28px !important; }
  7. * html body { margin-top: -28px !important; }
  8. </style>';
  9. echo $remove_adminbar_margin;
  10. }
  11. /* 针对后台 */
  12. if ( is_admin() ) {
  13. remove_action( 'init', '_wp_admin_bar_init' );
  14. add_action( 'admin_head', 'remove_adminbar_margin' );
  15. }
  16. /* 针对前台 */
  17. if ( !is_admin() ) {
  18. add_filter('show_admin_bar', '__return_false');
  19. add_action( 'wp_head', 'remove_adminbar_margin' );
  20. }

移除工具条默认菜单

下面的代码可以移除WordPress顶部工具条的默认项目,请根据自己的需要选择

  1. function wpdaxue_admin_bar() {
  2. global $wp_admin_bar;
  3. $wp_admin_bar->remove_menu('wp-logo'); //移除Logo
  4. $wp_admin_bar->remove_menu('my-account'); //移除个人中心
  5. $wp_admin_bar->remove_menu('comments'); //移除评论
  6. $wp_admin_bar->remove_menu('my-sites'); //移除我的网站(多站点)
  7. $wp_admin_bar->remove_menu('site-name'); //移除网站名称
  8. $wp_admin_bar->remove_menu('new-content'); // 移除“新建”
  9. $wp_admin_bar->remove_menu('search'); //移除搜索
  10. $wp_admin_bar->remove_menu('updates'); //移除升级通知
  11. }
  12. add_action( 'wp_before_admin_bar_render', 'wpdaxue_admin_bar' );

添加一个简单的菜单

添加一个简单的菜单,并且在设置为新窗口打开

  1. /*
  2. * 添加一个简单的菜单
  3. * 自行修改 'title' 和 'href' 的值
  4. */
  5. function custom_adminbar_menu( $meta = TRUE ) {
  6. global $wp_admin_bar;
  7. if ( !is_user_logged_in() ) { return; }
  8. if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }
  9. $wp_admin_bar->add_menu( array(
  10. 'id' => 'custom_menu',
  11. 'title' => __( 'Menu Name' ),
  12. 'href' => 'http://google.com/',
  13. 'meta' => array( target => '_blank' ) )
  14. );
  15. }
  16. add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );
  17. /* add_action # 后面的数字表示位置:
  18. 10 = 在 Logo 的前面
  19. 15 = 在 logo 和 网站名之间
  20. 25 = 在网站名后面
  21. 100 = 在菜单的最后面
  22. */

添加一个菜单(只显示图标)

上面的例子是添加一个显示文字的链接,如果你只希望显示一个图标,可以使用下面的代码

  1. /*
  2. * Add Icons Instead of Text to the Main Admin Bar
  3. */
  4. function custom_adminbar_menu( $meta = TRUE ) {
  5. global $wp_admin_bar;
  6. if ( !is_user_logged_in() ) { return; }
  7. if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }
  8. $wp_admin_bar->add_menu( array(
  9. 'id' => 'custom_menu',
  10. 'title' => __( '<img src="http://domain.com/wp-content/themes/theme_name/images/wpdaxue-icon.gif" width="25" height="25" />' ),
  11. 'href' => 'https://www.wpdaxue.com/',
  12. 'meta' => array( target => '_blank' ) )
  13. );
  14. }
  15. add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );
  16. function custom_menu_css() {
  17. $custom_menu_css = '<style type="text/css">
  18. #wp-admin-bar-custom_menu img { margin:0 0 0 12px; } /** moves icon over */
  19. #wp-admin-bar-custom_menu { width:75px; } /** sets width of custom menu */
  20. </style>';
  21. echo $custom_menu_css;
  22. }
  23. add_action( 'admin_head', 'custom_menu_css' );

注意:第 9 行的 ‘id’ => ‘custom_menu’ 要和 17、18 行的 #wp-admin-bar-custom_menu  的后半段对应。同时注意修改第 10 行的图片链接。

添加后台管理菜单

通过下面的代码,可以添加任何左边菜单到顶部工具条,支持单站点和多站点模式。这里以“添加 主题编辑 ”为例,更换为其他菜单,请修改里面的 admin_url( ‘theme-editor.php’ )

  1. /*
  2. * 添加快捷菜单到 主题编辑 (支持单站点和多站点)
  3. */
  4. function add_theme_menu() {
  5. global $wp_admin_bar;
  6. if ( !is_user_logged_in() ) { return; }
  7. if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }
  8. if ( function_exists('is_multisite') && is_multisite() ) {
  9. $wp_admin_bar->add_menu( array(
  10. 'id' => 'theme-editor',
  11. 'title' => __('Edit Theme'),
  12. 'href' => network_admin_url( 'theme-editor.php' ) )
  13. );
  14. }else{
  15. $wp_admin_bar->add_menu( array(
  16. 'id' => 'theme-editor',
  17. 'title' => __('Edit Theme'),
  18. 'href' => admin_url( 'theme-editor.php' ) )
  19. );
  20. }
  21. }
  22. add_action( 'admin_bar_menu', 'add_theme_menu', 100 ); //关于数字 100 ,请查看上一条技巧

添加下拉菜单

添加下拉菜单到工具条,设置为 在新窗口或新标签打开

  1. /*
  2. * 添加下拉菜单
  3. * 修改菜单名、链接名和链接地址
  4. */
  5. function custom_adminbar_menu( $meta = TRUE ) {
  6. global $wp_admin_bar;
  7. if ( !is_user_logged_in() ) { return; }
  8. if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }
  9. $wp_admin_bar->add_menu( array(
  10. 'id' => 'custom_menu',
  11. 'title' => __( 'Menu Name' ) ) /* 设置菜单名 */
  12. );
  13. $wp_admin_bar->add_menu( array(
  14. 'parent' => 'custom_menu',
  15. 'id' => 'custom_links',
  16. 'title' => __( 'Google'), /* 设置链接名*/
  17. 'href' => 'http://google.com/', /* 设置链接地址 */
  18. 'meta' => array( target => '_blank' ) )
  19. );
  20. }
  21. add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );

添加包含多个链接的子菜单

  1. /*
  2. * 添加包含多个链接的子菜单,在新窗口打开链接
  3. * 请修改菜单名和链接地址
  4. */
  5. function custom_adminbar_menu( $meta = TRUE ) {
  6. global $wp_admin_bar;
  7. if ( !is_user_logged_in() ) { return; }
  8. if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }
  9. $wp_admin_bar->add_menu( array(
  10. 'id' => 'custom_menu',
  11. 'title' => __( 'Menu Name' ) ) /* 设子菜单名 */
  12. );
  13. /* sub-menu */
  14. $wp_admin_bar->add_menu( array(
  15. 'parent' => 'custom_menu',
  16. 'id' => 'custom_links',
  17. 'title' => __( 'Sub menu') ) /* 设置子菜单名 */
  18. );
  19. /* menu links */
  20. $wp_admin_bar->add_menu( array(
  21. 'parent' => 'custom_links',
  22. 'title' => 'Google', /* 设置链接名 */
  23. 'href' => 'http://google.com/', /* 设置链接地址 */
  24. 'meta' => array( target => '_blank' ) )
  25. );
  26. $wp_admin_bar->add_menu( array(
  27. 'parent' => 'custom_links',
  28. 'title' => 'Yahoo', /* 设置链接名 */
  29. 'href' => 'http://yahoo.com/', /* 设置链接地址 */
  30. 'meta' => array( target => '_blank' ) )
  31. );
  32. }
  33. add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );

在新窗口打开“访问站点”

默认的情况下,点击”访问网站“这个菜单时,是直接在本窗口打开的,你可以使用下面的代码让它默认在新窗口/标签 打开。

  1. /*
  2. * 新窗口打开:我的网站 > 网站名 > 访问网站
  3. */
  4. function my_site_links() {
  5. global $wp_admin_bar;
  6. foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
  7. $menu_id = 'blog-' . $blog->userblog_id;
  8. $wp_admin_bar->add_menu( array(
  9. 'parent' => $menu_id,
  10. 'id' => $menu_id . '-v',
  11. 'title' => __( 'Visit Site' ),
  12. 'href' => get_home_url( $blog->userblog_id, '/' ),
  13. 'meta' => array( target => '_blank' ) )
  14. );
  15. }
  16. }
  17. add_action( 'wp_before_admin_bar_render', 'my_site_links' );

隐藏“我的站点”的子菜单(多站点)

  1. /*
  2. * 移除多站点的“我的网站”的子菜单: 仪表盘、新文章、管理评论 和 访问文章
  3. */
  4. function remove_mysites_links () {
  5. global $wp_admin_bar;
  6. foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
  7. $menu_id_d = 'blog-' . $blog->userblog_id . '-d'; /* Dashboard var */
  8. $menu_id_n = 'blog-' . $blog->userblog_id . '-n'; /* New Post var */
  9. $menu_id_c = 'blog-' . $blog->userblog_id . '-c'; /* Manage Comments var */
  10. $menu_id_v = 'blog-' . $blog->userblog_id . '-v'; /* Visit Site var */
  11. $wp_admin_bar->remove_menu($menu_id_d); /* 移除 仪表盘 */
  12. $wp_admin_bar->remove_menu($menu_id_n); /* 移除 发布新文章 */
  13. $wp_admin_bar->remove_menu($menu_id_c); /* 移除 管理评论 */
  14. $wp_admin_bar->remove_menu($menu_id_v); /* 移除 访问网站 */
  15. }
  16. }
  17. add_action( 'wp_before_admin_bar_render', 'remove_mysites_links' );

添加子菜单到“我的站点”(多站点)

  1. /*
  2. * 添加子菜单到“我的网站”: Log Out, Media, Links, Pages, Appearance, Plugins, Users, Tools and Settings
  3. */
  4. function add_mysites_link () {
  5. global $wp_admin_bar;
  6. foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
  7. $menu_id = 'blog-' . $blog->userblog_id;
  8. /* Add a Log Out Link */
  9. $wp_admin_bar->add_menu( array(
  10. 'parent' => $menu_id,
  11. 'id' => $menu_id . '-logout',
  12. 'title' => __( 'Log Out' ),
  13. 'href' => get_home_url( $blog->userblog_id, '/wp-login.php?action=logout' ) )
  14. );
  15. /* Media Admin */
  16. $wp_admin_bar->add_menu( array(
  17. 'parent' => $menu_id,
  18. 'id' => $menu_id . '-media',
  19. 'title' => __( 'Media Admin' ),
  20. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/upload.php' ) )
  21. );
  22. /* Links Admin */
  23. $wp_admin_bar->add_menu( array(
  24. 'parent' => $menu_id,
  25. 'id' => $menu_id . '-links',
  26. 'title' => __( 'Links Admin' ),
  27. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/link-manager.php' ) )
  28. );
  29. /* Pages Admin */
  30. $wp_admin_bar->add_menu( array(
  31. 'parent' => $menu_id,
  32. 'id' => $menu_id . '-pags',
  33. 'title' => __( 'Pages Admin' ),
  34. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/edit.php?post_type=page' ) )
  35. );
  36. /* Appearance Admin */
  37. $wp_admin_bar->add_menu( array(
  38. 'parent' => $menu_id,
  39. 'id' => $menu_id . '-appearance',
  40. 'title' => __( 'Appearance' ),
  41. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/themes.php' ) )
  42. );
  43. /* Plugin Admin */
  44. $wp_admin_bar->add_menu( array(
  45. 'parent' => $menu_id,
  46. 'id' => $menu_id . '-plugins',
  47. 'title' => __( 'Plugin Admin' ),
  48. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/plugins.php' ) )
  49. );
  50. /* Users Admin */
  51. $wp_admin_bar->add_menu( array(
  52. 'parent' => $menu_id,
  53. 'id' => $menu_id . '-users',
  54. 'title' => __( 'Users Admin' ),
  55. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/users.php' ) )
  56. );
  57. /* Tools Admin */
  58. $wp_admin_bar->add_menu( array(
  59. 'parent' => $menu_id,
  60. 'id' => $menu_id . '-tools',
  61. 'title' => __( 'Tools Admin' ),
  62. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/tools.php' ) )
  63. );
  64. /* Settings Admin */
  65. $wp_admin_bar->add_menu( array(
  66. 'parent' => $menu_id,
  67. 'id' => $menu_id . '-settings',
  68. 'title' => __( 'Settings Admin' ),
  69. 'href' => get_home_url( $blog->userblog_id, '/wp-admin/options-general.php' ) )
  70. );
  71. }
  72. }
  73. add_action( 'wp_before_admin_bar_render', 'add_mysites_link' );

使用 Domain.com 作为显示名称(多站点)

默认情况下,多站点的网站名称都是显示“站点名”,如果你要显示为 Domain.com 这样的,可以使用下面的代码:

  1. /*
  2. * 以域名 to Domain.com 作为菜单名
  3. */
  4. function change_site_names() {
  5. global $wp_admin_bar;
  6. $blue_wp_logo_url = includes_url('images/wpmini-blue.png');
  7. $blavatar = '<img src="' . esc_url($blue_wp_logo_url) . '" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>';
  8. foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
  9. $menu_id = 'blog-' . $blog->userblog_id;
  10. $blogname = ucfirst( $blog->domain );
  11. $wp_admin_bar->add_menu( array(
  12. 'parent' => 'my-sites-list',
  13. 'id' => $menu_id,
  14. 'title' => $blavatar . $blogname,
  15. 'href' => get_admin_url( $blog->userblog_id ) )
  16. );
  17. }
  18. }
  19. add_action( 'wp_before_admin_bar_render', 'change_site_names' );

移除网站LOGO(多站点)

移除多站点下子站点的logo

  1. /*
  2. * Remove the WP Logo from the My Sites Menu
  3. */
  4. function remove_wplogo_mysites() {
  5. global $wp_admin_bar;
  6. foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
  7. $menu_id = 'blog-' . $blog->userblog_id;
  8. $blogname = emptyempty( $blog->blogname ) ? $blog->domain : $blog->blogname;
  9. $wp_admin_bar->add_menu( array(
  10. 'parent' => 'my-sites-list',
  11. 'id' => $menu_id,
  12. 'title' => $blogname,
  13. 'href' => get_admin_url( $blog->userblog_id ) )
  14. );
  15. }
  16. }
  17. add_action( 'wp_before_admin_bar_render', 'remove_wplogo_mysites' );

修改“我的站点”的logo(多站点)

将logo图片上传到 你主题的 images 文件夹,然后根据实际修改第 10 行的 NEW-ICON-HERE.png

  1. /*
  2. * Change the WP Logo Icon within the My Sites Menu to any icon you want
  3. * Update the NEW-ICON-HERE.png name to match the proper file name.
  4. */
  5. function add_mysites_logo() {
  6. global $wp_admin_bar;
  7. foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
  8. $menu_id = 'blog-' . $blog->userblog_id;
  9. $blogname = emptyempty( $blog->blogname ) ? $blog->domain : $blog->blogname;
  10. $blavatar = '<img src="' . get_bloginfo('template_directory') . '/images/NEW-ICON-HERE.png" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>';
  11. $wp_admin_bar->add_menu( array(
  12. 'parent' => 'my-sites-list',
  13. 'id' => $menu_id,
  14. 'title' => $blavatar . $blogname,
  15. 'href' => get_admin_url( $blog->userblog_id ) )
  16. );
  17. }
  18. }
  19. add_action( 'wp_before_admin_bar_render', 'add_mysites_logo' );

对访客显示工具条

对没有登录的访客也显示工具条

  1. /*
  2. * 对没有登录的访客显示工具条
  3. */
  4. add_filter( 'show_admin_bar', '__return_true' );

对已注销的用户创建一个菜单

  1. /*
  2. * Create a menu for Logged Out Users
  3. */
  4. function loggedout_menu( $meta = TRUE ) {
  5. global $wp_admin_bar;
  6. if ( is_user_logged_in() ) { return false; }
  7. $wp_admin_bar->add_menu( array(
  8. 'id' => 'custom_menu',
  9. 'title' => __( 'Menu Name' ),
  10. 'href' => 'http://google.com/',
  11. 'meta' => array( target => '_blank' ) )
  12. );
  13. }
  14. add_action( 'admin_bar_menu', 'loggedout_menu', 15 );

为已注销的用户添加“登录”链接

  1. /*
  2. * Add a Log In Link for Logged Out Users to the Admin Bar
  3. */
  4. function add_login_link( $meta = FALSE ) {
  5. global $wp_admin_bar, $blog_id;
  6. if ( is_user_logged_in() ) { return false; }
  7. $wp_admin_bar->add_menu( array(
  8. 'id' => 'custom_menu',
  9. 'title' => __( 'Login' ),
  10. 'href' => get_home_url( $blog_id, '/wp-login.php' ) )
  11. );
  12. }
  13. add_filter( 'show_admin_bar', '__return_true' ); /* turn on adminbar for logged out users */
  14. add_action( 'admin_bar_menu', 'add_login_link', 15 );

修改工具条的透明度

  1. /*
  2. * 修改工具条的透明度
  3. */
  4. function adminbar_opacity() {
  5. $adminbar_opacity = '<style type="text/css">#wpadminbar { filter:alpha(opacity=50); opacity:0.5; }</style>';
  6. echo $adminbar_opacity;
  7. }
  8. /* 后台*/
  9. if ( is_admin() ) {
  10. add_action( 'admin_head', 'adminbar_opacity' );
  11. }
  12. /* 前台 */
  13. if ( !is_admin() ) {
  14. add_action( 'wp_head', 'adminbar_opacity' );
  15. }

鼠标悬停时才显示工具条

隐藏工具条,当鼠标悬停在上面时才显示

  1. /*
  2. * Hide the WordPress Admin Bar with CSS, then display the Admin Bar on hover with CSS and jQuery
  3. */
  4. function hide_adminbar() {
  5. $hide_adminbar = '<script type="text/javascript">
  6. $(document).ready( function() {
  7. $("#wpadminbar").fadeTo( "slow", 0 );
  8. $("#wpadminbar").hover(function() {
  9. $("#wpadminbar").fadeTo( "slow", 1 );
  10. }, function() {
  11. $("#wpadminbar").fadeTo( "slow", 0 );
  12. });
  13. });
  14. </script>
  15. <style type="text/css">
  16. html { margin-top: -28px !important; }
  17. * html body { margin-top: -28px !important; }
  18. #wpadminbar {
  19. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  20. filter: alpha(opacity=0);
  21. -moz-opacity:0;
  22. -khtml-opacity:0;
  23. opacity:0;
  24. }
  25. #wpadminbar:hover, #wpadminbar:focus {
  26. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  27. filter: alpha(opacity=100);
  28. -moz-opacity:1;
  29. -khtml-opacity:1;
  30. opacity:1;
  31. }
  32. </style>';
  33. echo $hide_adminbar;
  34. }
  35. /* wp-admin area */
  36. if ( is_admin() ) {
  37. add_action( 'admin_head', 'hide_adminbar' );
  38. }
  39. /* websites */
  40. if ( !is_admin() ) {
  41. add_action( 'wp_head', 'hide_adminbar' );
  42. }

修改工具条的颜色

下面的例子是将工具条修改为“蓝色”,你可以通过修改颜色的值来改变颜色

  1. /*
  2. * Change the Admin Bar Color Scheme
  3. */
  4. function change_adminbar_colors() {
  5. $change_adminbar_colors = '<style type="text/css">
  6. #wpadminbar *, #wpadminbar{ color:#ffffff;text-shadow:#444444 0 -1px 0; }
  7. #wpadminbar{
  8. background-color:#003399;
  9. background-image:-ms-linear-gradient(bottom,#000033,#003399 5px);
  10. background-image:-moz-linear-gradient(bottom,#000033,#003399 5px);
  11. background-image:-o-linear-gradient(bottom,#000033,#003399 5px);
  12. background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399));
  13. background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px);
  14. background-image:linear-gradient(bottom,#000033,#003399 5px);
  15. }
  16. /* menu separators */
  17. #wpadminbar .quicklinks>ul>li{border-right:1px solid #003399;}
  18. #wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.ab-emptyempty-item{border-right:1px solid #000033;}
  19. #wpadminbar .quicklinks .ab-top-secondary>li{border-left:1px solid #000033;}
  20. #wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar .quicklinks .ab-top-secondary>li>.ab-emptyempty-item{border-left:1px solid #003399;}
  21. /* menu hover color and hover link color */
  22. #wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item{background:#333333;color:#ffffff;}
  23. #wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ab-label{color:#ffffff;}
  24. #wpadminbar .menupop.hover .ab-label{color:#ffffff;}
  25. /* menu, on mouse over hover colors */
  26. #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{
  27. color:#fafafa;
  28. background-color:#000033;
  29. background-image:-ms-linear-gradient(bottom,#003399,#000033);
  30. background-image:-moz-linear-gradient(bottom,#003399,#000033);
  31. background-image:-o-linear-gradient(bottom,#003399,#000033);
  32. background-image:-webkit-gradient(linear,left bottom,left top,from(#003399),to(#003399));
  33. background-image:-webkit-linear-gradient(bottom,#003399,#000033);
  34. background-image:linear-gradient(bottom,#003399,#000033);
  35. }
  36. /* menu item links hover color */
  37. #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;}
  38. /* menu item non-link colors */
  39. #wpadminbar .ab-submenu .ab-item{color:#333333;}
  40. /* menu item link colors */
  41. #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;}
  42. /* my sites hover color */
  43. #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;}
  44. /* update menu colors */
  45. #wpadminbar .quicklinks a span#ab-updates{background:#eeeeee;color:#333333;}
  46. #wpadminbar .quicklinks a:hover span#ab-updates{background:#ffffff;color:#000000;}
  47. /* howdy menu */
  48. #wpadminbar .ab-top-secondary{
  49. background-color:#003399;
  50. background-image:-ms-linear-gradient(bottom,#000033,#003399 5px);
  51. background-image:-moz-linear-gradient(bottom,#000033,#003399 5px);
  52. background-image:-o-linear-gradient(bottom,#000033,#003399 5px);
  53. background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399));
  54. background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px);
  55. background-image:linear-gradient(bottom,#000033,#003399 5px);
  56. }
  57. /* Howdy menu, username text color in dropdown */
  58. #wpadminbar #wp-admin-bar-user-info .display-name{color:#333333;}
  59. #wpadminbar #wp-admin-bar-user-info .username{color:#999999;}
  60. /* search */
  61. #wpadminbar #adminbarsearch .adminbar-input{color:#ccc;text-shadow:#444 0 -1px 0;background-color:rgba(255,255,255,0);}
  62. #wpadminbar #adminbarsearch .adminbar-input:focus{color:#555;text-shadow:0 1px 0 #fff;background-color:rgba(255,255,255,0.9);}
  63. #wpadminbar.ie8 #adminbarsearch .adminbar-input{background-color:#003399;}
  64. #wpadminbar.ie8 #adminbarsearch .adminbar-input:focus{background-color:#fff;}
  65. #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder{color:#ddd;}
  66. #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder{color:#ddd;}
  67. </style>';
  68. echo $change_adminbar_colors;
  69. }
  70. /* wp-admin area */
  71. if ( is_admin() ) {
  72. add_action( 'admin_head', 'change_adminbar_colors' );
  73. }
  74. /* websites */
  75. if ( !is_admin() ) {
  76. add_action( 'wp_head', 'change_adminbar_colors' );
  77. }

PHP类:只为管理员显示工具条(移除占位高度)

  1. /*
  2. * PHP Class that enables the Admin Bar for Admins Only and Removes 28px Space
  3. */
  4. class admins_only_admin_bar {
  5. /*
  6. * Loads when class is called
  7. */
  8. function __construct() {
  9. /* disables admin bar */
  10. remove_action( 'init', '_wp_admin_bar_init' );
  11. /* calls function to remove 28px space */
  12. add_action( 'admin_head', array( &$this, 'remove_adminbar_margin' ) );
  13. add_action( 'wp_head', array( &$this, 'remove_adminbar_margin' ) );
  14. }
  15. /*
  16. * Removes the 28px margin for the Admin Bar
  17. */
  18. public function remove_adminbar_margin() {
  19. $remove_adminbar_margin = '<style type="text/css">
  20. html { margin-top: -28px !important; }
  21. * html body { margin-top: -28px !important; }
  22. </style>';
  23. echo $remove_adminbar_margin;
  24. }
  25. }
  26. /* Admins Only - Call Class */
  27. if ( current_user_can( 'manage_options' ) ) {
  28. $display_admin_bar = new admins_only_admin_bar();
  29. }

PHP类:自定义已注销的用户的工具条

为已注销用户(游客)显示工具条、添加登录链接、移除WP Logo、添加自定义菜单

下面的例子,将移除WordPress 的logo、添加一个 登录链接、创建一个包含2个网站名为“Our Other Sites”的下拉菜单

  1. /*
  2. * Force Admin Bar for logged out users, add a login link, remove the wp logo, and add a custom link menu
  3. */
  4. class force_admin_bar {
  5. /*
  6. * Loads when class is called
  7. */
  8. function __construct() {
  9. /* logged out users only */
  10. if ( is_user_logged_in() ) { return false; }
  11. /* remove wp logo */
  12. add_action( 'wp_before_admin_bar_render', array( &$this, 'remove_wp_logo' ) );
  13. /* remove search icon [uncomment to activate] */
  14. //add_action( 'wp_before_admin_bar_render', array( &$this, 'disable_bar_search' ) );
  15. /* force adminbar to logged out users */
  16. add_filter( 'show_admin_bar', '__return_true' );
  17. /* call function to add login link to admin bar */
  18. add_action( 'admin_bar_menu', array( &$this, 'logged_out_menus' ), 15 );
  19. }
  20. /*
  21. * Menus for logged out users
  22. */
  23. function logged_out_menus( $meta = FALSE ) {
  24. global $wp_admin_bar, $blog_id;
  25. /* logout menu link */
  26. $wp_admin_bar->add_menu( array(
  27. 'id' => 'login_menu',
  28. 'title' => __( 'Login' ),
  29. 'href' => get_home_url( $blog_id, '/wp-login.php' ) )
  30. );
  31. /* create menus */
  32. $wp_admin_bar->add_menu( array(
  33. 'id' => 'custom_menu',
  34. 'title' => __( 'Our Other Websites' ) ) /* set the menu name */
  35. );
  36. /* menu link */
  37. $wp_admin_bar->add_menu( array(
  38. 'parent' => 'custom_menu',
  39. 'id' => 'techNerdia', /* unique id name */
  40. 'title' => 'techNerdia', /* Set the link title */
  41. 'href' => 'http://technerdia.com/', /* Set the link a href */
  42. 'meta' => array( target => '_blank' ) )
  43. );
  44. /* menu link */
  45. $wp_admin_bar->add_menu( array(
  46. 'parent' => 'custom_menu',
  47. 'id' => 'Google', /* unique id name */
  48. 'title' => 'Google', /* Set the link title */
  49. 'href' => 'http://google.com/', /* Set the link a href */
  50. 'meta' => array( target => '_blank' ) )
  51. );
  52. }
  53. /*
  54. * Remove the WordPress Logo from the WordPress Admin Bar
  55. */
  56. function remove_wp_logo() {
  57. global $wp_admin_bar;
  58. $wp_admin_bar->remove_menu('wp-logo');
  59. }
  60. /*
  61. * Disable the Search Icon and Input within the Admin Bar [uncomment to activate]
  62. */
  63. //function disable_bar_search() {
  64. // global $wp_admin_bar;
  65. // $wp_admin_bar->remove_menu('search');
  66. //}
  67. }
  68. /* Call Class */
  69. $force_admin_bar = new force_admin_bar();

将登录链接从左边移动到右边

只针对上面的那个例子

  1. /*
  2. * Move the Login Link from the left side to the right side within the Admin Bar for logged out users.
  3. */
  4. function move_login_link() {
  5. $move_login_link = '<style type="text/css">
  6. #wpadminbar #wp-admin-bar-login_menu{float:right}
  7. }
  8. </style>';
  9. echo $move_login_link;
  10. }
  11. add_action( 'wp_head', 'move_login_link' );

参考资料:http://technerdia.com/1140_wordpress-admin-bar.html

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

自定义WordPress表情路径(插件和主题)

2013-5-15 9:33:41

WordPress开发

如何获取 WordPress 各类页面的链接

2013-5-17 10:09:23

18 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
  1. HDM

    添加一个简单的菜单,,

    这个只能添加一个,加两个就出现错误是什么问题呀,修改了id,title都不一样还是出错。。

    评论说不能用了,我现在是16年,用的可以的呀,基本都好用。

    766057766@qq.com

  2. 感觉是WP的一个bug,算不算?

  3. 似乎失效了,在4.0版本的WORDPRESS中,请更新代码的

    • 4.1版本也没有用了,4.1版本应该怎么隐藏呢

  4. 添加一个菜单(只显示图标) 这个只能管理员看到吗? if ( !is_user_logged_in() ) { return; }
    if ( !is_super_admin() || !is_admin_bar_showing() ) { return; } 是因为这代码吗?

  5. 更正,remove_action( ‘init’, ‘_wp_admin_bar_init’ );这种写法是错误的,官方明确提示不要移除,
    正确方法见下:
    add_filter( ‘show_admin_bar’, ‘__return_false’ );

  6. 更新最新版wordpress后移除前台的adminbar代码不起作用了

个人中心
购物车
优惠劵
今日签到
私信列表
搜索