WordPress插件中JavaScript资源路径的正确处理方法-php教程-PHP中文网

WordPress插件中JavaScript资源路径的正确处理方法

在WordPress插件中，JavaScript文件内硬编码相对路径（如./textures/cloudy.png）会导致404错误，因其基于当前页面URL解析而非插件目录；应通过wp_localize_script()将PHP端生成的绝对URL传递至JS，实现动态路径拼接。

在wordpress插件中，javascript文件内硬编码相对路径（如`./textures/cloudy.png`）会导致404错误，因其基于当前页面url解析而非插件目录；应通过`wp_localize_script()`将php端生成的绝对url传递至js，实现动态路径拼接。

WordPress 与静态 HTML 网站的关键差异在于请求上下文：浏览器解析 JS 中的相对路径（如 ./textures/cloudy.png）时，始终以当前 HTML 页面的 URL 为基准，而非 JS 文件所在位置。因此，在 /post-name/ 或根目录下访问时，浏览器会尝试加载 /post-name/textures/cloudy.png 或 /textures/cloudy.png，自然无法命中插件目录下的真实资源。

解决之道是将路径“注入”到 JavaScript 运行时环境，而非依赖静态相对路径。具体分两步：

在 PHP 端注册并传递插件基础 URL
在插件主文件（如 die.php）中，wp_enqueue_script() 后立即调用 wp_localize_script()，将 plugin_dir_url(__FILE__)（返回类似 https://example.com/wp-content/plugins/die/ 的完整 URL）挂载为全局 JS 对象：
```
wp_register_script( 'die', plugin_dir_url( __FILE__ ) . 'includes/Die.js' );
wp_enqueue_script( 'die' );
wp_localize_script( 'die', 'dievars', array(
    'pluginUrl' => plugin_dir_url( __FILE__ )
) );
```

在 JavaScript 中动态构建资源路径
修改 Die.js，移除硬编码相对路径，改用注入的 dievars.pluginUrl 拼接：

export const TEXTURES = {
    'cloudy': {
        name: 'Transparent',
        source: dievars.pluginUrl + 'textures/cloudy.png'
    },
    'metal': {
        name: 'Metallic',
        source: dievars.pluginUrl + 'textures/metal.jpg'
    },
    // 其他纹理...
};

✅ 注意事项：

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

wp_localize_script() 必须在 wp_enqueue_script() 之后、页面输出前执行（通常放在 wp_enqueue_scripts 钩子内）；
dievars 是全局对象名，需确保不与其他插件冲突（可按插件命名规范改为 die_plugin_vars）；
路径末尾无斜杠，plugin_dir_url() 返回值已含结尾 /，因此直接拼接 'textures/...' 即可；
若使用 ES6 模块语法（如 export），需确认 WordPress 加载方式支持（推荐搭配 type="module" 或构建工具）；若兼容性优先，可改用 window.dievars + IIFE 封装。