CorePress主题后台添加多功能侧边栏,夜间模式,快捷登录,返回主页等

效果

实现

类名啥的起的有点乱,将就看吧,图标、图片、链接需要你自己修改。

注释啥的也懒得写,想要添加功能的自己研究。

代码写的可能不太精简,大佬优化后欢迎发给我,谢谢!

主题设置-插入代码-页脚代码

<!--移动端侧边栏-->
    <div class="mobile-side">
        <div class="other-project"><svg class="icon fa-spin" aria-hidden="true">
                <use xlink:href="#icon-system"></use>
            </svg></div>
        <div class="night-mode">
            <div class="dark-mode"><svg class="icon fa-spin" aria-hidden="true">
                    <use xlink:href="#icon-pengyouquan2"></use>
                </svg></div>
        </div>
        <div class="popup-menu">
            <div class="return-index"><a href="https://www.zhoubaiwl.club/" target="_self"><svg class="icon"
                        aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg></a></div>
        </div>
        <div class="popup-login">
            <div class="qq-login"><a
                    href="https://www.zhoubaiwl.club/login?redirect_to=%2F%2Fwww.zhoubaiwl.club%2F&amp;thirdparty=qq"><img
                        src="https://www.zhoubaiwl.club/wp-content/themes/CorePress/static/img/icons\QQ.svg"></a></div>
            <div class="popup-register">
                <div class="users-login"><a href="https://www.zhoubaiwl.club/register" target="_self">注</a></div>
            </div>
        </div>
        <div class="return-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></div>
    </div>
    <script>
        var mobileSide = document.querySelector('.mobile-side');
        var returnTop = document.querySelector('.return-top');
        var otherProject = document.querySelector('.other-project');
        var nightMode = document.querySelector('.night-mode');
        var popupMenu = document.querySelector(".popup-menu");
        var darkMode = document.querySelector(".dark-mode");
        var returnIndex = document.querySelector(".return-index");
        var popupLogin = document.querySelector(".popup-login");
        var popupRegister = document.querySelector(".popup-register");
        document.addEventListener('scroll', function () {
            if (window.pageYOffset >= 300) {
                returnTop.style.display = 'block';
            } else {
                returnTop.style.display = 'none';
            }
        })
        returnTop.addEventListener('click', function () {
            animate(window, 0);
        });
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
        function animates(obj, target, direction, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (direction == "x") {
                    var step = (target - obj.offsetLeft) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (obj.offsetLeft == target) {
                        clearInterval(obj.timer);
                        if (callback) {
                            callback();
                        }
                    }
                    obj.style.left = obj.offsetLeft + step + 'px';
                } else if (direction == "y") {
                    var step = (target - obj.offsetTop) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (obj.offsetTop == target) {
                        clearInterval(obj.timer);
                        if (callback) {
                            callback();
                        }
                    }
                    obj.style.top = obj.offsetTop + step + 'px';
                }

            }, 15);
        }
        var flags = 1;
        otherProject.addEventListener('click', function () {
            if (flags == 1) {
                flags = 0;
                mobileSide.style.overflow = 'visible';
                nightMode.style.display = "block";
                animates(nightMode, -50, "x", function () {
                    otherProject.style.borderRadius = "0 5px 5px 0";
                    popupMenu.style.display = "block";
                    animates(popupMenu, -100, "x", function () {
                        popupLogin.style.display = "block";
                        animates(popupLogin, -50, "y", function () {
                            popupRegister.style.display = "block";
                            animates(popupRegister, 50, "x");
                        });
                    });
                });

            } else {
                flags = 1;
                animates(popupRegister, 0, "x", function () {
                    popupRegister.style.display = "none";
                    animates(popupLogin, 0, "y", function () {
                        popupLogin.style.display = "none";
                        animates(popupMenu, -50, "x", function () {
                            popupMenu.style.display = "none";
                            animates(nightMode, 0, "x", function () {
                                otherProject.style.borderRadius = "5px";
                                mobileSide.style.overflow = 'hidden';
                                nightMode.style.display = "none";
                            });
                        });
                    });
                });

            }
        });
        darkMode.addEventListener('click', function () {
            switchNightMode();
        });
        (function () {
            if (document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
                if (new Date().getHours() > 20 || 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>

 

 

主题设置-插入代码-自定义CSS

.go-top-plane-show,
        .go-top-plane-show {
            display: none;
        }

        .mobile-side {
            display: block;
            overflow: hidden;
            z-index: 999999;
        }

        .mobile-side {
            position: fixed;
            bottom: 20%;
            right: 10px;
            width: 50px;
            height: 102px;
            background-color: transparent;
        }

        .return-top {
            display: none;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            border-radius: 5px;
            background-color: #e8eaeb;
            text-align: center;
            line-height: 50px;
        }

        .other-project {
            position: absolute;
            top: 0;
            width: 100%;
            height: 50px;
            margin-bottom: 2px;
            border-radius: 5px;
            background-color: #e8eaeb;
            text-align: center;
            line-height: 50px;
            z-index: 999;
        }

        .night-mode {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: #e8eaeb;
            border-radius: 0;
            z-index: 988;
        }

        .popup-menu {
            display: none;
            position: absolute;
            top: 0;
            left: -50;
            width: 50px;
            height: 50px;
            background-color: #e8eaeb;
            border-radius: 0 0 0 5px;
            z-index: 99;
        }

        .return-index,
        .dark-mode {
            width: 40px;
            height: 40px;
            margin: 5px 5px;
            background-color: #838DA6;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
        }

        .return-index a,
        .qq-login a,
        .users-login a {
            display: block;
            width: 40px;
            height: 40px;
        }

        .popup-login {
            display: none;
            position: absolute;
            top: 0;
            left: -100px;
            width: 50px;
            height: 50px;
            border-radius: 5px 0 0 0;
            background-color: #e8eaeb;
            z-index: 98;
        }

        .popup-register {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 50px;
            height: 50px;
            border-radius: 0 5px 0 0;
            background-color: #e8eaeb;
            z-index: -99;
        }

        .qq-login,
        .users-login {
            width: 40px;
            height: 40px;
            margin: 5px 5px;
            background-color: #838DA6;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
        }

        .qq-login img {
            width: 18px;
            height: 18px;
        }

        /* 夜间模式样式*/
        body.night header,
        body.night .menu-header-list,
        body.night .aside-box,
        body.night .dialog-plane,
        body.night .crumbs-plane,
        body.night .footer-plane,
        body.night .drawer-menu-list,
        body.night .login-main,
        body.night .other-project,
        body.night .return-top,
        body.night .return-index,
        body.night .dark-mode,
        body.night .qq-login,
        body.night .users-login {
            background-color: #191616 !important;
            color: #E3E3E3 !important;
        }

        body.night .post-list-page-plane,
        body.night .post-item,
        body.night .frinds-links,
        body.night .search-keyword,
        body.night .widger-comment-excerpt,
        body.night .widger-comment-excerpt::before,
        body.night .user-sub-menu,
        body.night .index-top-postcard-main,
        body.night .sub-menu,
        body.night .catalog-close,
        body.night .comment_form_textarea,
        body.night .conment-face-plane,
        body.night .wp-embed,
        body.night .comment,
        body.night .wp-embed,
        body.night .popup-menu,
        body.night .popup-login,
        body.night .popup-register,
        body.night .night-mode {
            background-color: #232425 !important;
            color: #757575 !important;
        }

        body.night .list-plane-title,
        body.night .pages {
            background-color: #1D1E1F !important;
            color: #E3E3E3 !important;
        }

        body.night .post-list {
            background-color: #1d1e1f !important;
        }

        body.night img {
            filter: brightness(90%);
        }

        body.night a,
        body.night a:link,
        body.night a:visited {
            color: #989292 !important;
        }

        body.night .index-load-more-btn,
        body.night .search-submit,
        body.night .button,
        body.night .c-downbtn-btn,
        body.night .login-btn-header,
        body.night .login-button,
        body.night .comment-from,
        body.night #cancel-comment-reply-link {
            background-color: #34495E !important;
        }

        body.night .post-item-main {
            color: #232425 !important;
        }

        body.night .post-content,
        body.night #post-catalog,
        body.night .relevant-plane,
        body.night .responsesWrapper,
        body.night .post-title {
            background-color: #171616 !important;
            color: #FFFFFF !important;
        }

        body.night .post-copyright {
            background-color: #0B0C0C !important;
            color: #555555 !important;
        }

        body.night .popover-btn {
            background-color: #ccc !important;
        }

        body.night .author_name,
        body.night .widget-title {
            color: #FFFFFF !important;
        }

 

 

本站部分文章资源来源于互联网,仅供学习交流,如若要商用,请购买正版!
若不听劝告,网友造成出现一切后果,与本站本人无关
本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源:https://www.zhoubaiwl.club/3276.htm
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录