WordPress插件中wp_enqueue_scripts钩子加载CSS文件失效如何解决

你代码的核心问题是钩子选择不匹配，同时缺少加载范围限制，具体问题如下：

• wp_enqueue_scripts 是WordPress专属的前端页面资源加载钩子，仅在站点前台页面触发，不会在后台管理界面执行，所以你在插件后台菜单页面自然看不到加载的CSS文件
• 没有添加资源加载范围判断，就算钩子替换正确，也会在所有后台页面加载你的样式，容易和其他插件、系统默认样式冲突
• 未设置样式版本参数，后续更新样式时容易因为浏览器缓存导致无法加载最新文件

场景1：需要给后台插件菜单页加载样式 #

把资源挂载到后台专属的admin_enqueue_scripts钩子，同时添加页面判断，只在你的插件页加载资源，修正后代码如下：

<?php
// 后台资源加载
function xyz_admin_scripts($hook_suffix){
    // 只在自己的插件菜单页加载，这里的toplevel_page_xyz-menu是你注册的菜单生成的hook后缀
    if($hook_suffix != 'toplevel_page_xyz-menu'){
        return;
    }
    $plugin_url = plugin_dir_url( __FILE__ );
    // 补全版本参数，第四个参数是版本号
    wp_enqueue_style('custom-style', $plugin_url . 'assets/css/style.css', array(), '1.0.0');
}
// 替换成后台资源钩子
add_action('admin_enqueue_scripts','xyz_admin_scripts');


function xyz_admin_menu(){
   add_menu_page('XYZ Plugin','XYZ','manage_options','xyz-menu','xyz_menu_options','',200);
}

add_action('admin_menu','xyz_admin_menu');


function xyz_menu_options(){
   ?>

    <h2>XYZ Plugin</h2>
    <label>Field 1</label>
    <input type="text" class="form-control">
    <label>Field</label>
    <input type="text" class="form-control">

   <?php
}
?>

场景2：需要给站点前台页面加载样式 #

如果是前台页面看不到样式，请做以下排查：

• 确认当前主题的header.php文件中有调用wp_head()函数，这是WordPress加载头部资源的必备入口
• 打开前台页面F12查看网络请求，确认style.css的请求路径是否正确，是否返回404，如果404请检查文件是否确实存放在插件目录的assets/css/style.css路径，注意Linux服务器对文件大小写敏感
• 确认插件已正常激活，且站点没有开启资源合并缓存类功能导致资源被拦截

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