如何将自定义插件的.js文件加载到WordPress的<head>标签中？

你的代码存在几个关键问题，导致脚本没能加载到里，以下是修正方案：

核心问题分析 #

1. 钩子使用错误：wp_enqueue_script需要绑定到wp_enqueue_scripts钩子（WordPress官方推荐的脚本加载钩子），而非直接在wp_head里调用，否则无法触发正确的脚本队列管理逻辑。
2. 路径参数错误：BASE_PATH一般是服务器本地文件路径，但wp_enqueue_script要求传入可被浏览器访问的URL，必须用plugins_url()函数生成插件文件的正确URL。
3. 默认加载位置：wp_enqueue_script默认会把脚本放在<body>末尾，需要显式设置第四个参数为false，强制脚本加载到<head>区域。

修正后的完整代码 #

class headScript
{
    private string $scriptPath = 'assets/myFrontendScript.js';
    
    public function __construct() {
        // 绑定WordPress官方推荐的脚本加载钩子
        add_action('wp_enqueue_scripts', array($this, 'enqueueScript'));
    }

    public function enqueueScript() {
        // 生成插件JS文件的可访问URL（假设当前类文件在插件根目录）
        $scriptUrl = plugins_url($this->scriptPath, __FILE__);
        
        // 注册并加载脚本，强制放在<head>
        wp_enqueue_script(
            'custom-frontend-script', // 唯一标识，建议用语义化名称
            $scriptUrl,
            array(), // 依赖的其他脚本（比如jquery），无依赖则留空
            '1.0.0', // 版本号，用于浏览器缓存刷新
            false // 关键参数：设为false表示加载到<head>
        );
    }
}

// 实例化类即可自动完成脚本加载
new headScript();

关于内联脚本的补充（如果需要用file_get_contents） #

如果一定要读取JS内容并以内联方式输出到，可以绑定wp_head钩子实现，但不推荐这种方式（不利于缓存和依赖管理）：

class headScript
{
    private string $scriptPath = 'assets/myFrontendScript.js';
    
    public function __construct() {
        add_action('wp_head', array($this, 'outputInlineScript'));
    }

    public function outputInlineScript() {
        // 获取本地文件路径
        $localPath = plugin_dir_path(__FILE__) . $this->scriptPath;
        if (file_exists($localPath)) {
            $scriptContent = file_get_contents($localPath);
            echo '<script type="text/javascript">' . $scriptContent . '</script>';
        }
    }
}

new headScript();

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