如何在WordPress中分别为前端和后台加载脚本与样式

后台加载（管理界面） #

后台不需要单独的admin_enqueue_styles钩子，admin_enqueue_scripts是后台通用的资源加载钩子，不管是CSS还是JS，都可以在这个钩子的回调里用wp_enqueue_style()和wp_enqueue_script()来加载。

示例代码：

// 后台加载资源
add_action('admin_enqueue_scripts', 'load_admin_resources');
function load_admin_resources() {
    // 加载后台CSS
    wp_enqueue_style('admin-custom-style', get_template_directory_uri() . '/css/admin-style.css');
    // 加载后台JS
    wp_enqueue_script('admin-custom-script', get_template_directory_uri() . '/js/admin-script.js', array('jquery'), '1.0', true);
}

前端加载（网站前台） #

前端对应的通用钩子是**wp_enqueue_scripts**，同样可以同时处理CSS和JS的加载，没有单独的前端样式钩子。

示例代码：

// 前端加载资源
add_action('wp_enqueue_scripts', 'load_frontend_resources');
function load_frontend_resources() {
    // 加载前端CSS
    wp_enqueue_style('frontend-custom-style', get_template_directory_uri() . '/css/frontend-style.css');
    // 加载前端JS
    wp_enqueue_script('frontend-custom-script', get_template_directory_uri() . '/js/frontend-script.js', array('jquery'), '1.0', true);
}

补充说明 #

• 两个钩子的回调函数里，wp_enqueue_style()和wp_enqueue_script()的参数用法完全一致，核心是通过不同的钩子区分前后端场景。
• 如果需要更精准的加载（比如仅在某个后台页面加载），可以在admin_enqueue_scripts的回调里用get_current_screen()判断当前页面再加载资源。

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