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&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.2bcnm.com/3276.htm
若不听劝告，网友造成出现一切后果，与本站本人无关
本站有些资源未经测试，请注意网络安全，本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源：https://www.2bcnm.com/3276.htm
THE END
0
二维码
打赏
海报
CorePress主题后台添加多功能侧边栏，夜间模式，快捷登录，返回主页等
效果
实现
类名啥的起的有点乱，将就看吧，图标、图片、链接需要你自己修改。
注释啥的也懒得写，想要添加功能的自己研究。
代码写的可能不太……
文章目录
关闭
共有 0 条评论