日主题v2作为一款全新架构的Wordpress主题。兼容老款日主题。商城功能后台可以一键开启关闭,关闭后就是一个布局灵活,界面优美,速度超快的wordpress博客主题。但是黑夜白天的效果只有手动去实现,这样有些站长会觉得比较麻烦,今天就来给大家分享WordPress日主题纯代码实现黑夜白天自动切换方法教程。

第一步:首先,我们进入后台找到主题设置-底部设置-PC端全站右下角菜单(返回顶部+)我们在最后新增一个菜单名称。比如:夜间模式,图标根据自己喜好设置,新窗口打开:关闭,链接地址这里我们填写javascript:switchNightMode(),添加完成后记得点击保存。

WordPress日主题纯代码实现黑夜白天自动切换插图
这样我们首页就可以看到下图所示图标

WordPress日主题纯代码实现黑夜白天自动切换插图1

第二步:找到主题设置-布局设置,将右侧夜间模式切换功能选择关闭,

WordPress日主题纯代码实现黑夜白天自动切换插图2

第三步:我们以宝塔为例,依次打开目录//wp-content/themes/ripro-v2/下的footer.php文件,在最后面</body>前加上下方js:

<!-- 自动切换夜间模式-->
<script type = "text/javascript" >
function switchNightMode() {
var site_dark_open = document.cookie.replace(/(?:(?:^|.*;\s*)site_dark_open\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0";
if (site_dark_open == "0") {
    document.body.classList.add("dark-open");
    document.cookie = "site_dark_open=1;path=/";
    console.log("夜间模式开启")
} else {
    document.body.classList.remove("dark-open");
    document.cookie = "site_dark_open=0;path=/";
    console.log("夜间模式关闭")
}
} (function() {
if (document.cookie.replace(/(?:(?:^|.*;\s*)site_dark_open\s*\=\s*([^;]*).*$)|^.*$/, "$1") === "") {
    if (new Date().getHours() > 19 || new Date().getHours() < 7) {
        document.body.classList.add("dark-open");
        document.cookie = "site_dark_open=1;path=/";
        console.log("夜间模式开启")
    } else {
        document.body.classList.remove("dark-open");
        document.cookie = "site_dark_open=0;path=/";
        console.log("夜间模式关闭")
    }
   } else {
    var site_dark_open = document.cookie.replace(/(?:(?:^|.*;\s*)site_dark_open\s*\=\s*([^;]*).*$)|^.*$/, "$1") || 
 "0";
    if (site_dark_open == "0") {
        document.body.classList.remove("dark-open")
    } else {
        if (site_dark_open == "1") {
            document.body.classList.add("dark-open")
        }
    }
  }
})();
</script>

WordPress日主题纯代码实现黑夜白天自动切换插图3

第四步:依次打开目录//wp-content/themes/ripro-v2/下的header.php文件

将下面代码放入,如图所示:

<?php echo($_COOKIE['site_dark_open'] == '1' ? 'dark-open' : ''); ?>

WordPress日主题纯代码实现黑夜白天自动切换插图4

以上基本可以实现定时黑夜白天自动切换,有bug或者问题可以下方留言。后期将探索实现类似子比主题的日间夜间主题,功能如下:

WordPress日主题纯代码实现黑夜白天自动切换插图5

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注