WordPress 子目录安装中正确处理脚本路径的完整指南

在 wordpress 子目录安装（如 `https://site.com/wordpress/`）中，使用 `wp_register_script()` 或 `wp_enqueue_script()` 时若传入相对路径，系统会错误地以 `wp_siteurl`（而非 `wp_home`）为基准拼接 url，导致脚本 404；正确做法是始终使用 `get_template_directory_uri()` 等函数生成完整绝对 url。

当 WordPress 安装在子目录（例如 /wordpress/）但站点根 URL 为 https://dev.website.nl/ 时，WP_SITEURL 指向 https://dev.website.nl/wordpress，而 WP_HOME 指向 https://dev.website.nl/。此时，若在主题 functions.php 中这样注册脚本：

$path = '/wp-content/themes/website/js/app.js';
wp_register_script('someName-entry', $path, [], false, true);

WordPress 会将 $path 视为相对于 WordPress 根目录（即 WP_SITEURL）的路径，最终生成的

这显然错误——因为 wp-content 并不在 /wordpress/ 下，而是与 /wordpress/ 同级（位于网站根目录下），实际可访问路径应为：

✅ 正确解法：避免使用硬编码相对路径，改用 WordPress 提供的 URI 获取函数，确保路径始终基于当前主题或子主题的真实资源位置：

• get_template_directory_uri()：返回父主题（theme-name）的完整 URL（推荐用于主题自有资源）；
• get_stylesheet_directory_uri()：返回子主题（child-theme-name）的完整 URL（子主题开发时使用）；
• plugins_url()：用于插件资源；
• admin_url() / includes_url()：仅限后台或核心文件。

✅ 推荐写法（主题 JS 文件）：

// 假设 app.js 位于当前主题的 /js/app.js 目录下
$script_path = '/js/app.js';
wp_register_script(
    'app-script',
    get_template_directory_uri() . $script_path,
    array(),      // 依赖项（如 'jquery'）
    filemtime(get_template_directory() . $script_path), // 自动版本号（可选）
    true          // 置于  前
);
wp_enqueue_script('app-script');

⚠️ 注意事项：

• 不要使用 ABSPATH、WP_CONTENT_DIR 等服务器路径常量拼接 URL —— 它们返回的是文件系统路径，非 Web 可访问 URL；
• 避免手动拼接 WP_HOME 或 WP_SITEURL，易出错且不兼容多环境（如本地/测试/生产）；
• 若需引用 wp-content 下非主题资源（如自定义 CDN 或独立 JS 目录），请使用 content_url()：
  content_url('/custom-js/app.js') → https://dev.website.nl/wp-content/custom-js/app.js；
• 开发阶段建议启用 SCRIPT_DEBUG 常量（define('SCRIPT_DEBUG', true);），禁用脚本合并与压缩，便于快速定位路径问题。

总结：WordPress 的脚本加载机制默认将未带协议的字符串路径解释为“相对于 WP_SITEURL”，这是设计使然，而非 Bug。遵循官方推荐方式——*始终通过 `directory_uri()` 函数构造前端资源 URL**——即可彻底规避子目录安装中的路径错位问题，同时保障代码的可移植性与健壮性。