WordPress子比主题美化教程合集[2024/10/7](持续更新)kobai2天前更新关注私信621512 前言 本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集,使用之前先参考本站,若觉得实用就拿去用吧,我会不定时更新,如有长期未更新或者不能使用的请留言。 注意说明 每个人的审美观念不一样,所以请先参考本站或测试在用的美化。 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后再进行美化。 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。 子比主题美化都是狐狸自己鼓捣、测试后才发布的,完全免费,开放。 教程及说明 (最新版)CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式 (最新版)JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码 (最新版)没有特殊说明的小工具,自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去,保存即可。 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我不重复告知了,请注意看上面的方法。 #1 主题LOGO扫光 CSS代码:后台子比主题设置->自定义代码->自定义CSS样式 /* logo扫光开始 kobai.top*/ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}} /* logo扫光结束 kobai.top*/ #2 文章标签美化 CSS代码:后台子比主题设置->自定义代码->自定义CSS样式 /*文章随机彩色标签开始 kobai.top*/ .article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF} /*文章随机彩色标签结束 kobai.top*/ #3 侧边彩色滚动条 使用方法 一般主题都会自带 自定义代码 这样主题设置的,只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦!如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美! WordPress子比主题侧边滚动条样式美化教程 1年前161630 #4 头像呼吸光环+鼠标悬停旋转放大 CSS代码:后台子比主题设置->自定义代码->自定义CSS样式 头像呼吸光环和鼠标悬停旋转放大 1年前0800 #5 底部添加蓝色波浪 网站底部添加蓝色波浪美化教程 1年前0770 #6 外链重定向go页面美化 WordPress主题外链重定向go页面美化教程代码分享 1年前221330 #7 滚动播报小工具 WordPress子比主题添加滚动播报小工具美化版 1年前111010 #8 可爱的返回顶部悬挂猫 博客网站添加一个可爱的返回顶部悬挂猫 1年前12770 #9 侧边栏旗下网站小工具 WordPress主题添加侧边栏“旗下网站”小工具 1年前2610 #10 子比版权说明美化 WordPress子比主题网站的版权说明美化 1年前151721 1 2 3 4 © 版权声明 版权声明 1 本网站名称:星空知 2 本站永久网址:https://www.xkzhi.cn/ 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ1397403557进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END子比教程技术教程子比美化技术教程# WP# 网站# 子比# 美化# Html# 子比主题# wordpress# logo 喜欢就支持一下吧点赞2赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏