如何在WooCommerce账户页面新区域渲染更新后的菜单项标题

问题背景 #

已通过代码完成WooCommerce账户菜单链接的重命名与排序，但在使用woocommerce_account_content钩子渲染页面头部区域时，无法获取对应页面的自定义标题，也不知道如何生成匹配的图标类名。

已实现的导航链接修改代码：

/**
 * Rename and reorder My Account menu links
 */
$woocommerce_account_menu_items = array(
    'dashboard'         => __( 'Account overview', 'woocommerce' ),
    'orders'            => __( 'My orders', 'woocommerce' ),
    'downloads'         => __( 'My downloads', 'woocommerce' ),
    'payment-methods'   => __( 'Payment methods', 'woocommerce' ),
    'edit-account'      => __( 'My details', 'woocommerce' ),
    'edit-address'      => __( 'Address book', 'woocommerce' ),
    'customer-logout'   => __( 'Sign out', 'woocommerce' ),
);

function rb_reorder_woocommerce_account_menu_items( $menu_links ) {
    global $woocommerce_account_menu_items;
    return $woocommerce_account_menu_items;
}

add_filter( 'woocommerce_account_menu_items', 'rb_reorder_woocommerce_account_menu_items' );

解决方案 #

修改rb_woocommerce_account_content函数，通过WooCommerce内置方法获取当前页面的端点，再从自定义菜单数组中匹配对应的标题，同时生成规范的图标类名：

/**
 * Add icon and page title before the account page content
 */
function rb_woocommerce_account_content() {
    global $woocommerce_account_menu_items;
    
    // 获取当前账户页面的端点
    $current_endpoint = WC()->query->get_current_endpoint();
    // 处理默认情况（仪表盘页面）
    if ( empty( $current_endpoint ) ) {
        $current_endpoint = 'dashboard';
    }
    
    // 获取对应页面的自定义标题，默认用仪表盘标题
    $page_title = isset( $woocommerce_account_menu_items[$current_endpoint] ) 
        ? $woocommerce_account_menu_items[$current_endpoint] 
        : $woocommerce_account_menu_items['dashboard'];
    
    // 生成图标类名（安全化处理端点名称）
    $icon_class = sanitize_title( $current_endpoint );
    ?>
    <div class="woocommerce-MyAccount-card woocommerce-MyAccount-card--intro woocommerce-MyAccount-intro">
        <div class="woocommerce-MyAccount-intro__icon woocommerce-MyAccount-intro__icon--<?php echo esc_attr( $icon_class ); ?>"></div>
        <div class="woocommerce-MyAccount-intro__title"><?php echo esc_html( $page_title ); ?></div>
    </div>
<?php }

add_action( 'woocommerce_account_content', 'rb_woocommerce_account_content' );

关键说明 #

• WC()->query->get_current_endpoint()：WooCommerce提供的获取当前账户页面端点的方法，能准确识别当前访问的是哪个账户子页面
• 端点匹配逻辑：先判断当前端点是否存在于自定义菜单数组中，避免出现未定义的标题
• 安全输出：使用esc_attr()和esc_html()确保输出内容符合WordPress安全规范，防止XSS风险

内容的提问来源于stack exchange，提问作者BlakeZajac