AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

自定义WordPress顶部管理工具条的技巧（转）

2017-10-01 1240
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

custom-wordpress-bar-wpdaxue_com

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

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

1
2
3
4

/*
 * 对所有用户和访客隐藏工具条
 */
remove_action( 'init', '_wp_admin_bar_init' );

只对管理员显示工具条

1
2
3
4
5
6

/*
 * 只对管理员显示工具条
 */
if ( !current_user_can( 'manage_options' ) ) {
    remove_action( 'init', '_wp_admin_bar_init' );
}

只在后台隐藏工具条

1
2
3
4
5
6

/*
 * 只在后台隐藏工具条
 */
if ( is_admin() ) {
    remove_action( 'init', '_wp_admin_bar_init' );
}

只在前台隐藏工具条

1
2
3
4
5
6

/*
 * 只在前台隐藏工具条
 */
if ( !is_admin() ) {
    remove_action( 'init', '_wp_admin_bar_init' );
}

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

1
2
3
4
5
6

/*
 * 对多站点后台隐藏工具条
 */
if ( is_network_admin() ) {
    remove_action( 'init', '_wp_admin_bar_init' );
}

移除工具条占位高度

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/*
 * 移除工具条占位空白
 */
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;
}
/* 针对后台 */
if ( is_admin() ) {
    remove_action( 'init', '_wp_admin_bar_init' );
    add_action( 'admin_head', 'remove_adminbar_margin' );
}
/* 针对前台 */
if ( !is_admin() ) {
    remove_action( 'init', '_wp_admin_bar_init' );
    add_action( 'wp_head', 'remove_adminbar_margin' );
}

移除工具条默认菜单

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

1
2
3
4
5
6
7
8
9
10
11
12

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

添加一个简单的菜单

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/*
 * 添加一个简单的菜单
 * 自行修改 'title' 和 'href' 的值
 */
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 # 后面的数字表示位置：
10 = 在 Logo 的前面
15 = 在 logo 和 网站名之间
25 = 在网站名后面
100 = 在菜单的最后面
*/

添加一个菜单（只显示图标）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

/*
 * 添加快捷菜单到 主题编辑 （支持单站点和多站点）
 */
function add_theme_menu() {
    global $wp_admin_bar;
        if ( !is_user_logged_in() ) { return; }
        if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }
    if ( function_exists('is_multisite') && is_multisite() ) {
        $wp_admin_bar->add_menu( array(
            'id' => 'theme-editor',
            'title' => __('Edit Theme'),
            'href' => network_admin_url( 'theme-editor.php' ) )
        );
    }else{
        $wp_admin_bar->add_menu( array(
            'id' => 'theme-editor',
            'title' => __('Edit Theme'),
            'href' => admin_url( 'theme-editor.php' ) )
        );
    }
}
add_action( 'admin_bar_menu', 'add_theme_menu', 100 ); //关于数字 100 ，请查看上一条技巧

添加下拉菜单

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*
 * 添加下拉菜单
 * 修改菜单名、链接名和链接地址
 */
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 );

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*
 * 添加包含多个链接的子菜单，在新窗口打开链接
 * 请修改菜单名和链接地址
 */
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' ) )           /* 设子菜单名 */
    );
    /* sub-menu */
    $wp_admin_bar->add_menu( array(
        'parent' => 'custom_menu',
        'id'     => 'custom_links',
        'title' => __( 'Sub menu') )         /* 设置子菜单名 */
    );
            /* menu links */
            $wp_admin_bar->add_menu( array(
                'parent'    => 'custom_links',
                'title'     => 'Google',             /* 设置链接名 */
                'href'  => 'http://google.com/', /* 设置链接地址 */
                'meta'  => array( target => '_blank' ) )
            );
            $wp_admin_bar->add_menu( array(
                'parent'    => 'custom_links',
                'title'     => 'Yahoo',           /* 设置链接名 */
                'href'  => 'http://yahoo.com/',  /* 设置链接地址 */
                'meta'  => array( target => '_blank' ) )
            );
}
add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*
 * 新窗口打开：我的网站 > 网站名 > 访问网站
 */
function my_site_links() {
    global $wp_admin_bar;
    foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
        $menu_id  = 'blog-' . $blog->userblog_id;
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-v',
            'title'     => __( 'Visit Site' ),
            'href'  => get_home_url( $blog->userblog_id, '/' ),
            'meta'  => array( target => '_blank' ) )
        );
    }
}
add_action( 'wp_before_admin_bar_render', 'my_site_links' );

隐藏“我的站点”的子菜单（多站点）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*
 * 移除多站点的“我的网站”的子菜单： 仪表盘、新文章、管理评论 和 访问文章
 */
function remove_mysites_links () {
    global $wp_admin_bar;
    foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
        $menu_id_d  = 'blog-' . $blog->userblog_id . '-d';       /* Dashboard var */
        $menu_id_n  = 'blog-' . $blog->userblog_id . '-n';       /* New Post var */
        $menu_id_c  = 'blog-' . $blog->userblog_id . '-c';       /* Manage Comments var */
        $menu_id_v  = 'blog-' . $blog->userblog_id . '-v';       /* Visit Site var */
        $wp_admin_bar->remove_menu($menu_id_d);              /* 移除 仪表盘 */
        $wp_admin_bar->remove_menu($menu_id_n);              /* 移除 发布新文章 */
        $wp_admin_bar->remove_menu($menu_id_c);              /* 移除 管理评论 */
        $wp_admin_bar->remove_menu($menu_id_v);              /* 移除 访问网站 */
    }
}
add_action( 'wp_before_admin_bar_render', 'remove_mysites_links' );

添加子菜单到“我的站点”（多站点）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

/*
 * 添加子菜单到“我的网站”： Log Out, Media, Links, Pages, Appearance, Plugins, Users, Tools and Settings
 */
function add_mysites_link () {
    global $wp_admin_bar;
    foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
        $menu_id  = 'blog-' . $blog->userblog_id;
        /* Add a Log Out Link */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-logout',
            'title'     => __( 'Log Out' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-login.php?action=logout' ) )
        );
        /* Media Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-media',
            'title'     => __( 'Media Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/upload.php' ) )
        );
        /* Links Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-links',
            'title'     => __( 'Links Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/link-manager.php' ) )
        );
        /* Pages Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-pags',
            'title'     => __( 'Pages Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/edit.php?post_type=page' ) )
        );
        /* Appearance Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-appearance',
            'title'     => __( 'Appearance' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/themes.php' ) )
        );
        /* Plugin Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-plugins',
            'title'     => __( 'Plugin Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/plugins.php' ) )
        );
        /* Users Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-users',
            'title'     => __( 'Users Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/users.php' ) )
        );
        /* Tools Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-tools',
            'title'     => __( 'Tools Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/tools.php' ) )
        );
        /* Settings Admin */
        $wp_admin_bar->add_menu( array(
            'parent'    => $menu_id,
            'id'    => $menu_id . '-settings',
            'title'     => __( 'Settings Admin' ),
            'href'  => get_home_url( $blog->userblog_id, '/wp-admin/options-general.php' ) )
        );
    }
}
add_action( 'wp_before_admin_bar_render', 'add_mysites_link' );

使用 Domain.com 作为显示名称（多站点）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
 * 以域名 to Domain.com 作为菜单名
 */
function change_site_names() {
    global $wp_admin_bar;
        $blue_wp_logo_url = includes_url('images/wpmini-blue.png');
        $blavatar = '<img src="' . esc_url($blue_wp_logo_url) . '" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>';
    foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
            $menu_id  = 'blog-' . $blog->userblog_id;
            $blogname = ucfirst( $blog->domain );
        $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', 'change_site_names' );

移除网站LOGO（多站点）

移除多站点下子站点的logo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*
 * Remove the WP Logo from the My Sites Menu
 */
function remove_wplogo_mysites() {
    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;
        $wp_admin_bar->add_menu( array(
            'parent'    => 'my-sites-list',
            'id'    => $menu_id,
            'title'     => $blogname,
            'href'  => get_admin_url( $blog->userblog_id ) )
        );
    }
}
add_action( 'wp_before_admin_bar_render', 'remove_wplogo_mysites' );

修改“我的站点”的logo（多站点）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
 * Change the WP Logo Icon within the My Sites Menu to any icon you want
 * Update the NEW-ICON-HERE.png name to match the proper file name.
 */
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"/>';
        $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' );

对访客显示工具条

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

1
2
3
4

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*
 * Create a menu for Logged Out Users
 */
function loggedout_menu( $meta = TRUE ) {
    global $wp_admin_bar;
        if ( is_user_logged_in() ) { return false; }
    $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', 'loggedout_menu', 15 );

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

修改工具条的透明度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*
 * 修改工具条的透明度
 */
function adminbar_opacity() {
    $adminbar_opacity = '<style type="text/css">#wpadminbar { filter:alpha(opacity=50); opacity:0.5; }</style>';
    echo $adminbar_opacity;
}
/* 后台*/
if ( is_admin() ) {
    add_action( 'admin_head', 'adminbar_opacity' );
}
/* 前台 */
if ( !is_admin() ) {
    add_action( 'wp_head', 'adminbar_opacity' );
}

鼠标悬停时才显示工具条

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/*
 * Hide the WordPress Admin Bar with CSS, then display the Admin Bar on hover with CSS and jQuery
 */
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' );
}

修改工具条的颜色

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

/*
 * Change the Admin Bar Color Scheme
 */
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' );
}

PHP类：只为管理员显示工具条（移除占位高度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*
 * PHP Class that enables the Admin Bar for Admins Only and Removes 28px Space
 */
class admins_only_admin_bar {
    /*
     * Loads when class is called
     */
    function __construct() {
        /* disables admin bar */
        remove_action( 'init', '_wp_admin_bar_init' );
        /* calls function to remove 28px space */
        add_action( 'admin_head', array( &$this, 'remove_adminbar_margin' ) );
        add_action( 'wp_head', array( &$this, 'remove_adminbar_margin' ) );
    }
    /*
     * Removes the 28px margin for the Admin Bar
     */
    public 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;
    }
}
/* Admins Only - Call Class */
if ( current_user_can( 'manage_options' ) ) {
    $display_admin_bar = new admins_only_admin_bar();
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

/*
 * Force Admin Bar for logged out users, add a login link, remove the wp logo, and add a custom link menu
 */
class force_admin_bar {
    /*
     * Loads when class is called
     */
    function __construct() {
        /* logged out users only */
        if ( is_user_logged_in() ) { return false; }
        /* remove wp logo */
        add_action( 'wp_before_admin_bar_render', array( &$this, 'remove_wp_logo' ) );
        /* remove search icon [uncomment to activate] */
        //add_action( 'wp_before_admin_bar_render', array( &$this, 'disable_bar_search' ) );  
        /* force adminbar to logged out users */
        add_filter( 'show_admin_bar', '__return_true' );
        /* call function to add login link to admin bar */
        add_action( 'admin_bar_menu', array( &$this, 'logged_out_menus' ), 15 );
    }
    /*
     * Menus for logged out users
     */
    function logged_out_menus( $meta = FALSE ) {
        global $wp_admin_bar, $blog_id;
        /* logout menu link */
        $wp_admin_bar->add_menu( array(
            'id' => 'login_menu',
            'title' => __( 'Login' ),
            'href' => get_home_url( $blog_id, '/wp-login.php' ) )
        );
        /* create menus */
        $wp_admin_bar->add_menu( array(
            'id' => 'custom_menu',
            'title' => __( 'Our Other Websites' ) ) /* set the menu name */
        );
        /* menu link */
        $wp_admin_bar->add_menu( array(
            'parent' => 'custom_menu',
            'id'     => 'techNerdia', /* unique id name */
            'title'     => 'techNerdia', /* Set the link title */
            'href'  => 'http://technerdia.com/', /* Set the link a href */
            'meta'  => array( target => '_blank' ) )
        );
        /* menu link */
        $wp_admin_bar->add_menu( array(
            'parent' => 'custom_menu',
            'id'     => 'Google', /* unique id name */
            'title'     => 'Google', /* Set the link title */
            'href'  => 'http://google.com/', /* Set the link a href */
            'meta'  => array( target => '_blank' ) )
        );
    }
    /*
    * Remove the WordPress Logo from the WordPress Admin Bar
    */
    function remove_wp_logo() {
        global $wp_admin_bar;
        $wp_admin_bar->remove_menu('wp-logo');
    }
    /*
    * Disable the Search Icon and Input within the Admin Bar [uncomment to activate]
    */
    //function disable_bar_search() {  
    //  global $wp_admin_bar;  
    //  $wp_admin_bar->remove_menu('search');  
    //}  
}
/* Call Class */
$force_admin_bar = new force_admin_bar();

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

只针对上面的那个例子

1
2
3
4
5
6
7
8
9
10
11

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


本文转自黄聪博客园博客，原文链接：http://www.cnblogs.com/huangcong/p/3328205.html，如需转载请自行联系原作者
文章标签：
前端开发
PHP
关键词：
wordpress自定义
自定义wordpress
wordpress管理
自定义wordpress工具
老朱教授
目录
相关文章
疯狂的猿
|
5月前
自定义WordPress首页显示文章数
自定义WordPress首页显示文章数
疯狂的猿
25 1
织音
|
6月前
|
前端开发
Wordpress自定义鼠标样式插件
使用此插件可一键自定义Wordpress前端鼠标指针样式。利用该插件，站长可以快速实现替换多种鼠标指针样式于网站前端。，该插件允许用户一键自定义网站前端的鼠标指针样式，提供多种图案选择。插件资源来源于网络并已开源，无商业性质。包含插件截图和使用教程：用户可从蓝奏云或GitHub下载插件zip文件，然后在WordPress中安装。
织音
130 6
海拥
|
存储 数据安全/隐私保护
如何登录到你的 WordPress 管理仪表板
如何登录到你的 WordPress 管理仪表板
海拥
97 0
北京六翼开源
|
PHP
WordPress 的最佳设计和自定义页面布局生成器是什么吗？
WordPress 有很多设计和自定义页面布局生成器可供选择，它们都有不同的特点和优缺点，最佳的选择取决于您的需求和偏好。以下是一些常用和受欢迎的 WordPress 页面布局生成器：
北京六翼开源
118 0
北京六翼开源
|
前端开发 API
WordPress建站教程：如何使用插件管理 WordPress Heartbeat API
WordPress Heartbeat API 已经存在了将近十年。它提供了 WordPress 仪表板和主机服务器之间的无缝实时通信。Heartbeat API 内置于 WordPress 核心，提供强大的功能，可以显着改善网站管理体验。
北京六翼开源
207 0
WordPress建站教程：如何使用插件管理 WordPress Heartbeat API
北京六翼开源
|
搜索推荐 前端开发 PHP
wordpress建站如何自定义404页面
当在 WordPress 上创建自定义 404 页面比以往任何时候都更简单时，不要用错误页面来烦扰您的用户。这里有一些不同的方法。
北京六翼开源
203 0
hahacai
wordpress自定义主题
wordpress自定义主题 找到 themes文件夹，位置app\public\wp-content\themes 新建一个目录存放主题文件，目录结构如下： 这里我们的目录名是：fictional-university-theme 目录结构就是这样的： fictional-university-theme index.php style.css screenshot.png （放入一张自己的图，命名为screenshot.png） 在style.css中定义主题相关信息，如下
hahacai
131 0
wordpress自定义主题
技术内容小助手
|
开发者
云上 WordPress 网站的管理｜学习笔记
快速学习云上 WordPress 网站的管理
技术内容小助手
97 0
云上 WordPress 网站的管理｜学习笔记
指剑
|
关系型数据库 MySQL Linux
CentOS7.2基于LAMP搭建WordPress，并自定义Logo和名称
CentOS7.2基于LAMP搭建WordPress，并自定义Logo和名称
指剑
761 0
CentOS7.2基于LAMP搭建WordPress，并自定义Logo和名称
疯狂的猿
|
5月前
【wordpress教程】wordpress博客网站添加非法关键词拦截
有的网站经常被恶意搜索，站长们不胜其烦。那我们如何屏蔽恶意搜索关键词呢？下面就随小编一起来解决这个问题吧。
疯狂的猿
90 1

热门文章

最新文章

  • 1
    wordpress如何添加tag标签页面
  • 2
    wordpress如何设置评论框
  • 3
    WordPress小白傻瓜式一键搭建博客个人网站详细教程
  • 4
    Docker-compose 编排lnmp(dockerfile) 完成Wordpress
  • 5
    除了wordpress CMS外，还有什么CMS值得我们使用？
  • 6
    测评部署和管理 WordPress 最方便的面板
  • 7
    Docker部署WordPress LNMP(Nginx PHP MySQL)环境实践
  • 8
    手把手教你 WordPress 使用阿里云 CDN 教程，让你的网站飞起来
  • 9
    WordPress精美免费主题分享系列之游戏风格篇
  • 10
    使用Shell分析Wordpress的Nginx Access日志
  • 1
    java利用xml-rpc协议操作wordpress博客
    92
  • 2
    WordPress 修改上传文件大小限制
    175
  • 3
    忘记Wordpress密码不要慌
    172
  • 4
    给wordpress编辑插件fckeditor添加中文字体（原创
    102
  • 5
    菊子曰备份Wordpress网站的博客内容出错的解决办法（原创）
    534
  • 6
    WordPress插件：链接自动识别转为超链接
    90
  • 7
    WordPress原创插件：当日24小时发布文章标题变红
    120
  • 8
    WP-AutoPostPro WordPress自动采集发布插件
    211
  • 9
    基于WordPress开发的高颜值的自适应主题，支持白天与黑夜模式
    78
  • 10
    【wordPress】WordPress删除index.php后缀【亲测有效】（手把手教学）
    187

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 通过Helm CLI部署wordpress到ACK集群
  • 手动搭建WordPress（CentOS 8）
  • 基于Linux命令实现WordPress手动建站
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
  • 基于函数计算快速搭建Wordpress博客系统
  • WordPress自助建站教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)