【WP建站记录】zibll子比主题美化汇总（持续更新）

路径：【Zibll主题设置】-【自定义代码】-【自定义CSS样式】粘贴下面的代码

/***日间主题模式***/
body {
    background-image: url("XXXXXXXX");/**这里改为你自己的图片地址**/
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("XXXXXXXXX");/**这里改为你自己的图片地址**/
    background-size: cover;
}

可以用svg动态图像来达到动态的效果或者使用js来达到粒子效果，这边提供一下本站制作好的SVG动态图片供大家选择。（PS：如果想要修改其他样式的svg图像可以私信我）

在子比主题目录下的footer.php文件下加入如下js文件

1. 准备工作：B站追番需要开启公开番剧，上传这些文件到网站任意目录。

2. 把bilibili-bangumi.php文件上传到子比主题的pages目录下。

3. 修改bilibiliAcconut.php文件，将UID和cookie复制进去。

3.1 B站cookie获取方法：登录B站，打开F12开发者模式，在控制台输入如下代码

javascript:prompt("",document.cookie);

在WordPress的小工具中添加如下HTML代码

• 网页顶部增加彩色进度条

在主题自定义CSS中，添加如下代码

/**彩色滚动条样式*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

• 网页侧边增加彩色进度条

在主题自定义CSS代码处加上如下代码

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

在footer.php下加入如下js代码

//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

在主题目录的header.php中加入如下代码

<div id="percentageCounter"></div>

在footer.php中引用以下两个JS文件

<!--复制提示-->
<script src="https://你的网站域名/sweetalert2@8.js"></script>
<script src="https://你的网站域名/copy_notice.js"></script>

1. 在functions.php中添加代码

2. 上面代码中对应的静态资源

3. 前面function代码添加完成后，路径/wp-content/themes/zibll/template/comments.php里88行处添加代码 （在取消按钮上面的位置）

在后台新增如下CSS样式

/* 光标样式 star*/
body {cursor: url(https://你的资源路径/normal.cur), default;}
a:hover{cursor:url(https://你的资源路径/link.cur), pointer;}
input:hover{cursor:url(https://你的资源路径/text.cur), pointer;}
/* 光标样式 end*/