自定义 WordPress 工具栏(Toolbar/Admin Bar)

Admin Bar 是 WordPress 在 3.1 版本 中增加的功能,用户可以通过位于网页顶端的工具栏执行一系列如新建文章、编辑个人能资料等的链接操作。Admin Bar 在 3.3 版本 中更名为工具栏(Toolbar)。

WordPress 工具栏默认只提供了一些基础的操作链接菜单。简单到有人喜欢有人厌,如果你对现在工具栏不甚满意,不如一起来动手改造吧!

$wp_admin_bar

你可以通过操作 $wp_admin_bar 对象来自定义 WordPress 工具栏。

add_action( 'admin_bar_menu', 'modify_admin_bar' );

function modify_admin_bar( $wp_admin_bar ){
    //在这里修改 $wp_admin_bar;
}

node(节点)

每个菜单项都是一个节点(node),保存在 $wp_admin_bar 中名为 $nodes 的关联数组中。
每个节点都拥有一个唯一的 ID,你可以通过查看 HTML 源代码来找到它。
在 HTML 中,每个菜单项都有一个以 "wp-admin-bar-" 开始的 ID。比如工具栏左侧的 WordPress Logo 的 ID 是 "wp-admin-bar-wp-logo":

<li id="wp-admin-bar-wp-logo" class="menupop"> … </li>

移除菜单项中 ID 的 "wp-admin-bar-" 部分,那么余下的 "wp-logo" 就是它的 ID。

通过HTML代码查找工具栏节点ID

节点属性

每个节点都有这些属性:

id
节点 ID
title
显示在工具栏中的文本,支持 HTML 标签
parent
父节点的 ID
href
节点的链接地址,如果不设置,节点会显示为纯文本
group
为节点编组,不常用
meta
设置节点的 class、onclick、target 等属性

get_node()

你可以通过 get_node() 方法来获取某一个节点,你必须将节点 ID 作为参数传入。

示例

获取工具栏中"更新"这一节点。

add_action( 'admin_bar_menu', 'check_updates_node', 999 );

function check_updates_node( $wp_admin_bar ) {
    $updates_node = $wp_admin_bar->get_node( 'updates' );
}

remove_node()

你可以通过 remove_node() 方法来移除某一个节点,你必须将节点 ID 作为参数传入。

示例

移除工具栏中的 WordPress Logo。

add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );

function remove_wp_logo( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

add_node()

你可以通过 add_node() 方法来添加一个节点,参数是节点属性组成的数组。
如果你添加的节点ID是已经存在的,WordPress 会将新参数覆盖原来已经存在的节点参数。你也可以简单的理解是在编辑同一 ID 的节点。

示例

修改工具栏右边的账户文本,根据时间段显示不同的问候语

add_action( 'admin_bar_menu', 'custom_account_greeting', 999 );

function custom_account_greeting( $wp_admin_bar ) {
    $my_account_node = $wp_admin_bar->get_node( 'my-account' );
    if ( $my_account_node ) {
        $hour = date( 'G', current_time( 'timestamp' ) );
        $greeting = '晚上好';
        if ( $hour >= 18 ) {
            $greeting = '晚上好';
        } elseif ( $hour >= 14 ) {
            $greeting = '下午好';
        } elseif ( $hour >= 11 ) {
            $greeting = '中午好';
        } elseif ( $hour >= 5 ) {
            $greeting = '早上好';
        };
        $args = array(
            'id'    => 'my-account',
            'title' => str_replace( '您好', $greeting, $my_account_node->title )
        );
        $wp_admin_bar->add_node( $args );
    };
}

在站点标题的菜单下,添加一个主题选项链接。

add_action( 'admin_bar_menu', 'minty_add_theme_options_to_admin_bar', 999 );

function minty_add_theme_options_to_admin_bar( $wp_admin_bar ) {
    $args = array(
        'id'    => 'theme-options',
        'title' => '主题选项',
        'href'  => admin_url( 'themes.php?page=theme-options.php' ),
        'parent'=> 'appearance'
    );
    $wp_admin_bar->add_node( $args );
}

在文章页的工具栏上,添加分享菜单,可以快速分享到新浪微博、人人网和QQ空间。

add_action( 'admin_bar_menu', 'c7sky_share', 999 );

function c7sky_share( $wp_admin_bar ) {
    if ( is_single() ) {
        $title = get_the_title();
        $link = get_permalink();
        $wp_admin_bar->add_node( array(
            'id'    => 'c7sky-share',
            'title' => '分享',
            'href'  => "http://service.weibo.com/share/share.php?url={$link}&title={$title}",
            'meta'  => array( 'target' => '_blank' )
        ) );
        $wp_admin_bar->add_node( array(
            'parent'=> 'c7sky-share',
            'id'    => 'c7sky-share-weibo',
            'title' => '新浪微博',
            'href'  => "http://service.weibo.com/share/share.php?url={$link}&title={$title}",
            'meta'  => array( 'target' => '_blank' )
        ) );
        $wp_admin_bar->add_node( array(
            'parent'=> 'c7sky-share',
            'id'    => 'c7sky-share-qzone',
            'title' => 'QQ空间',
            'href'  => "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={$link}&title={$title}",
            'meta'  => array( 'target' => '_blank' )
        ) );
        $wp_admin_bar->add_node( array(
            'parent'=> 'c7sky-share',
            'id'    => 'c7sky-share-renren',
            'title' => '人人网',
            'href'  => "http://widget.renren.com/dialog/share?resourceUrl{$link}&title={$title}",
            'meta'  => array( 'target' => '_blank' )
        ) );
    }

    //为分享菜单添加图标
    function minty_admin_bar_css() {
        echo '';
    }
    add_theme_support( 'admin-bar', array( 'callback' => 'minty_admin_bar_css' ) );
}

参考资料

http://codex.wordpress.org/Toolbar

10 条评论

发表评论

*