分享笔记:

WordPress管理栏添加所有订单链接

快速查看订单

如果你用 WordPress 和 WooCommerce 搭建了网店，那你一定很常去订单管理页面查看自己的订单吧。那你有没有想过，如果能在 WordPress 顶部那条黑色的管理工具栏上，加一个图标，点一下就能打开订单管理页面，还能提醒你有待处理的订单？

woocommerce添加订单到管理栏

我准备了两段代码：

  • 会先检查你有没有安装并启用 WooCommerce。

  • 只有具备 manage_woocommerce 权限的用户（也就是至少是店铺管理人员）才能看到这个功能。

  • 它会显示一个计数器，把未完成的订单总数显示出来，包括：

    • 处理中

    • 待付款

    • 等待中

    • 失败的订单

  • 还会添加一个下拉菜单，把这些不同状态的订单分别列出来，每种状态都会有自己独立的数量提醒。

  • 一点自定义 CSS，让这个链接/图标看起来更舒服。

  • 支持 WooCommerce 的新旧版本。

  • 同时也兼容 HPOS（高性能订单存储）。

你有两种代码版本可以选择：

  1. 链接是文字显示（“所有订单”）

  2. 链接是 WooCommerce 图标

注意：不要两个都加，只选一个，不然工具栏上会出现两个链接。

管理栏添加 WooCommerce 订单链接（文本）

下面的代码会在上面的状态栏里添加一个叫 “所有订单” 的界面。

/* 将 WooCommerce 订单链接添加到 WordPress 管理工具栏（文本版本） */
function jhchen_ordes_top_bar_text($wp_admin_bar) {
    // 检查 WooCommerce 是否激活且用户是否有管理权限
    if (!class_exists('WooCommerce') || !current_user_can('manage_woocommerce')) {
        return;
    }

    // 获取各个订单状态的订单数量
    $processing_orders = get_woocommerce_orders_count('wc-processing'); 
    $pending_payment_orders = get_woocommerce_orders_count('wc-pending'); 
    $failed_orders = get_woocommerce_orders_count('wc-failed'); 
    $on_hold_orders = get_woocommerce_orders_count('wc-on-hold'); 

    // 计算所有待处理订单的总数
    $total_pending_orders = $processing_orders + $pending_payment_orders + $failed_orders + $on_hold_orders;

    // 设置菜单标题
    $title = '所有订单'; // 订单
    if ($total_pending_orders > 0) {
        $title .= ' <span class="awaiting-mod count-' . $total_pending_orders . '"><span class="pending-count">' . $total_pending_orders . '</span></span>';
    }

    // 添加主菜单项（所有订单）
    $wp_admin_bar->add_menu(array(
        'id' => 'woocommerce-orders',
        'title' => $title,
        'href' => admin_url('edit.php?post_type=shop_order'),
        'meta' => array(
            'title' => '查看 WooCommerce 订单',
        ),
    ));

    // 添加子菜单项：所有订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders',
        'id' => 'woocommerce-orders-all',
        'title' => '所有订单',
        'href' => admin_url('edit.php?post_type=shop_order'),
    ));

    // 添加子菜单项：处理中订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders',
        'id' => 'woocommerce-orders-processing',
        'title' => '处理中（' . $processing_orders . '）',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-processing'),
    ));

    // 添加子菜单项：待付款订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders',
        'id' => 'woocommerce-orders-pending',
        'title' => '待付款（' . $pending_payment_orders . '）',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-pending'),
    ));

    // 添加子菜单项：等待中订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders',
        'id' => 'woocommerce-orders-on-hold',
        'title' => '等待中（' . $on_hold_orders . '）',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-on-hold'),
    ));

    // 添加子菜单项：失败订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders',
        'id' => 'woocommerce-orders-failed',
        'title' => '失败（' . $failed_orders . '）',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-failed'),
    ));

    // 添加子菜单项：已完成订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders',
        'id' => 'woocommerce-orders-completed',
        'title' => '已完成',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-completed'),
    ));
}
add_action('admin_bar_menu', 'jhchen_ordes_top_bar_text', 100);

// 自定义工具栏订单标题的样式
function woocommerce_admin_bar_text_styles() {
?>
<style>
/* 工具栏订单项右侧预留空间以显示计数器 */
#wp-admin-bar-woocommerce-orders .ab-item {
    padding-right: 26px;
}

/* 订单数量提示样式（红色圆圈） */
#wp-admin-bar-woocommerce-orders .awaiting-mod {
    background: #d63638;
    color: #fff;
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    padding: 2px 5px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    min-width: 16px;
    height: 16px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: -1px;
}

/* 数字的内部样式 */
#wp-admin-bar-woocommerce-orders .awaiting-mod .pending-count {
    display: block;
    line-height: 12px;
    font-size: 9px;
}

/* 两位数字的样式调整 */
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-1"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-2"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-3"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-4"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-5"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-6"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-7"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-8"],
#wp-admin-bar-woocommerce-orders .awaiting-mod[class*="count-9"] {
    border-radius: 8px;
    min-width: 18px;
    padding: 2px 4px;
}

/* 三位或更多数字的样式调整 */
#wp-admin-bar-woocommerce-orders .awaiting-mod.count-100,
#wp-admin-bar-woocommerce-orders .awaiting-mod.count-999 {
    border-radius: 6px;
    min-width: 20px;
    padding: 2px 3px;
}
</style>
<?php
}
add_action('wp_head', 'woocommerce_admin_bar_text_styles');
add_action('admin_head', 'woocommerce_admin_bar_text_styles');

// 获取特定状态的 WooCommerce 订单数量（支持 HPOS）
function get_woocommerce_orders_count($status = 'wc-processing') {
    if (function_exists('wc_get_orders')) {
        $orders = wc_get_orders(array(
            'status' => $status,
            'limit' => -1,
            'return' => 'ids',
        ));
        return count($orders);
    }

    // 向后兼容旧版本 WooCommerce
    return wc_orders_count($status);
}

管理栏添加 WooCommerce 订单链接（图标）

和上面的代码一样，就是换成一个图标了。

/* 在 WordPress 管理工具栏中添加 WooCommerce 订单的快捷链接（带图标） */
function jhchen_ordes_top_bar_icon($wp_admin_bar) {
    // 检查 WooCommerce 是否激活并且当前用户是否有管理权限
    if (!class_exists('WooCommerce') || !current_user_can('manage_woocommerce')) {
        return;
    }

    // 获取不同订单状态的数量
    $processing_orders = get_woocommerce_orders_count('wc-processing'); // 处理中
    $pending_payment_orders = get_woocommerce_orders_count('wc-pending'); // 待付款
    $failed_orders = get_woocommerce_orders_count('wc-failed'); // 失败
    $on_hold_orders = get_woocommerce_orders_count('wc-on-hold'); // 等待中

    // 计算总的待处理订单数（可见提醒）
    $total_pending_orders = $processing_orders + $pending_payment_orders + $failed_orders + $on_hold_orders;

    // 设置图标 HTML（使用 dashicons 图标字体）
    $icon = '<span class="ab-icon dashicons-before dashicons-store" style="font-family: dashicons; font-size: 20px;"></span>';
    $title = $icon;

    // 如果有待处理订单，就显示数字徽章
    if ($total_pending_orders > 0) {
        $title .= ' <span class="awaiting-mod count-' . $total_pending_orders . '"><span class="pending-count">' . $total_pending_orders . '</span></span>';
    }

    // 添加主菜单项（订单图标链接）
    $wp_admin_bar->add_menu(array(
        'id' => 'woocommerce-orders-icon',
        'title' => $title,
        'href' => admin_url('edit.php?post_type=shop_order'),
        'meta' => array(
            'title' => 'WooCommerce 订单',
            'class' => 'woocommerce-orders-icon',
        ),
    ));

    // 添加子菜单项：所有订单
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders-icon',
        'id' => 'woocommerce-orders-all-icon',
        'title' => '所有订单',
        'href' => admin_url('edit.php?post_type=shop_order'),
    ));

    // 子菜单：处理中
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders-icon',
        'id' => 'woocommerce-orders-processing-icon',
        'title' => '处理中 (' . $processing_orders . ')',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-processing'),
    ));

    // 子菜单：待付款
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders-icon',
        'id' => 'woocommerce-orders-pending-icon',
        'title' => '待付款 (' . $pending_payment_orders . ')',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-pending'),
    ));

    // 子菜单：等待中
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders-icon',
        'id' => 'woocommerce-orders-on-hold-icon',
        'title' => '等待中 (' . $on_hold_orders . ')',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-on-hold'),
    ));

    // 子菜单：失败
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders-icon',
        'id' => 'woocommerce-orders-failed-icon',
        'title' => '失败 (' . $failed_orders . ')',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-failed'),
    ));

    // 子菜单：已完成
    $wp_admin_bar->add_menu(array(
        'parent' => 'woocommerce-orders-icon',
        'id' => 'woocommerce-orders-completed-icon',
        'title' => '已完成',
        'href' => admin_url('edit.php?post_type=shop_order&post_status=wc-completed'),
    ));
}
// 将上面的函数挂载到 admin_bar_menu 钩子
add_action('admin_bar_menu', 'jhchen_ordes_top_bar_icon', 100);


/* 自定义图标和数字徽章的样式 */
function woocommerce_admin_bar_icon_styles() {
?>
<style>
/* 为订单图标提供右边距 */
#wp-admin-bar-woocommerce-orders-icon .ab-item {
    padding-right: 26px;
}

/* 设置 dashicons 商店图标 */
#wp-admin-bar-woocommerce-orders-icon .ab-icon:before {
    content: '\f174';
    font-family: dashicons;
    font-size: 20px;
}

/* 数字徽章的样式 */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod {
    background: #d63638;
    color: #fff;
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    padding: 2px 5px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    min-width: 16px;
    height: 16px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: -1px;
}

/* 数字本身的样式 */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod .pending-count {
    display: block;
    line-height: 12px;
    font-size: 9px;
}

/* 针对 1-9 数字的外观微调 */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-1"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-2"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-3"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-4"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-5"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-6"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-7"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-8"],
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod[class*="count-9"] {
    border-radius: 8px;
    min-width: 18px;
    padding: 2px 4px;
}

/* 对于 100 或更多订单的数字徽章调整 */
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod.count-100,
#wp-admin-bar-woocommerce-orders-icon .awaiting-mod.count-999 {
    border-radius: 6px;
    min-width: 20px;
    padding: 2px 3px;
}
</style>
<?php
}
// 将样式添加到前台和后台页面头部
add_action('wp_head', 'woocommerce_admin_bar_icon_styles');
add_action('admin_head', 'woocommerce_admin_bar_icon_styles');


/* 获取特定订单状态的订单数量（兼容 WooCommerce 高性能订单存储 HPOS）*/
function get_woocommerce_orders_count($status = 'wc-processing') {
    if (function_exists('wc_get_orders')) {
        $orders = wc_get_orders(array(
            'status' => $status,
            'limit' => -1,
            'return' => 'ids',
        ));
        return count($orders);
    }
    // 向后兼容旧版本 WooCommerce
    return wc_orders_count($status);
}

这代码就是下面的效果。

woocommerce添加订单到管理栏

在哪里添加自定义代码？

把下面的代码添加到你子主题的 functions.php 里，或使用像 Code Snippets 这样的自定义代码插件即可。

为笔记评分

平均评分 5 / 5. 摘星者: 2

有疑问？留个言吧！

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
?>

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors