插件与教程

WordPress的纯代码实现暗黑模式

authorCrazy uncle time2021-06-14 view326

很多朋友的WordPress站点都已支持暗黑模式了,百度一下更是一堆的教程可阅,今天大叔在这里顺便整合的描述一下其逻辑和详细代码。

目前实现暗黑模式的方案有:

一、自动整体方案

Darkmode.js 就是一个按钮,自动换色,css相关颜色值已预设,貌似对自定义颜色设定有欠缺;

二、换色但无cookie

成功实现点击后换色(换色的相对应css需要自己写),但刷新页面后,换色消失,或者访问内页同样换色消失;

三、换色且记忆

就是第二方案的升级版,即点击按钮换色且记录cookie,刷新页面或去到内页均保持暗黑模式;该方案需要解决刷新页面时,短暂闪烁的问题。

四、换色记忆且支持时间段

在第三种方案的基础,增加了时间段控制,例:站点自动在晚6点到早6点期间启动暗黑模式。

思路整理

一、按钮准备,即点击切换暗黑模式的前端按钮一枚;

<a href="javascript:switchdarkMode()" class="theme-switch"></a>

二、cooie预判断,在网页的<html>内加入以下判断,此举意在解决刷新页面会出现短暂闪烁的问题,做预判。

class="<?php echo($_COOKIE['dark'] == '1' ? 'dark' : ''); ?>"

三、js准备,2个部分,先是按钮切换,其次是定时启动暗黑模式

//切换暗黑模式
function switchdarkMode(){
    var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(dark == '0'){
        document.documentElement.classList.add('dark');
        document.cookie = "dark=1;path=/"
        console.log('夜间模式开启');
    }else{
        document.documentElement.classList.remove('dark');
        document.cookie = "dark=0;path=/"
        console.log('夜间模式关闭');
    }
}
//定时暗黑模式
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.documentElement.classList.add('dark');
            document.cookie = "dark=1;path=/";
            console.log('夜间模式开启');
        }else{
            document.documentElement.classList.remove('dark');
            document.cookie = "dark=0;path=/";
            console.log('夜间模式关闭');
        }
    }else{
        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(dark == '0'){
            document.documentElement.classList.remove('dark');
        }else if(dark == '1'){
            document.documentElement.classList.add('dark');
        }
    }
})();

以上js部分没有采用大部分网上教程的在body上定义class的思路,原因是WordPress的body会添加 body_class();这个wp自带函数,如果再在body定义class,会和整站的body命名冲突,所以js里采用了给html部分进行class名的切换,从而实现模式切换而更改class名。

四、css准备,此时就需要你对暗黑模式进行css编写了,在样式选择器前加上.dark即可,适当配合!important的使用

五、对图片的css暗色设置

.dark img {
    filter: brightness(30%);
}

Get(6)

这些你同样感兴趣

满足你在每个阶段使用模板的需求,帮助你高效完成工作及任务

WordPress Sitemap.xml 移除 wp-sitemap-users

2021-06-23

wwordpress 5.5 后的更新,让站点地图sitemap.xml得到了官方形式的支持,曾几何时wordpress上关于sitemap的插件层出不穷,样式各不相同,标准也各不相同,让我们使用起来总是在犹豫,会不会使…

WordPress后台用户显示昵称

2021-06-17

默认的WordPress后台里,对于用户列表的展现,可能趋于国外化,即主要以用户名和姓名的形式来展现,而到了国内的站点,大多数是希望展现昵称,也只有通过昵称方可知晓该账号是哪位;但在默认的WordPress后台是无昵称一…

WordPress默认小工具里标签云的数量和排序

2021-06-05

遇到一位客户问到为什么我的标签有300多个,而WordPress的小工具里标签云的展示上却只有很少一部分? 我也是很莫名其妙的,不应该啊,查看了后台发现,确实如此,小工具上标签云的展示数量和排序都是无规则的,确实应该有一…

wordpress 固定链接 %postname% 和 pathinfo 的冲突

2021-05-28

主要冲突表现在,在访问wordpress的正常页面、分类、文章时,都正常访问,正常显示,而当你访问一个不存在的url时,你的站点不会显示到404页面,而是显示的首页; 可能大家听起来会很模糊,没明白过来是啥意思; 例如:…

wordpress顶部工具条如何隐藏去除

2021-04-19

很显然,让用户看到wordpress顶部工具条(admin bar)显得有点凌乱,而完全隐藏去除对于管理上又不是很方便,那么下面整理了一系列的隐藏去除的方法,酌情使用。 完全去除wordpress工具条 show_adm…

修改WordPress搜索结果的链接样式

2021-02-06

WordPress默认的搜索结果的链接样式是?s=关键词动态的结构,不美观,也不利于搜索引擎优化;有没有办法改变它的链接结构呢?当然可以;直接在主题文件夹里找到functions.php文件,并将以下代码贴入; //修改…

WordPress的head头信息X-Pingback的隐藏

2021-02-02

首先,最直接的操作就是,在wordpress主题的functions.php文件中,添加如下代码即可完成对head头部信息中的x-pingback值做了隐藏; //关闭 pingback function deel_se…

WordPress 屏蔽恶意搜索如关键词、网址等

2021-01-26

如果你的站点被恶意的关键词搜索,如果没有屏蔽的话,这些搜索结果很有可能被搜索引擎抓取到。那结果就很悲剧了。 今天这篇文章就来说说如何规避这种问题出现,当然,如果机器人搜索,你还需要设置下搜索频率。 1、添加代码 添加如下…