专栏首页钻芒博客为WordPress适配暗黑模式 &集成到主题设置&整合方案

为WordPress适配暗黑模式 &集成到主题设置&整合方案


此功能基于两位前辈的文章。如下:

  • https://imjad.cn/archives/code/add-night-mode-to-blog/
  • https://xptt.com/653884.html

之前就有想法给主题适配一个暗黑模式,但就于目前大家的暗黑模式体验都不是很好。就一直被搁浅了。今天给新站移植RIPRO的时候,发现暗黑主题还蛮好玩的,开搞! 网上关于WordPress暗黑模式的文章好像也不少,大多是基于Darkmode.jsGItHub:https://github.com/sandoche/Darkmode.js 有插件类型的,也有代码适配的。(插件我都已经汉化过了,发现并不好用,遂放弃)


正文开始,实现的方法并不难,难的是适配和整合。

  • 首先简单的思路就是给主题样式表适配写一套黑色模板的css,主要是背景,图片和文字等适配。css是最复杂工程量最大的。日主题的暗黑模式css我写了一下午(第一次写都有写注释)
  • 然后使用js控制切换,当切换至暗黑模式后class 调用适配暗黑的css,由于css层级优先关系就达到了暗黑的效果。
  • 下面教程开始,教程部分引入自: 郑永博客  我会在教程下边记一下后台适配开关及遇到的问题解决方法。

首先加入js代码,你可以扔footer页脚:

<script type="text/javascript">
    //夜间模式
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            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*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove('night');
        }else if(night == '1'){
            document.body.classList.add('night');
        }
    }
})();
//夜间模式切换
function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\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>

其次在header页头的body加入php判断,检测到cookie相关字段直接输出body class为night,防止页面闪烁。

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

最后,调试CSS,body.night xxx ,xxx覆盖替换的css样式,body.night img 是把图片降低亮度,有些地方图片如果没有降低亮度,那么也像前面那样加入。

body.night xxx{
    background-color: #263238;
    color: #aaa;
}
body.night img {
    filter: brightness(30%);
}

我的css修改例子,看一下应该就懂了。

<style>
body.night, body.night #body, body.night .page_navi a.current {
    background-color: #263238!important;
    color: #888282!important;
}
body.night #sidebar, body.night .next-page a {
    background-color: #263238;
    color: #888282;
}
body.night #content .post p a, body.night .floor {
    color: #af8f77;
}
body.night .shang {
    color: #263238;
}
body.night .shang {
    background-color: #ab9a6d;
}
body.night img, body.night .icon_qq, body.night .icon_facebook, body.night .icon_rss, body.night .icon_weixin, body.night .icon_github, body.night .bozhugravatar a, body.night .left-col {
    filter: brightness(50%);
}
body.night a, body.night a:link, body.night a:visited {
    color: #989292;
}
body.night #comments form textarea, body.night #comments form input {
    background-color: #263238;
    color: #888282;
}
body.night #content .menufeng {
    border-bottom: 1px solid #989292;
}
body.night #footer, body.night #xgwz, body.night #comments {
    border-top: 1px solid #989292;
}
body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
    border: 1px solid #989292;
}
body.night #nav .menu ul{
    background: #3e4c52;
}
</style>

OK,只要客户端时间是22点到6点之间,就自动切换到夜间模式,你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。

<a href="javascript:switchNightMode()" target="_self">查看效果</a>

OK,结束,前面简单,后面css部分比较费时一些,如果你的主题够简单,那也很快,不然的话就得考验你耐心了。


到这里基本就能实现暗黑模式了,这个方法不只适用于WordPress,适用于几乎所有网站。

一,集成到后台

因为我知道这个功能实际上用的很少,大多时候也是图个新鲜了。所以给主题后台加个开关。没准过两天就不喜欢关掉了。但是这个功能可以不用,但是得有!

用前可在参考一下这篇文章

WordPress主题 之后台添加控制切换按钮表单控件

上一篇文章我们说到加灯笼,在给新站加灯笼的时候想着给后台加一个控制开关,来控制前台是否显示灯笼控件。 效果 实例: 基于…

首先看一下我的效果吧。并且加了一个开启暗黑后的logo,增强用户体验。

实现方法。和上边说的那篇文章一样。新建一个切换开关,让这个开关控制网站前台  开启暗黑的 按钮 。即可实现。

代码示例:

开启效果:

关闭后开关则不会显示,和挂灯笼那篇文章一个模子。

主题开关说完了,说一下上边那个暗黑模式logo适配吧。先看一下效果:

不同模式下,显示不同颜色的logo,避免暗黑模式后logo都看不见了。可以增强用户体验。

实现方法,其实也非常的简单,首先主题的logo显示不能直接用img标签写,要用background-image 这个属性来写,就是背景图像。因为我们现在使用的暗黑方案只能控制css,用img写死了就不行了。当然你也可以用js来实现,只是我不会(愧对海亮老师的课!

看一看代码你就明白了

<div class="cs-footer-logo zmki_footer_logo"> 
<a style="background-image: url(<?php echo _hui_img('header_logo'); ?>)"></a>
</div>

由于我们引用了zmki_footer_logo这个css类,在切换回暗黑模式后,会自动使用body.night .zmki_footer_logo这个类,我们只需要给body.night .zmki_footer_logo这个写一个背景图像background-image属性即可,然后加上!important增加优先级。这样子就能实现暗黑模式输出另一张图片效果。

css示例

 <style>
          /*暗黑logo适配*/
         body.night .logo a , body.night .zmki_footer_logo a {
         background-image: url(<?php echo _hui_img('header_logo_anhei'); ?>)!important;
}
 </style>

因为我们想在后台加一个可以控制暗黑模式logo的表单,那么这个css如果写死到style样式表里每次换暗黑logo还要去样式表里修改。不能将就!

那么问题来了,后台选项表单创建好了,函数也能引用。但是.css样式表科学的讲并不能插入PHP代码。

一番思考后发现,既然不能把php写到css文件里,那就把css写到php文件里。结果是可行的,php果然是世界上最好的语言。

看下图应该能好理解了。非常简单。


说一下最后一个问题,还记得上边代码里的

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

这一句,就是很简答一个cookie判断,判断如果你开启暗黑模式的cookie,如果有就输出night(达到暗黑效果),没有则空不开启。

可是日主题就非常操蛋的这样子写,

上边的body是我们的判断cookie,下边的body是日主题封装好的class,根本不给修改的地方,结果就是前端排版出错。

在日主题身上徘徊搜索后定位到文件。然后仿照着它接上一个判断

ok大功告成。

其实日主题还是不错的,相比于7B2,修改起来的频繁报错。这家伙二开魔改起来简直游刃有余,原来是我符合日主题的定位: 真男人!日主题真香。待上线补票!

下面发几张暗黑模式效果图,和部分由博主适配的日主题暗黑模式css。仅供参考

部分CSS(钻芒博主适配)

/*首页大搜索*/
body.night .focusbox .container {
    filter: brightness(70%);
}
/*首页轮播*/
body.night .swiper-container{
	filter: brightness(70%);
}
/*全局背景*/
body.night .container-white{
	 background-color: #232323;
}
/*首页分类推荐模块背景*/
body.night .cms-category .category-tile{
	background: #000;
}

/*首页文章模块 背景*/
body.night .excerpt{
	background-color: #111111;
}
/*会员加入展示*/
body.night span.counter{
    background: #000;
    color: #ce0000;
}
/*造轮子文字*/
body.night .home2 h3, body.night .home2 p{
	color: #a1a1a1;
}
body.night a, body.night a:link, body.night a:visited {
    color: #c8c8c8;
}
/*造轮子按钮*/
body.night .btn-wiht {
    border-color: #4a4a4a; 
}
/*首页会员开通*/
body.night .home-vipbox{
	background: #000;
}
/*分类中心*/
body.night .filters {
    background-color: #000;
    color: #c3c3c3;
}
body.night .post-like, .post-price {
    filter: brightness(80%);
}

/*文章页 文字和 背景*/
body.night .article-content {
    color: #a8a8a8;
    background-color: #353535;
}
/*小工具背景*/
body.night .widget {
    background-color: #353535;
}
/*文章页 H标题*/
body.night .article-content h1,
body.night .article-content h2,
body.night .article-content h3,
body.night .article-content h4,
body.night .article-content h5,
body.night .article-content h6{
    color: #fff;
}
/*搜索小工具*/
body.night form.inline .inline-field {
    background-color: #353535;
     border: 0px solid #f1f1f1;
}
/*关注我们小工具*/
body.night .social-widget-link {
    position: relative;
    margin-bottom: 10px;
    position: relative;
    display: block;
    font-size: 13px;
    background: #353535;
    color: #a6a6a6;
    line-height: 40px;
    padding: 0 14px;
     border: 0px solid #DDD; 
    border-radius: 2px;
}

WordPress暗黑模式相关链接:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress添加友情链接-后台链接选项

    部分模板安装后后台会不显示链接。在WordPress安装根目录的 functions.php文件添加如下代码即可开启

    AlexTao
  • wordpress配置Memcached缓存

    WordPress用Memcached缓存也已经半年之久了。对博客的访问速度提升还是很明显的。之前写过一篇文章介绍Memcached缓存以及如何部署(通过WPJ...

    AlexTao
  • WordPress 小工具移植 AD广告展示&关注我们 源自日主题RIPRO&Grace模块

    提示,ripro广告小工具博主移植到日主题上,同宗的东西丢进去就能用。其他主题需要自己找对合适的位置。可能外层PHP还要补充一点。

    AlexTao
  • 如何批量打印可变内容的方法

    在可变数据软件中,批量生成可变内容是一种不可缺少而且是非常专业的一项功能,但是在很多不太了解可变内容批量打印的用户,可能会不太理解其制作原理或者生...

    用户5759861
  • 将Typecho的数据库迁移至阿里云RDS

    昨天看了”使用阿里云搭建网站并实现站库分离“的文章,然后也想给自己的Typecho安排一下学生无罪,但是看到这是全新的数据库搭建教程,而我们是数据库迁移,总体上...

    ZC.TigerRoot
  • 支撑百万并发的数据库架构如何设计?

    这篇文章,我们来聊一下对于一个支撑日活百万用户的高并系统,他的数据库架构应该如何设计?

    良月柒
  • 动作要快,姿势要帅!新年「薅羊毛」全靠这个小程序

    眼看着春节越来越近了,人们都一脸欢欣地准备着年货、车票,在辛勤地工作一年之后,他们终于要迎来团聚放松的节日,迎接新一年的到来。

    知晓君
  • 一位00后程序员的成长历程

    2015年即将初中毕业的时候,初中班主任极力推荐我去当地的职业学校,其实也就是玩的学校,我想从那学校出来的吃喝嫖赌貌似都学会了吧。我当时没想太多,起初我是准备去...

    用户1257393
  • 数据分析从零开始实战 (五)

    本文偏长(4k+字),实用性高,老表建议先收藏,然后转发朋友圈,然后吃饭、休闲时慢慢看,反复看,反复记,反复练。

    叫我龙总
  • 动物类及修改-C++

    汐楓

作者介绍

AlexTao

钻芒控i站长

钻芒控i · 站长 (已认证)

精选专题

活动推荐

扫码关注云+社区

领取腾讯云代金券