如何使用JavaScript为WordPress特定页面的所有链接添加CSS类

问题诊断 #

你的问题属于参考方案不适用+自身代码语法错误两者都有问题，具体原因和修正方案如下：

1. 参考方案不匹配需求 #

你找到的参考代码原本的作用是：匹配页面中所有跳转地址等于当前页面URL的链接，用于给当前页导航项加高亮类，和你「给指定页面上所有链接统一加类」的需求完全不符。

2. 你修改的代码存在多处语法错误 #

• 字符串拼接错误使用了*运算符，JavaScript中字符串拼接需使用+
• 选择器规则逻辑错误：你不需要限制a标签的href属性，你要选中的是目标页面上所有a标签
• 类名拼接未加前置空格：直接拼接className会导致和原有类名粘连，比如原有类为btn，拼接后会变成btnlink-style的无效类名
• 括号不匹配：代码末尾存在多余的右括号，属于语法错误

正确实现代码 #

你需要先判断当前页面是否为指定页面，匹配成功后再给页面所有a标签加类，推荐使用更安全的classList.add方法，避免重复加类和空格问题：

if (window.location.href === 'https://staging.startupdevkit.com/resource-library-version-1/') {
  document.querySelectorAll('a').forEach(function(elem) {
    elem.classList.add('link-style');
  });
}

WordPress部署说明 #

将上述代码添加到主题的footer.php文件</body>标签之前即可，也可以通过WordPress自定义代码插件插入页脚脚本位置，无需修改主题文件。

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