WordPress自定义明暗模式切换按钮点击失效问题排查

我在WordPress网站添加自定义明暗模式切换按钮，代码在Codepen中可正常运行，但集成到WP后按钮点击无响应。仅修改了HTML元素的id，其余为WordPress默认代码；使用Simple Custom CSS and JS插件添加CSS与JS，初始CSS样式生效，但点击按钮无任何变化。

这是我第二次写HTML/CSS/JS，第一次在WordPress里管理代码。已经试过调整代码位置、参考其他方案，但没解决问题。怀疑是不是没把JS入队到functions.php、和PHP版本有关，或者需要清浏览器缓存，因为不想改主题文件才用的插件，现在求排查方向。

相关代码 #

HTML #

<!-- 
仅修改了这两个元素的id，其余都是WordPress默认代码

第一个按钮在头部，通过WordPress站点编辑器的"编辑为HTML"添加 -->

<div class="wp-block-button has-custom-font-size has-small-font-size" id="dark-mode-off"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">      </a></div>

<!-- 第二个按钮 -->

<div class="wp-block-button has-custom-font-size has-small-font-size" id="dark-mode-on"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">      </a></div>

CSS #

.wp-block-button {
    width: 8px;
    height: 8px;
    border: 1px solid white;
    border-radius: 50px;
    background-color: black;
    position: relative;
}

#dark-mode-on {
  background-color: black;
  border-color: black;
  transition: 0.2s ease-out;
}

#dark-mode-off {
  background-color: white;
  border-color: black;
  transition: 0.2s ease-out;
}

JS #

const darkModeOnButton = document.getElementById('dark-mode-on');
const darkModeOffButton = document.getElementById('dark-mode-off');
const body = document.querySelector('body');

darkModeOnButton.addEventListener('click', () => {
  darkModeOnButton.style.backgroundColor = 'black';
  darkModeOnButton.style.borderColor = 'white';
  darkModeOffButton.style.backgroundColor = 'white';
  darkModeOffButton.style.borderColor = 'white';
  body.style.backgroundColor = 'black';
});

darkModeOffButton.addEventListener('click', () => {
  darkModeOnButton.style.backgroundColor = 'black';
  darkModeOnButton.style.borderColor = 'black';
  darkModeOffButton.style.backgroundColor = 'white';
  darkModeOffButton.style.borderColor = 'black';
  body.style.backgroundColor = 'white';
  
  darkModeOffButton.disabled = false;
  darkModeOnButton.disabled = false;
});

问题排查方向 #

• JS执行时机错误：插件添加的JS可能在DOM未完全加载时就执行，导致无法获取目标元素。将JS代码包裹在DOM加载完成事件中：

document.addEventListener('DOMContentLoaded', function() {
  const darkModeOnButton = document.getElementById('dark-mode-on');
  const darkModeOffButton = document.getElementById('dark-mode-off');
  const body = document.querySelector('body');

  // 原点击事件逻辑...
});

• 点击事件被拦截：WordPress按钮块内部的<a>标签可能拦截了点击事件，且当前<a>标签padding为0，点击区域可能失效。可以：

  1. 给<a>标签添加尺寸样式，确保点击区域覆盖按钮：

  .wp-block-button__link {
    width: 100%;
    height: 100%;
    display: block;
  }
  

  2. 将点击事件绑定到<a>标签上，修改JS选择器：

  const darkModeOnButton = document.querySelector('#dark-mode-on .wp-block-button__link');
  const darkModeOffButton = document.querySelector('#dark-mode-off .wp-block-button__link');
  

• 插件JS加载位置设置：在Simple Custom CSS and JS插件中，将JS的加载位置设置为页脚（Footer），确保DOM渲染完成后再加载JS。

• 浏览器缓存问题：按Ctrl+F5强制刷新浏览器，清除缓存，确保最新的JS代码被加载执行。

• 查看控制台错误：打开浏览器开发者工具（F12）的Console面板，检查是否存在"元素未找到"等JS报错，直接定位问题根源。

• 排查冲突：暂时禁用其他插件，测试按钮是否恢复正常；或切换到WordPress默认主题（如Twenty Twenty-Four），排除主题自带代码的干扰。

内容的提问来源于stack exchange，提问作者LénárdG