如何为WooCommerce自定义子菜单页面加载订单页样式？

要让你的自定义子菜单页面和WooCommerce原生后台页面（比如订单页）样式、交互完全一致，只需要通过WordPress的后台资源加载钩子，针对性地加载WooCommerce官方的后台CSS和JS资源即可，具体步骤如下：

1. 添加资源加载钩子 #

使用WordPress的admin_enqueue_scripts钩子，这是后台页面加载样式/脚本的标准入口。在你的插件或主题functions.php中添加以下代码：

// 注册后台资源加载逻辑
add_action('admin_enqueue_scripts', 'enqueue_woocommerce_admin_assets_for_custom_page');

function enqueue_woocommerce_admin_assets_for_custom_page() {
    // 获取当前后台页面的屏幕信息对象
    $current_screen = get_current_screen();
    
    // 精准匹配你的自定义页面（格式规则：父菜单slug_page_子菜单slug）
    if ($current_screen && $current_screen->id === 'woocommerce_page_my-custom-slug') {
        // 加载WooCommerce后台核心样式
        wp_enqueue_style('woocommerce_admin_styles');
        
        // 加载WooCommerce后台核心脚本（包含交互逻辑）
        wp_enqueue_script('woocommerce_admin_script');
        
        // 若需要用到WordPress组件库的额外样式/脚本，可按需开启下面两行
        // wp_enqueue_style('wp-components');
        // wp_enqueue_script('wp-components');
    }
}

2. 代码说明 #

• 页面匹配逻辑：get_current_screen()返回的id格式为父菜单slug_page_子菜单slug，你的父菜单是woocommerce，子菜单slug是my-custom-slug，所以匹配值为woocommerce_page_my-custom-slug，确保只在你的自定义页面加载资源，避免冗余。
• 资源句柄：woocommerce_admin_styles和woocommerce_admin_script是WooCommerce官方预注册的资源标识，直接调用就能加载对应的CSS和JS文件，无需手动写文件路径，兼容性更强（适配WooCommerce版本更新）。

3. 效果验证 #

把这段代码和你之前注册子菜单、渲染页面的代码放在一起，刷新你的自定义后台页面后，woocommerce-layout、woocommerce-layout__header这些类的样式就会自动生效，页面外观和交互逻辑会和WooCommerce原生后台页面完全一致。

内容的提问来源于stack exchange，提问作者Abdullah Al Faruk