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

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

05813

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

注意说明

    • 每个人的审美观念不一样，所以请先参考本站或测试在用。

    • 主题美化、小工具可能会有一定程度使网站加载缓慢、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>

自定义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 扫光结束 */

自定义CSS代码

.notyf.success {
    background: linear-gradient(90deg,rgb(249 15 15 / 70%),rgba(61,189,249,.8));
    border-radius: 18px 0 0 18px;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
    .meta-right .meta-like{
      display: unset !important;
    }
  }

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

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

隐藏文章发布时间

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

温馨提示： 本文最后更新于2025-04-20 18:35:22，某些文章具有时效性，若有错误或已失效，请在下方留言或联系柒小颜博客。
© 版权声明
柒小颜博客
" 专注网络技术分享打造一个IT博客 ！"
打赏作者
订阅
本文是原创文章，采用CC BY-NC-SA 4.0协议，完整转载请注明来自云先森
THE END
子比美化
# CSS# 子比美化# 合集# WordPress
喜欢就支持一下吧
点赞13赞赏 分享
云先森的头像-柒小颜博客
子比主题美化 – 最新防苹果动态灵动岛样式-柒小颜博客
子比主题美化 – 最新防苹果动态灵动岛样式
子比主题美化 – 最新防苹果动态灵动岛样式
22天前 92
教大家快速获取网站全部链接百度推送的方法-柒小颜博客
教大家快速获取网站全部链接百度推送的方法
教大家快速获取网站全部链接百度推送的方法
9天前 84
子比主题美化 –侧边栏自定义悬浮按钮适配多种功能按钮-柒小颜博客
子比主题美化 –侧边栏自定义悬浮按钮适配多种功能按钮
子比主题美化 –侧边栏自定义悬浮按钮适配多种功能按钮
6天前 82
子比主题美化 – 首页底部统计小工具-柒小颜博客
子比主题美化 – 首页底部统计小工具
子比主题美化 – 首页底部统计小工具
11天前 82
使用Redis Object Cache Pro1.23.1插件WordPress网站访问速度优化教程-柒小颜博客
使用Redis Object Cache Pro1.23.1插件WordPress网站访问速度优化教程
使用Redis Object Cache Pro1.23.1插件WordPress网站访问速度优化教...
9天前 82
WordPress模板柒比贰B2 PRO主题免授权最新版5.4.2-柒小颜博客
WordPress模板柒比贰B2 PRO主题免授权最新版5.4.2
WordPress模板柒比贰B2 PRO主题免授权最新版5.4.2
11天前 80
相关推荐
子比主题美化 – 最新防苹果动态灵动岛样式-柒小颜博客
子比主题美化 – 最新防苹果动态灵动岛样式
子比主题美化 – 最新防苹果动态灵动岛样式
22天前 92
子比主题美化 –侧边栏自定义悬浮按钮适配多种功能按钮-柒小颜博客
子比主题美化 –侧边栏自定义悬浮按钮适配多种功能按钮
子比主题美化 –侧边栏自定义悬浮按钮适配多种功能按钮
6天前 82
子比主题美化 – 首页底部统计小工具-柒小颜博客
子比主题美化 – 首页底部统计小工具
子比主题美化 – 首页底部统计小工具
11天前 82
评论 抢沙发

请登录后发表评论

    暂无评论内容