狐狸聚合登录，欢迎各位站长接入！
查看详情

WordPress子比主题美化教程合集【持续更新】

1614700

免费领流量卡 流量卡包邮 本站同款主题 广告招租

本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。

注意说明

  • 每个人的审美观念不一样，所以请先参考本站或测试在用。
  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。
  • 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
  • 美化代码部分采集跟站长捣鼓出来的，都是已经过测试。

更新教程及说明

  • （最新版）CSS代码添加到后台子比主题设置->自定义代码->自定义CSS样式
  • （最新版）JS即javascript代码添加到后台子比主题设置->自定义代码->自定义javascript代码
  • （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。
  • 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。

美化教程

自定义css

// FPS 帧开始
$('body').before('');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;

fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
// FPS 帧结束

开通会员

<a class="float-btn pay-vip" vip-level="1" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
<a class="pay-vip" href="javascript:;">

联系站长

<a href="javascript:;" data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1" data-class="modal-mini" data-toggle="RefreshModal" title="联系我们">联系我们</a>吧</div>

积分购买

<a data-class="modal-mini full-sm" data-height="330" data-remote="/wp-admin/admin-ajax.php?action=points_pay_modal" href=";" data-toggle="RefreshModal"><span style="color:red">积分不够？点我 快速购买积分</span></a>

侧边栏样式（二选一）

<div class="zib-widget widget_text">
<div class="zib-widget widget_block">
</div>

文本居中

<div class="text-center">
</div>

颜色代码

<span style="color: red"></span>
<style type="text/css" id="wp-custom-css">
.icon {
    width: 1em;
    : 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.footer .list-inline {
  text-align: center;
}    
</style>
图片[1] - WordPress子比主题美化教程合集【持续更新】 - 狐狸资源网
图片[2] - WordPress子比主题美化教程合集【持续更新】 - 狐狸资源网

上面的图片是圆角，代码很简单，直接将代码放到自定义CSS即可

.wp-posts-content img {border-radius: 13px};

后台==》子比设置==》全局，自定义代码==》CSS==》加入代码

/*隐藏点赞*/
.item-meta {display: none;}

隐藏文章发布时间

/*子比隐藏文章发布时间*/
.icon-circle{visibility: hidden;}

后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可

<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "310",
    "height": "310",
    "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>
图片[3] - WordPress子比主题美化教程合集【持续更新】 - 狐狸资源网

在 后台—外观—小工具—首页-底部全宽度，自定义HTML 添加下面代码即可。(其他位置自行修改~)

<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>博客</h3>
      <p>欢迎光临！</p>
    </div>
    <ul class="actions">
      <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="/links" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>
图片[4] - WordPress子比主题美化教程合集【持续更新】 - 狐狸资源网

自定义CSS

/*导航栏字体加粗开始*/
ul.nav {font-weight: 700;}
/*导航栏字体加粗结束*/

自定义CSS样式

/* logo 扫光开始 */
.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 扫光结束 */
图片[5] - WordPress子比主题美化教程合集【持续更新】 - 狐狸资源网
美化前
图片[6] - WordPress子比主题美化教程合集【持续更新】 - 狐狸资源网
美化后

将下面的代码放到自定义CSS即可！

.payvip-icon{color: #ffffff;--this-color: #ffffff;background:linear-gradient(135deg,#ff7faf91 10%,#43b2ff 100%);}.vip-theme1{background:linear-gradient(135deg,#ff7faf91 10%,#43b2ff 100%);}.vip-theme2{background:linear-gradient(43deg,#ff6ac3 0%,#465dff 46%,#72e699 100%);color:#e4e2fb;}

1 2 3 4

本文最后更新于2024-09-25 14:44:28，若文章内容或链接失效，请 留言 或 QQ群 反馈！
© 版权声明

本文链接：
文章作者
狐狸资源网
隐私政策
PrivacyPolicy
用户协议
UseGenerator
许可协议
NC-SA 4.0
THE END
子比美化
# 子比主题
如果喜欢，可以【点赞】【分享】【收藏】
点赞0赞赏 分享
青木的头像 - 狐狸资源网至尊会员
子比主题美化 – 自定义悬浮按钮[修复TOP按钮] - 狐狸资源网
子比主题美化 – 自定义悬浮按钮[修复TOP按钮]
子比主题美化 – 自定义悬浮按钮[修复TOP按钮]
3个月前 502
子比主题美化 – 网站增加付费记录滚动弹幕插件 - 狐狸资源网
子比主题美化 – 网站增加付费记录滚动弹幕插件
子比主题美化 – 网站增加付费记录滚动弹幕插件
2个月前 448
子比主题美化 – 自定义文章标签前缀申明 - 狐狸资源网
子比主题美化 – 自定义文章标签前缀申明
子比主题美化 – 自定义文章标签前缀申明
3个月前 438
子比主题美化 – 最新发布与逐字滚动公告模块 - 狐狸资源网
子比主题美化 – 最新发布与逐字滚动公告模块
子比主题美化 – 最新发布与逐字滚动公告模块
3个月前 414
WordPress – 实现文章添加设置隐藏内容关注公众号可见 - 狐狸资源网
WordPress – 实现文章添加设置隐藏内容关注公众号可见
WordPress – 实现文章添加设置隐藏内容关注公众号可见
3个月前 389
子比主题美化 – H1-H6标题美化为自定义图像效果 - 狐狸资源网
子比主题美化 – H1-H6标题美化为自定义图像效果
子比主题美化 – H1-H6标题美化为自定义图像效果
3个月前 366
相关推荐
子比主题美化 – 添加首页文章上面的导航小工具框 - 狐狸资源网
子比主题美化 – 添加首页文章上面的导航小工具框
子比主题美化 – 添加首页文章上面的导航小工具框
2个月前 63
子比美化功能 – 悬浮文章推荐榜单 - 狐狸资源网
子比美化功能 – 悬浮文章推荐榜单
子比美化功能 – 悬浮文章推荐榜单
3个月前 118
子比主题美化 – 侧边栏小工具引导 - 狐狸资源网
子比主题美化 – 侧边栏小工具引导
子比主题美化 – 侧边栏小工具引导
39天前 42
WordPress – 文章内超链接加上波浪效果 - 狐狸资源网
WordPress – 文章内超链接加上波浪效果
WordPress – 文章内超链接加上波浪效果
3个月前 92
子比主题美化 – 卡片模式增加仿mac三个点教程 - 狐狸资源网
子比主题美化 – 卡片模式增加仿mac三个点教程
子比主题美化 – 卡片模式增加仿mac三个点教程
2个月前 100
子比主题美化 – 自定义文章标签前缀申明 - 狐狸资源网
子比主题美化 – 自定义文章标签前缀申明
子比主题美化 – 自定义文章标签前缀申明
3个月前 438
子比主题 – 自定义认证SVG图标美化 - 狐狸资源网
子比主题 – 自定义认证SVG图标美化
子比主题 – 自定义认证SVG图标美化
3个月前 54
WordPress Zibll子比主题用户自助注销插件v1.0.0 - 狐狸资源网
WordPress Zibll子比主题用户自助注销插件v1.0.0
WordPress Zibll子比主题用户自助注销插件v1.0.0
2个月前 89
子比主题美化 – 论坛模式调用文章版权声明 - 狐狸资源网
子比主题美化 – 论坛模式调用文章版权声明
子比主题美化 – 论坛模式调用文章版权声明
1个月前 42
子比主题美化 – 文章标题文字添加彩色渐变效果 - 狐狸资源网
子比主题美化 – 文章标题文字添加彩色渐变效果
子比主题美化 – 文章标题文字添加彩色渐变效果
2个月前 53
子比主题美化 – 滚动显示新用户注册公告提示 - 狐狸资源网
子比主题美化 – 滚动显示新用户注册公告提示
子比主题美化 – 滚动显示新用户注册公告提示
2个月前 151
子比主题美化 – 文章卡片三个点美化+代码区块圆点美化 - 狐狸资源网
子比主题美化 – 文章卡片三个点美化+代码区块圆点美化
子比主题美化 – 文章卡片三个点美化+代码区块圆点美化
3个月前 118
子比主题美化 – 首页分类栏目标题 - 狐狸资源网
子比主题美化 – 首页分类栏目标题
子比主题美化 – 首页分类栏目标题
2个月前 67
子比主题美化 – 给你的首页添加滚动banner - 狐狸资源网
子比主题美化 – 给你的首页添加滚动banner
子比主题美化 – 给你的首页添加滚动banner
3个月前 166
子比主题美化 – 侧边栏推广主题小工具教程 - 狐狸资源网
子比主题美化 – 侧边栏推广主题小工具教程
子比主题美化 – 侧边栏推广主题小工具教程
3个月前 122
子比主题美化 – 给评论框加上好看的右侧背景图片 - 狐狸资源网
子比主题美化 – 给评论框加上好看的右侧背景图片
子比主题美化 – 给评论框加上好看的右侧背景图片
2个月前 57
子比主题美化 – 文章页面添加文章字数和阅读时间 - 狐狸资源网
子比主题美化 – 文章页面添加文章字数和阅读时间
子比主题美化 – 文章页面添加文章字数和阅读时间
2个月前 89
子比主题美化 – 加一个NEW居中标题样式美化 - 狐狸资源网
子比主题美化 – 加一个NEW居中标题样式美化
子比主题美化 – 加一个NEW居中标题样式美化
3个月前 23
子比主题美化 – 通用精美时尚网站底部代码 - 狐狸资源网
子比主题美化 – 通用精美时尚网站底部代码
子比主题美化 – 通用精美时尚网站底部代码
3个月前 64
子比主题美化侧边栏添加网站统计小工具【更新美化版】 - 狐狸资源网
子比主题美化侧边栏添加网站统计小工具【更新美化版】
子比主题美化侧边栏添加网站统计小工具【更新美化版】
3个月前 56
评论 共16条

请登录后发表评论

    只看作者
    • Staid的头像 - 狐狸资源网Staid等级-LV1 - 狐狸资源网0
      谢谢站长 用到啦
      1个月前江苏省苏州市
    11. 12
子比主题 - 一款优雅的主题
  • 安装wordpress及主题服务一次
  • 一次购买终身免费提供主题更新服务
  • 强大的人工服务，为你解决主题问题
  • 使用无忧，协助使用后台设置
  • 本站同款优化远程协助提升网站速度
    • ￥599
    特别特惠
    ￥699
    立即购买
    鼠标样式默哀色黑神话黑名单查询录入系统魔方财务香蕉影牛首页排行榜首页大图搜索首页列表颜色取色器预约系统页面自定义页面加载页脚美化页脚音乐网站主题音乐播放器音乐随机美女源码随机美图随机浏览
    协助一下SEO优化
    关键词不能为空