为WordPress添加自定义亮/暗模式切换按钮:为什么代码在Codepen中工作得很好,但在WP中却不行;例如,单击不起作用?

5hcedyr0  于 2023-03-29  发布在  WordPress
关注(0)|答案(1)|浏览(156)

简单地说:我想添加这些按钮到我的WordPress网站的用户切换无论是轻或暗模式。虽然它在那里工作得很好,但我似乎无法将这些代码正确地集成到我的网站中。
正如你所知道的,这只是我第二次真实的的经验,实现HTML,CSS和JS在一起,我第一次管理代码在WordPress中;如果我忽略了一些明显的东西,请提前道歉:-)
Buttons as they look on the website but clicking either does nothing
Where the Buttons are added in "body"
Format using the WP Site Editor

HTML

<!-- 
All that I changed with these two, here, was add id="". The rest is all Wordpress...

The First Button within the Header, using the Wordpress Site Editor, "Edit as 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>

<!-- The Second Button -->

<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;
});

更多信息:

  • 为了添加我的自定义代码,我使用“简单自定义CSS和JS”插件;每个部分内部链接。

Where the CSS and JS are added in "head"

  • 我有两个class=".wp-block-button”元素,我使用Wordpress站点编辑器添加到我的站点的标题元素中;这两个都是我在CSS中设计的,使用这个插件。使用当前的代码,当点击一个按钮时,它应该改变两个按钮的样式以及背景颜色。这似乎在Codepen中正确工作,但无论出于何种原因,在Wordpress中都不会响应。初始CSS似乎正确应用,但点击任何一个按钮都不会做任何事情。

我尝试了:
我尝试在HTML中的不同位置插入部分代码,部分使用Google“Inspect”工具。我还尝试寻找其他“Dark-Mode”分步解决方案,以及stackoverflow上的其他一些类似措辞的问题,但到目前为止我没有尝试过真正有帮助;我觉得我缺少了一些基本的东西...
(抓住救命稻草,问题可能是我没有将Javascript文件排队到我的functions.php中;或者通常与我网站的PHP当前版本有关?我应该清空浏览器缓存吗?
我一直有点犹豫,进入和编辑我的主题文件本身,并希望该插件将工作得足够好…)
我不知所措;我不知道问题在哪里.再次,点击任何一个按钮都没有做什么,初始CSS似乎正确的样式,它在CodePen中工作得很好.有人能给我指出正确的方向吗?谢谢. =)

9rbhqvlz

9rbhqvlz1#

使用Google Inspect Tool Console进行调试,结果证明,在这种情况下,对我来说,修复确实相当简单:
TypeError:无法读取null阅读('addeventlistener')的属性,我认为我的常量还不存在;也就是说,没有要从.getElementId(“dark-mode-on”)或“... -off)”获取的元素。
我已经添加了JS作为“内部链接”(1)并将其放在“头部”,这意味着查看我的网站的(索引)文件,“脚本”在“主体”标签之前执行:执行仍然必须读取IDd元素的代码。
我的解决方法是“外部链接”(2),并通过一个新的HTML文件使用插件加载它,这样它就被添加到“页脚”(3);在创建IDd元素之后。
现在它工作得非常好:)
在我的JS文件中,我还添加了

window.onload=function(){/*Add my Code here*/}

在更改这些设置之前,我不确定这是否是多余的...但我现在将保留它。
(1)PNG Old Settings JS file
(2)PNG New Settings JS file
(3)PNG New HTML file Settings

相关问题