B2主题史上最强wordpress暗黑模式代码详细教程

话不多说,进入正题。此暗黑模式原版出自https://www.sdklib.com/的大佬搬运其他网站而来(sbkk.me),但鉴于此站的b2主题似乎很久未更新,而且很多纰漏;为了使其兼容最新版本的b2主题,于是就有了这篇文章。

提前声明

首先,您的b2主题必须设置为社交类型菜单(此暗黑模式仅仅适配了此菜单,如果您想使用其他类型菜单请见文末的方法);

设置方法如图所示:

20210801015255246.pnggcz

说明:通过侧边栏添加按钮,切换白夜模式。本教程以子主题部署为主。 当然,也需要修改父主题的一个文件。

演示

本站就是演示站啦~如图,快去试试~

20210801021706490.pnggcz
手机端,自己在b2主题后台改
20210801021420606.pnggcz
这是电脑端

第一步 引入本站图标和记录夜间开启状态

打开b2根目录header.php文件,或前往b2主题后台→常规设置添加如下代码

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2526599_atm7o7amjx6.css"/>

在主题的header.php文件body下方添加代码。如果您不想修改父主题,则可以把这个文件复制粘贴到子主题修改:

<!--夜间模式开始-->
<script src="//at.alicdn.com/t/font_2526599_atm7o7amjx6.js"></script>
<script type="text/javascript">
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 20 || new Date().getHours() < 0.1){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/";
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/";
        }
    }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=/"
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
    }
}
</script>
<!--夜间模式结束-->

 

第二步 侧边栏图标切换

打开b2根目录child.js,添加如下代码

/*夜间模式按钮切换*/
$("#ls").click(function () {
if ($(this).hasClass("b2-baitian-qing")) {
  $(this).removeClass("b2-baitian-qing")
  $(this).addClass("icon-tianqiyubao24")
  } else if ($(this).hasClass("b2-yewan")) {
    $(this).removeClass("b2-yewan")
    $(this).addClass("b2-baitian-qing")
  }
})

 

第三步 添加侧边栏按钮

打开b2/Modules/Templates/Footer.php文件,如果您的这个文件未修改的话,就在大约372行下面添加如下代码。具体请看图,找出规律即可~但是要记住的是,这个文件是不能复制到子主题进行修改的哦~

<div class="bar-item switch-theme">
  <a id="theme" href="javascript:switchNightMode()" target="_self">
  <i id="ls" class="muyu b2-baitian-qing"></i>
  <span class="bar-item-desc">夜间模式</span></a>
</div>

 

20210801015702940.pnggcz
修改完成如图所示

第四步 下载样式文件等并引入至网站(此处认真阅读~)

1 下载本文文末的压缩包文件

2 在子主题根目录新建Assets文件夹(注意区分大小写)

3 将压缩包内的kuvnlwhlqol.css文件上传至Assets文件夹下

4 在Assets文件夹下新建css文件夹 (注意区分大小写)

5 将压缩包内的night_style.css上传至css文件夹下

6 在子主题根目录下的functions.php文件下,加入如下代码即可

 wp_enqueue_style( 'child-night_style', B2_CHILD_URI.'/Assets/css/night_style.css' , array() , B2_VERSION, 'all');

第五步 没了

其他事项

1 如果设置好了之后图标显示不出来请修改图标

可以修改成你自己的iconfont图标,也可以修改成春哥的iconfont图标;

附春哥iconfont图标地址:

iconfont Demo (7b2.com)

2 单纯的黑暗需要更改色调

(但也不一定按照这里的色调哦,只是建议更改)

网站主色调:#e55039

网站背景颜色:#1b1d1f

顶部背景颜色:#1b1d1f

顶部文字颜色:#fffbf0

底部第一层背景颜色:#1b1d1f

底部第一层文字颜色:#fffbf0

底部第二层背景颜色:#1b1d1f

底部第二层文字颜色:#fffbf0

3 如果想使用其他类型的菜单,或想更改CSS…

20210801020552302.pnggcz

如果想使用其他类型的菜单,有技术的话可以自行修改CSS;如果不会修改,可以询问春哥群里的大神,帮忙修改。

(要钱不要钱这我不能保证,毕竟 sdklib.com 的站长和我已经开了个不要钱的好头了。)

至于更改CSS的方法,请打开 night_style.css 文件,转到末尾,里面就是方法了~

最后

如果有啥错误可以在下面留言~

至于这个暗黑模式,我会尽快跟进春哥的步伐更新的。如果看到本文的开头写着兼容就说明目前已经兼容了哪个版本,如图~

20210801021128544.pnggcz

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

给TA买糖
共{{data.count}}人
人已赞赏
建站教程

Typecho获取文章缩略图,文章缩略图

2021-5-12 12:31:52

建站教程

vCard - 个人简历Typecho主题

2021-8-6 10:45:01

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索