WordPress子比主题美化教程合集—持续更新中

• 这个小东西估计大家都很熟悉，一般就是引导用户收藏网站用途，因此分享给大家
• 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
• 2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
• 社长是放在 所有页面-页脚区内部 添加下方代码

有朋友联系想要这个效果功能，因为最近比较忙，一直没有分享，正好趁着这次分享一次性分享给大家

在 zibll 主题目录下，themes/zibll/footer.php文件中的顶部添加下面添加下面的代码

效果预览

• 1、找到子比主题/wp-content/themes/zibll 目录下的 go.php 文件打开
• 2、直接将下面的代码复制替换到 go.php 文件中即可
• 3、如需修改跳转快与慢，在文件的 78 行，将默认的 1500 修改即可，数值越小加载越快

• 1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：
• 2.在代码 28 行 background: url(）括号内填写你需要显示的图片链接

/*悬浮按钮美化开始*/
span.float-btn.more-btn.hover-show.nowave {
    margin-top: 0px
}
.float-right.round.position-bottom {
    background: #fff;
    border-radius: var(--main-radius);
    transition: 0s;
    right: 1px;
    bottom: 170px;
    border-radius: 20px 0 0 20px;
    box-shadow: -5px 3px 10px 0px rgb(5 5 5 / 15%)
}
.float-right.round .float-btn {
    border-radius: 8px 0px 0px 17px
}
.float-right .float-btn {
    background: #fff
}
.float-right.round.position-bottom::before {
    content: '';
    width: 30px;
    height: 60px;
    background: url(填写你显示的图片链接);
    background-size: cover;
    display: block;
    margin: 5px 3px 0 7px;
}
.dark-theme .float-right.round.position-bottom {
    background: #414141;
    border: 1px solid #4a4a4a;
    transition: 0s
}
.dark-theme .float-right .float-btn {
    background: #414141
}
.dark-theme .float-right.round.position-bottom a:hover {
    background: #505255;
    --this-color: var(--muted-2-color)
}
.dark-theme .float-right.round.position-bottom span:hover {
    background: #505255;
    --this-color: var(--muted-2-color)
}
span.newadd-btns.hover-show.float-btn.add-btn .hover-show-con.dropdown-menu.drop-newadd>a:hover {
    background-color: #d8d8d836;
    border-radius: 8px
}
a.float-btn.ontop.fade {
    display: none
}
/*悬浮按钮美化结束*/

子比主题设置—>自定义代码—>自定义 javascript 代码：,添加以下 JS 代码：

// 早夜间模式切换提示弹窗
$(".toggle-theme").click(function() {
var toggleThemeText = "当前为早间亮白模式";
if (!$("body").hasClass('dark-theme')) {
toggleThemeText = "当前为晚间暗黑模式";
$("body").css("background-image","none");
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
}); 
// 早夜间模式切换提示弹窗结束

• 这个功能其实很多朋友应该都有之前的那种樱花效果，但是用过的都知道那个樱花效果太妨碍阅读了，今天分享给大家一个优化版，减少了数量以及效果优化
• 将下面的这段代码整合到新建 js 文件，命名 leaves.js，然后引用，就可以看到效果了，我就不上预览图了
• 默认效果是枫叶，如果想改成其他的可自行更换代码第三行中的文件图片矢量图

<script src="你上传的文件路径地址/leaves.js"></script>

• 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
• 2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
• 3、我是添加在文章侧边栏
• 4、修改代码中的链接以及文字改为自己的

<div class="textwidget"><div class="attentionus"><span class="zhan-widget-link zhan-link-z1"> <span class="zhan-widget-link-count">超清无广告视频</span> <a href="https://www.xzma.cn/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">98 视频</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z2"> <span class="zhan-widget-link-count">在线视频解析</span> <a href="https://www.xzma.cn/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">视频解析</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z3"> <span class="zhan-widget-link-count">全网超清壁纸</span> <a href="https://www.xzma.cn/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">电脑壁纸</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z4"> <span class="zhan-widget-link-count">抖音视频去水印</span> <a href="https://www.xzma.cn/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">抖音去水印</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z5"> <span class="zhan-widget-link-count">全网音乐搜索</span> <a href="https://www.xzma.cn/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">在线音乐搜索</span> </a></span></div>
<style type="text/css">
.zhan-widget-link{position:relative;margin-bottom:-10px !important;position:relative;display:block;font-size:13px;background:#fff;color:#525252;line-height:40px;margin-left:-10px;padding:0 14px;border:1px solid #DDD;border-radius:2px;width:auto}span.zhan-widget-link.zhan-link-z1 {margin-top: -10px;}.zhan-widget-link-count i{margin-right:9px;font-size:17px;vertical-align:middle}.zhan-widget-link-title{position:absolute;top:-1px;right:-14px !important;bottom:-1px;width:100px;text-align:center;background:rgba(255,255,255,.08);transition:width .3s;border-radius:0 3px 3px 0}.zhan-widget-link:hover .zhan-widget-link-title{width:116px}.zhan-widget-link a{position:absolute;top:0;left:0;right:0;bottom:0}.zhan-link-z1{border-color:rgba(236,61,81,.39)}.zhan-link-z1 i{color:#FFF;margin-right:3px}.zhan-link-z1 .zhan-widget-link-title{background-color:#ec3d51;color:#fff}.zhan-link-z2{border-color:rgba(18,170,232,.39)}.zhan-link-z2 i{color:#FFF;margin-right:3px}.zhan-link-z2 .zhan-widget-link-title{background-color:#12aae8;color:#fff}.zhan-link-z3{border-color:rgba(221,7,208,.39)}.zhan-link-z3 i{color:#FFF;margin-right:3px}.zhan-link-z3 .zhan-widget-link-title{background-color:#dd07d0;color:#fff}.zhan-link-z4{border-color:rgba(249,82,16,.39)}.zhan-link-z4 i{color:#FFF;margin-right:3px}.zhan-link-z4 .zhan-widget-link-title{background-color:#f95210;color:#fff}.zhan-link-z5{border-color:rgba(25,152,114,.39)}.zhan-link-z5 i{color:#FFF;margin-right:3px}.zhan-link-z5 .zhan-widget-link-title{background-color:#199872;color:#fff}</style>
</div>

1. 先下载我提供的文件
2. 将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
3. 添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
4. 我是添加在首页顶部全宽度
5. 修改代码中的链接以及文字改为自己的就好
6. 将我提供的三个 css 和 js 文件上传到你自己服务器，然后再下面代码填写对应路径

模块代码下载地址