能否使用CSS修改WordPress站点内按钮的跳转链接？

首先明确结论：仅靠CSS无法直接修改<a>标签的href属性实现链接跳转目标变更。CSS是专门用于控制页面元素样式表现的语言，没有修改DOM节点属性的能力。如果需要实现你要的效果，可以选择以下两种可行方案：

• 方案1：CSS配合JavaScript实现（最推荐，兼容所有场景，无副作用）
  你可以先通过CSS暂时屏蔽原按钮的点击行为，再用JS修改链接属性，代码如下：
  首先将这段CSS添加到WordPress后台「外观-自定义-额外CSS」中：

  .MyButton {
    /* 暂时屏蔽默认点击，避免用户在JS加载完成前点到原链接 */
    pointer-events: none;
    cursor: pointer;
  }
  

  再将这段JS添加到WordPress主题的自定义JS插入区域，或者通过主题的functions.php挂载到页脚加载：

  // 等待页面DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    const myBtn = document.querySelector('.MyButton');
    if (myBtn) {
      // 修改链接目标
      myBtn.setAttribute('href', 'https://site2.com/');
      // 恢复按钮点击能力
      myBtn.style.pointerEvents = 'auto';
    }
  });
  

• 方案2：纯CSS障眼法（仅应急使用，不推荐，对SEO不友好、无法支持右键新标签页打开等操作）
  如果你暂时没有权限添加JS代码，可以用CSS给按钮叠加一个透明层，配合在页面中插入一个新的链接节点实现跳转，但这种方案实际并没有修改原按钮的href属性，仅能实现左键点击跳转的效果，存在很多缺陷，不建议长期使用。

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