注意说明
- 每个人的审美观念不一样,所以请先参考本站或测试在用。
- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化。
- 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
- 美化代码部分采集跟站长捣鼓出来的,都是已经过测试。
更新教程及说明
- (最新版)CSS代码添加到后台子比主题设置->自定义代码->自定义CSS样式
- (最新版)JS即javascript代码添加到后台子比主题设置->自定义代码->自定义javascript代码
- (最新版)没有特殊说明的小工具,自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去,保存即可。
- 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我不重复告知了,请注意看上面的方法。
4.子比主题右侧悬浮按钮栏美化
5.子比主题添加微语页面[子比主题教程]
6.WordPress添加FPS帧率显示[WP教程]
7.WordPress添加滚动播报小工具[WP小工具]
8.WordPress侧边栏添加简单的小模块[WP小工具]
9.WordPress自定义后台路径参数及伪后台[WP教程]
10.WordPress添加VIP视频在线解析页面[WP教程]
11.子比主题添加热门标签页面[子比主题教程]
12.子比主题添加底部统计信息模块小工具
13.zibll子比主题文章标签美化[主题美化]
14.网站点击彩色效果[整站笔记]
15.网站侧边滚动条样式
使用方法
只需在主题设置自定义CSS代码里面添加美化的css代码即可! 如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码即可!
滚动条样式代码CSS:
::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
::-webkit-scrollbar-thumb {
border-radius: 0.125rem;
-moz-border-radius: 0.125rem;
-webkit-border-radius: 0.125rem;
background-color: #ccc;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
16.鼠标悬停头像旋转放大
/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius:50%; animation:light 4s ease-in-out infinite;transition:0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}
/*头像呼吸光环和鼠标悬停旋转放大结束*/
17.网站动态标题
//网站动态标题开始
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
document.title = "【新消息】你有一条未读消息";
clearTimeout(titleTime)
} else {
titleTime = setTimeout(function() {
document.title = OriginTitile
},
100)
}
});
//网站动态标题结束
18.修改网站整站字体
因为字体是在本站的,如果需要的话可以点我下载,把字体下载放到根目录,把wuaijs.cn修改成你的主站链接即可。
自定义代码CSS
/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("https://wuaijs.cn/WebFont.woff2") format("woff2");font-display: swap;}
*{font-family: "lovely"}
/*自定义网站字体结束*/
19.修改网站的鼠标样式
因为鼠标样式是在本站的,如果需要的话可以打开下载指针样式和下载指针悬停链接把样式下载,在wp-content/uploads里新建一个mouse的文件夹把两个文件放进去,把wuaijs.cn修改成你的主站链接即可。
自定义代码CSS
/** 普通指针样式**/
body{cursor: url(https://wuaijs.cn/wp-content/uploads/mouse/normal.cur), default;}
/** 链接指针样式**/
a:hover,.cursor:hover,button:hover,svg:hover{cursor:url(https://wuaijs.cn/wp-content/uploads/mouse/link.cur), pointer;}
/** 鼠标样式 结束**/
20.网站复制文字弹窗提示
子比主题设置—>自定义代码—>自定义javascript代码:,添加以下代码:
//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【吾爱技术网(wuaijs.cn)】<br>复制成功,若要转载请务必保留原文链接!</p>', function(){});}
子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码:
<!--透明复制提示开始-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->
21.给网站添加和风天气模块
后台设置—>外观—>小工具—>添加自定义HTML代码,加到合适侧边栏即可
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
"CONFIG": {
"layout": "2",
"width": "285",
"height": "300",
"background": "1",
"dataColor": "FFFFFF",
"borderRadius": "5",
"key": "3180d3c43e524753ab8bcef69dba023a"
}
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
22.文章添加设置隐藏内容关注公众号可见
23.
24.
25.
感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
- 最新
- 最热
只看作者