自定义 WordPress 后台顶部工具栏菜单

更新时间：2020-05-31 分类：设计主题 浏览量：3312

WordPress 后台顶部工具栏默认只提供了一些基础的操作链接菜单。 如果想要扩展一些自定义菜单，可以通过下面的方法添加。当然，如果你不想显示这个顶部工具栏，也可以通过 CSS 样式强行隐藏。不过，这篇内容主要介绍扩展自定义菜单，对于隐藏顶部工具栏的方法，就不多说，可以自行搜索方法。

$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。

节点属性

每个节点都有这些属性：

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 '#wpadminbar #wp-admin-bar-c7sky-share>.ab-item:before { content: "\f237"; top: 2px; }';
    }
    add_theme_support( 'admin-bar', array( 'callback' => 'minty_admin_bar_css' ) );
}

本文转自小影志：点击这里查看原文链接

标签： ,