WordPress环境下JS内CSS相对路径仅首页生效，如何用JS配置绝对路径

问题原因 #

你使用的是相对路径寻址，浏览器解析路径时会自动将当前页面的URL前缀拼接在相对路径前，因此子页面访问时路径会出现多余的当前页面路径片段，导致资源加载失败。

解决方案 #

方案1：根目录安装站点适用（90%场景通用） #

直接在路径开头添加/，将相对路径转为站点根目录绝对路径，浏览器会强制从域名根目录开始读取资源，不受当前页面路径影响。
修改后代码如下：

jQuery(document).ready(function($) {
  $("ul.colors .color1").click(function () {
        $("#colors").attr("href", "/wp-content/plugins/hekim/widgets/bclinico/css/colors/default.css");
        return false;
   })
});

方案2：子目录安装站点适用 #

如果你的WordPress安装在域名子目录下（例如站点访问地址为link.com/wp/），可以动态获取站点根地址拼接路径，避免硬编码域名：

jQuery(document).ready(function($) {
  // 替换为你实际的WordPress安装子目录路径，根目录安装则将/blog/改为空字符串即可
  const sitePrefix = '/blog/';
  const siteRoot = window.location.origin + sitePrefix;
  $("ul.colors .color1").click(function () {
        $("#colors").attr("href", siteRoot + "wp-content/plugins/hekim/widgets/bclinico/css/colors/default.css");
        return false;
   })
});

内容的提问来源于stack exchange，提问作者attack-to-overflow