为WordPress网站增加一个夜间模式按钮 - 汇站网

为WordPress网站增加一个夜间模式按钮

2024-01-12 0 898

正文:

自己动手给网站增加一个夜间模式!夜间模式为了迎合夜晚,让你从视觉上感到光线变暗,就会想办法把屏幕变暗,这样屏幕整的亮度和夜间环境更接近,就能让你在晚上浏览网站不那么辣眼睛。

教程开始

首先,我们需要在主题模板中打开“footer.php”文件,在“”标签前添加如下代码:

< script type="text/javascript"> function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") || ‘0‘; if(night == ‘0‘){ document.body.classList.add(‘night‘); document.cookie = "night=1;path=/" console.log(‘夜间模式开启‘); }else{ document.body.classList.remove(‘night‘); document.cookie = "night=0;path=/" console.log(‘夜间模式关闭‘); } } < /script>

保存文件即可。如果想要实现自动切换夜间模式,那么直接复制如下代码:

 < script type="text/javascript"> function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") || ‘0‘; if(night == ‘0‘){ document.body.classList.add(‘night‘); document.cookie = "night=1;path=/" console.log(‘夜间模式开启‘); }else{ document.body.classList.remove(‘night‘); document.cookie = "night=0;path=/" console.log(‘夜间模式关闭‘); } } (function(){ if(document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") === ‘‘){ if(new Date().getHours() > 22 || new Date().getHours() < 5){ document.body.classList.add(‘night‘); document.cookie = "night=1;path=/"; console.log(‘夜间模式自动开启‘); }else{ document.body.classList.remove(‘night‘); document.cookie = "night=0;path=/"; console.log(‘夜间模式自动关闭‘); } }else{ var night = document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") || ‘0‘; if(night == ‘0‘){ document.body.classList.remove(‘night‘); }else if(night == ‘1‘){ document.body.classList.add(‘night‘); } } })();</ script> 

代码中的 22 和 5 就是晚上 22 点开始到第二天的 5 点结束。

请注意,此代码是针对没有记录 cookies 的网站来说有效,一旦手动开启或者关闭过夜间模式,那么这个自动切换就会失效,除非清空浏览器的 cookies。为了解决这个问题,我们可以在 js 中添加一个判断,每天的 22 点时判断 cookies 是否是夜间模式,如果不是,弹出对话框询问是否开启夜间模式,如果是就不提示。 然后打开网站的“header.php”文件,我们需要给网站添加一个按钮,以此来手动开启和关闭夜间模式:

 <a class="at-night" href="javascript:switchNightMode()" target="_self"></a> 

复制如上代码,放在你认为合适的地方,然后保存。登录后台,清空主题模板缓存编译,然后打开首页,测试夜间模式是否有效。 其实教程到这才算是完成一般,因为你在测试的过程中会发现,开启夜间模式并没有效果。这是因为你们没有适配夜间模式的css。由于每个主题模板的 div 框架和 css 命名不同,无法统一,所以需要您自己去查找对应的 class 类,然后添加夜间模式的样式,例如:

body.night DIV 名称 {background-color: #263238;color: #aaa; }

其他程序(TP5 或者 Typecho 等)使用这个:

 <body class="<?php echo($_COOKIE[‘night‘] == ‘1‘ ? ‘night‘ : ‘‘); ?>">

这样就解决闪屏的 BUG 了,当检测到 cookie 相关字段时直接输出 body 的 class 为 night,就可以防止页面闪烁。

转载请注明:汇站网 » 为 WordPress 网站增加一个夜间模式按钮

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 WordPress教程 为WordPress网站增加一个夜间模式按钮 https://www.huizhanii.com/34396.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com