特定WordPress管理页面中admin_enqueue_scripts无法正常工作的问题

看起来你遇到的核心问题是hook名称不匹配，WordPress后台不同页面的$hook参数值并不是直接等于页面名称，我来一步步帮你排查和解决：

第一步：确认目标页面的真实Hook名称 #

首先得搞清楚“bookings”页面实际对应的$hook值是什么，最简单的方法是在你的函数里加一行调试代码：

function my_enqueue($hook) {
    // 打印当前页面的hook值，刷新后台页面就能看到
    var_dump($hook); 
    if ( 'bookings' != $hook ) {
        return;
    }
    // 你的样式/脚本加载代码
}
add_action('admin_enqueue_scripts', 'my_enqueue');

刷新你的“bookings”后台页面，就能看到实际的hook字符串了，常见的几种情况：

• 如果这是自定义文章类型（CPT）的列表页，hook值会是edit.php，同时需要结合文章类型判断
• 如果这是自定义添加的顶级菜单页面，hook值是你注册页面时填的slug（比如你用add_menu_page(..., 'bookings', ...)，那hook就是bookings）
• 如果这是子菜单页面，hook值会是父页面slug_page_子页面slug，比如edit.php_page_bookings

第二步：根据真实Hook调整代码 #

我给你两种常见场景的修正代码：

场景1：自定义文章类型“bookings”的列表页 #

如果你的“bookings”是自定义文章类型，需要结合get_current_screen()来判断文章类型：

function my_enqueue($hook) {
    $screen = get_current_screen();
    // 只在bookings类型的列表页加载资源
    if ( $hook !== 'edit.php' || $screen->post_type !== 'bookings' ) {
        return;
    }

    // 加载Bootstrap样式（添加依赖和版本号）
    wp_enqueue_style('bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array(), '3.3.7');
    // 加载DataTables的Bootstrap样式，依赖Bootstrap主样式
    wp_enqueue_style('datatables-bootstrap-css', '//cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css', array('bootstrap-css'), '1.10.16');

    // 加载DataTables核心脚本，依赖jQuery（WordPress后台默认包含jQuery）
    wp_enqueue_script('datatables-js', '//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js', array('jquery'), '1.10.16', false);
    // 加载DataTables的Bootstrap适配脚本，依赖核心DataTables和jQuery
    wp_enqueue_script('datatables-bootstrap-js', '//cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js', array('datatables-js', 'jquery'), '1.10.16', false);
}
add_action('admin_enqueue_scripts', 'my_enqueue');

场景2：自定义顶级菜单页面“bookings” #

如果是你用add_menu_page注册的顶级页面，且slug就是bookings，调整条件判断即可，同时修正脚本依赖：

function my_enqueue($hook) {
    // 匹配自定义菜单页面的hook
    if ( 'bookings' !== $hook ) {
        return;
    }

    // 样式/脚本加载代码和上面场景1一致，确保依赖正确
    wp_enqueue_style('bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array(), '3.3.7');
    wp_enqueue_style('datatables-bootstrap-css', '//cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css', array('bootstrap-css'), '1.10.16');

    wp_enqueue_script('datatables-js', '//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js', array('jquery'), '1.10.16', false);
    wp_enqueue_script('datatables-bootstrap-js', '//cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js', array('datatables-js', 'jquery'), '1.10.16', false);
}
add_action('admin_enqueue_scripts', 'my_enqueue');

额外注意事项 #

• 依赖关系很重要：DataTables必须依赖jQuery才能正常工作，所以在wp_enqueue_script的第三个参数里一定要加array('jquery')，否则可能因为加载顺序问题失效
• 清除缓存：修改代码后记得清除浏览器缓存或者WordPress的缓存插件缓存，避免旧代码影响
• 样式/脚本的版本号：尽量使用资源的实际版本号（比如Bootstrap的3.3.7，DataTables的1.10.16），这样当资源更新时，浏览器会自动加载新文件，避免缓存问题

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