如何通过functions.php在WordPress指定插件页面添加JavaScript？

针对你遇到的问题，以下是可行的解决方案，解决之前方法的位置错误和页面不生效问题：

核心问题分析 #

• 方法一错误原因：直接在functions.php中输出脚本，未通过WordPress官方钩子，导致脚本被输出到HTML文档结构外部。
• 方法二错误原因：使用了前台页面的wp_head钩子，后台插件页面不会触发该钩子，所以脚本无法加载。

解决方案一：输出内联脚本（适合短代码） #

使用后台专属的admin_enqueue_scripts钩子，配合页面判断，将内联脚本正确插入到页面中：

add_action( 'admin_enqueue_scripts', 'load_booknetic_custom_inline_script' );
function load_booknetic_custom_inline_script() {
    global $pagenow;
    // 判断是否为目标插件页面
    if ( $pagenow === 'admin.php' && isset( $_GET['page'] ) && $_GET['page'] === 'booknetic' ) {
        // 借助jQuery依赖，确保脚本在jQuery加载后执行
        wp_add_inline_script( 'jquery', '
            console.log(window.location.href);
            jQuery(".fa-puzzle-piece").hide();
        ' );
    }
}

解决方案二：加载外部JS文件（适合复杂脚本） #

如果你的脚本代码较多，建议放在单独的JS文件中，通过以下方式加载：

1. 在主题目录下创建js/custom-booknetic.js文件，写入你的脚本：

console.log(window.location.href);
jQuery(".fa-puzzle-piece").hide();

2. 在functions.php中添加以下代码：

add_action( 'admin_enqueue_scripts', 'load_booknetic_custom_external_script' );
function load_booknetic_custom_external_script() {
    global $pagenow;
    if ( $pagenow === 'admin.php' && isset( $_GET['page'] ) && $_GET['page'] === 'booknetic' ) {
        wp_enqueue_script(
            'custom-booknetic-script',
            get_stylesheet_directory_uri() . '/js/custom-booknetic.js',
            array( 'jquery' ), // 声明依赖jQuery
            wp_get_theme()->get('Version'), // 使用主题版本号作为脚本版本
            true // 将脚本放在页面底部，优化加载性能
        );
    }
}

注意事项 #

• 始终使用WordPress官方钩子加载脚本，避免直接输出导致的结构错误。
• 后台页面统一使用admin_enqueue_scripts钩子，前台页面使用wp_enqueue_scripts钩子。
• 判断$_GET['page']时要加isset()，避免页面不存在该参数时触发PHP警告。
• 使用wp_add_inline_script或wp_enqueue_script能确保脚本在依赖库（如jQuery）之后加载，避免出现未定义错误。

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