本文是《免费(共171篇)》专题的第 59 篇。阅读本文前,建议您先阅读前面的文章:
- 1.RiPro 主题简洁美观又好看鹿鸣的404页面模块
- 2.Ripro 主题7.20美化版
- 3.Ripro 主题8.1美化版
- 4.WordPress如何在文章或侧边栏添加网易云音乐播放器
- 5.WordPress程序修改后台登录地址教程,提高安全性
- 6.RiPro 主题美化之首页VIP介绍引导美化,样式+文件+教程
- 7.RiPro 主题添加鼠标点击特效
- 8.RiPro 主题鼠标划过文章网格加载动效 不能点击文章解决办法
- 9.RiPro 主题添加评论之星VIP等级
- 10.Adobe PS2018 CC WIN版本
- 11.RiPro 主题网站底部友情连接修改美化
- 12.RiPro 主题文章内页标题美化教程
- 13.RiPro 主题添加“常见问题FAQ”教程
- 14.RiPro 美化按钮动态变色效果教程
- 15.RiPro 主题首页简洁搜索框美化教程
- 16.WordPress实现未登录时图片模糊显示
- 17.RiPro主题给资源添加资源VIP角标
- 18.WordPress注册页添加验证码
- 19.Adobe Photoshop 修图插件
- 20.WordPress美化登录页面
- 21.B2主题创意图片广告区块教程
- 22.B2主题美化底部代码,增加运行时间及cnzz统计代码
- 23.WordPress隐藏后台左上角的logo图标
- 24.WordPress关闭自动更新
- 25.B2主题各个页面地址链接
- 26.B2主题美化之文章内容美化H标签美化
- 27.WordPress主题美化右边多色滚动条
- 28.WordPress屏蔽插件更新
- 29.WordPress设置在新窗口打开所有链接
- 30.WordPress 后台设置左上角『查看站点』从新窗口打开
- 31.WordPress如何屏蔽或者自定义后台的版权和版本信息
- 32.WordPress如何屏蔽后台的仪表盘按钮
- 33.WordPress添加自助申请友链功能
- 34.WordPress博客b2主题美化首页区块
- 35.WordPress网页“悼念模式”全站变灰/黑白色CSS代码
- 36.WordPress的B2主题打赏按钮自定义颜色
- 37.B2主题 – banner钻展
- 38.B2主题首页增加区块,六格首页菜单栏
- 39.WordPress主题制作基本模版文件以及基本函数
- 40.WordPress加密隐藏 wp-login
- 41.WordPress中主题以及插件的自动更新关闭
- 42.B2主题弹窗登录美化
- 43.WordPress自动更新网站底部 Copyright © 年份
- 44.WordPress首页小工具添加跑马灯公告
- 45.B2美化-增加黑夜模式
- 46.B2主题自定义用户等级颜色代码
- 47.B2主题会员等级美化与自定义标识
- 48.B2主题个人中心美化
- 49.B2圈子顶部添加文字滚动通知
- 50.B2文章评论新增ip归属地
- 51.B2修改认证图标
- 52.B2主题弹窗公告美化
- 53.B2主题自定义 暂无相关结果 图标
- 54.B2主题文章底部增加声明
- 55.B2主题手机区块菜单,仅手机
- 56.B2主题广告位
- 57.WordPress自定义pre样式DIY代码高亮
- 58.B2主题美化小工具“创建圈子”按钮
现在网站基本都是有夜间模式的,由于之前用的主题自带夜间模式,而换到7B2主题后少了这个功能感觉有点不适应,恰巧找到了guhuan大佬写的一篇教程,通过大佬的帮助,完美实现了夜间模式功能。这里也给大家分享一下本人在使用这个教程时遇到的一些问题以及解决方法。
使用教程:
1、首先,您的b2主题必须设置为社交类型菜单(此暗黑模式仅仅适配了此菜单,如果你想使用其他类型菜单可以参考night_style.css文件末尾的方法进行修改)
2、按照此教程修改完成后,会在侧边栏添加一个按钮进行模式切换。
3、本教程是以子主题部署为主。 如需修改父主题文中会特别标明。
第一步 引入本站图标和记录夜间开启状态
打开b2子主题目录下的header.php文件,或前往b2主题后台→常规设置添加如下代码。
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2526599_atm7o7amjx6.css"/>
同样在b2子主题目录下的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父主题目录下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>
第四步 下载样式文件等并引入至网站(此处认真阅读~)
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图标;
2 单纯的黑暗需要更改色调
(但也不一定按照这里的色调哦,只是建议更改)
网站主色调:#e55039
网站背景颜色:#1b1d1f
顶部背景颜色:#1b1d1f
顶部文字颜色:#fffbf0
底部第一层背景颜色:#1b1d1f
底部第一层文字颜色:#fffbf0
底部第二层背景颜色:#1b1d1f
底部第二层文字颜色:#fffbf0
您已阅读完《免费(共171篇)》专题的第 59 篇。您可以继续阅读该专题下面的文章:
- 60.B2主题美化:VIP会员页面
- 61.B2美化-页眉菜单添加开通vip图标
- 62.B2主题网站添加添加复制透明提示框
- 63.B2自定义 暂无相关结果 图标
- 64.B2主题动态背景搜索样式
- 65.B2主题动态背景搜索样式–本网站同款
- 66.B2主题美化-代码模块美化
- 67.B2主题logo扫光特效,网站logo扫光特效纯代码
- 68.WordPress给文章添加百度是否已收录查询和显示功能
- 69.B2主题美化首页文章缩略图鼠标悬浮放大特效
- 70.WordPress添加百度API 自动提交收录
- 71.WordPress实现复制弹出提示框-美化版
- 72.WordPress的评论区加背景图片,让评论框不在单调
- 73.Ps两个或者多个钢笔路径合并 只显示大选区 的时候怎么办
- 74.B2主题美化-移动端底部导航修改美化
- 75.B2美化-首页添加动态北极熊搜索样式
- 76.B2主题美化-顶部导航条的下拉菜单美化
- 77.B2主题美化之根据时间自动切换网站背景颜色/图片
- 78.WordPress自定义网站背景图片
- 79.WordPress用代码实现刷新网页都随机变换背景图片不调用API接口
- 80.B2主题会员等级美化与自定义标识
- 81.Adobe Photoshop2023 CC WIN版本
- 82.Adobe Photoshop2023 CC MAC版本
- 83.B2主题美化给文章添加彩色角标
- 84.WordPress文章中的图片实现点击放大的效果
- 85.B2主题四栏目美化代码
- 86.WordPress如何重新排列后台管理菜单
- 87.WordPress完整的函数大全
- 88.WordPress完全美化后台登陆页面
- 89.B2主题在网站底部添加访问次数代码
- 90.B2主题添加菜单栏上下滑动特效
- 91.Win系统打开软件显示找不到MSVCR100.dll
- 92.PS2018-2024版本安装插件弹窗显示扩展未经正确签署
- 93.Windows系统中使用虚拟机安装苹果Mac OS系统
- 94.WordPress中怎么点击一个按钮后可以切换图标
- 95.WordPress中怎么点击一个按钮弹出使用Ctrl+D收藏网站
- 96.B2主题把本站第几号会员+500个
- 97.子比主题为注册的用户自动添加认证标识+VIP会员
- 98.子比主题添加微语页面
- 99.子比主题添加FPS帧率显示
- 100.子比主题添加滚动播报小工具
- 101.子比主题侧边栏添加简单的小模块
- 102.子比主题添加VIP视频在线解析页面
- 103.子比主题添加热门标签页面
- 104.B2主题使用Fancybox插件的图片灯箱效果
- 105.子比主题添加底部统计信息模块小工具
- 106.子比主题文章标签美化
- 107.子比主题网站点击彩色效果
- 108.子比主题添加侧边彩色滚动条
- 109.子比主题引用阿里巴巴矢量图标库彩色图标
- 110.子比主题添加右下角活动倒计时悬浮窗
- 111.子比主题首页文章点击更多按钮样式美化
- 112.子比主题首页文章列表悬停上浮
- 113.子比主题设置网站动态标题
- 114.子比主题添加鼠标样式
- 115.子比主题首页主内容上方添加跑马灯公告小工具
- 116.子比主题添加复制提示框
- 117.子比主题顶部添加彩色进度条
- 118.子比主题文章添加版权声明
- 119.子比主题底部可爱底线提示
- 120.子比主题文章页面添加文章字数和阅读时间
- 121.子比主题顶部导航栏添加背景图片
- 122.子比主题底部添加蓝色波浪
- 123.子比主题回到顶部悬挂猫咪
- 124.B2主题增加底部自定义友情链接
- 125.子比主题添加说说动态页面
- 126.子比主题修改go外链跳转页面
- 127.子比主题给网站挂个灯笼
- 128.子比主题侧边栏添加信息统计小工具
- 129.B2主题增加文章内显示最后编辑时间
- 130.子比主题添加文章更新或过期失效提示
- 131.子比主题评论框添加背景图片
- 132.子比主题更改文章列表样式
- 133.子比主题添加B站追番页面
- 134.子比主题底部炫酷引导卡片小工具
- 135.子比主题添加短视频聚合无水印解析页面
- 136.子比主题公告弹窗样式美化
- 137.子比主题修改主题字体(网站字体美化)
- 138.子比主题添加好看的侧边ip标签小工具
- 139.子比主题侧边在线征稿小工具
- 140.子比主题下载页面添加声明或说明
- 141.子比主题左侧菜单添加背景图片(手机才能看)
- 142.子比主题下载页面美化(简单的美化)
- 143.子比主题首页轮播图按钮样式美化
- 144.子比主题【夜/日】间模式切换小提示
- 145.子比主题设置网站的背景为图片背景
- 146.子比主题聚合热搜API对接
- 147.WordPress主题当鼠标指针滑动链接,将显示图像悬停滑动效果
- 148.WordPress添加动态版权日期
- 149.B2主题评论后自动刷新页面
- 150.B2主题美化-侧边跟随工具条
- 151.Windows的Num灯亮了右侧键盘数字却打不出来
- 152.子比主题添加滚动图片广告位html小工具
- 153.B2美化之侧边栏漂亮的会员优惠倒计时
- 154.B2主题添加右下角会员活动弹窗
- 155.B2主题网站添加用户IP归属地
- 156.WordPress添加底部滚动文章推荐条
- 157.子比主题修改粉色果冻泡泡loading加载动画
- 158.B2主题代码块添加一键复制和美化
- 159.B2主题添加个好看的底部导航
- 160.B2主题添加可自由缩放展开或关闭的底部浮动广告
- 161.子比主题添加底部导航带赞赏和常用按钮
- 162.子比主题美化go外链跳转美化代码
- 163.WordPress主题利用element-ui显示Notification通知【复制、禁用F12、右键菜单】提醒
- 164.给你的WordPress网站添加一个躲猫猫
- 165.B2美化之评论后自动刷新
- 166.B2美化之悬浮侧边栏滑动美化
- 167.B2主题文章每次访问随机增加访问量
- 168.B2主题动态滚动公告显示订单成交信息
- 169.密码保护:B2主题美化集合
- 170.B2首页背景自动换图搜索框
- 171.B2主题在网站添加悬浮动画广告