子比美化 第11页
子比主题美化相关教程
分类
排序
2026-01-28
评论可见
子比 Mac 风格卡片小工具-识趣者资源

子比 Mac 风格卡片小工具

仿 Mac App Store 风格的卡片展示模块，多功能自定义卡片小工具。 功能特点：带图标的彩色标题栏，8种预设背景可选卡片布局跟随子比主题设置，自动响应式支持两种数据来源：自定义卡片 或 分类文章每个卡片包含：封面图、缩略图、标题、简介、下载按钮按钮样式可选演示截图 后台框架 获取代码 [hidecontent type="reply"] /** * Mac 风格卡片小工具-大海 * 使用CSF框架，使用子比主题卡片布局 */ // 默认背景图（可以自己下载到本地） define('MAC_CARD_DEFAULT_BG', 'https://tirzsjsxujuxsoqj.sh1.hi168.com/2026/01/28/35a0f2fa2d5a8.png'); Zib_CFSwidget::create('zib_widget_ui_mac_card', array( 'title' => 'Mac风格卡片', 'zib_affix' => true, 'zib_show' => true, 'description'...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
888积分
子比主题美化 – 太空人时钟表盘-识趣者资源

子比主题美化 – 太空人时钟表盘

很火的华为太空人表盘源码，基于SVG+JavaScript实现网红华为太空人表盘GT...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-网站右上角添加复制弹出样式-识趣者资源

子比主题-网站右上角添加复制弹出样式

效果演示 投放位置 1.子比主题设置 >> 自定义代码 >> 自定义底部 HTML 代码：添加以下代码：2.其他主题自行添加在主题的 head 或 food 文件底部即可，具体效果自行测试。 [hidecontent type="reply"] <!--第二款复制提示开始--> <script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/fzts/ts.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/fzts/ts.css" /> <script type="text/javascript"> function copy_remind(){ toastr.success("撰文不易，若要转载请务必保留原文链接，谢谢！", "复制成功！"); clear_toastr(1600); // 动态设置消息提示时间 function clear_toastr(time){ setTimeout( function(){...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-独立下载页面美化第一版-识趣者资源

子比主题-独立下载页面美化第一版

使用说明 修改了下载页面，添加手机自适应，如果更新主题时下载页面（/wp-content/themes/zibll/pages/download.php）没改动代码的话，更新主题后【复制粘贴代码】进去就能用！（更新前记得备份！记得备份！记得备份！不然就被刷新代码了） 效果演示 [hidecontent type="reply"] <?php /** * Template name: XY-资源下载 * Description: XY-独立资源下载页面 */ if (empty($_GET['post'])) { get_header(); get_template_part('template/content-404'); get_footer(); exit; } get_header(); $post_id = $_GET['post']; function zibpay_get_down_html($post_id) { $pay_mate = get_post_meta($post_id, 'posts_zibpay', true);...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-顶部添加彩色进度条-识趣者资源

子比主题-顶部添加彩色进度条

CSS代码 [hidecontent type="reply"] /*进度条加载显示*/ #percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;} [/hidecontent] javascript代码 [hidecontent type="reply"] //进度条加载显示 $(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-在文章页添加彩色渐变框-识趣者资源

子比主题-在文章页添加彩色渐变框

首先把下面的CSS丢到你的主题css样式文件内或style.css样式文件内 [hidecontent type="reply"] #smcos_mhz,#smcos_xgh,#smcos_tkzj,#smcos_xyz,#smcos_gll ,#smcos_xty,#smcos_yyz,#smcos_szh,#smcos_wbk{ /*圆角值,在此定义*/ border-radius: 8px; } /*样式-迷幻紫*/ #smcos_mhz{ color: #555555; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-侧边滚动条样式美化教程-识趣者资源

子比主题-侧边滚动条样式美化教程

WordPress默认的浏览器侧边栏滚动条是非常丑陋的，当然，有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化，有些WordPress主题是没有美化侧边滚动栏的，那么这时就需要我们去美化啦！狐狸站长今天就教大家如何自定义美化侧边滚动栏。其实非常简单，只需一句代码的事情就可以自定义美化WordPress侧边滚动栏，并且代码适用于绝大多数WordPress主题。 使用方法 只需在主题设置自定义CSS代码里面添加美化的css代码即可！ 如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码即可！ 单色滚动条样式 [hidecontent type="reply"] /*滚动条显示样式*/ ::-webkit-scrollbar-thumb{ background-color:#FF6666; /*更改喜欢的十六进制颜色*/ height:50px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:4px; border: 2px solid #fff; } /*滚动条大小*/ ::-webkit-scrollbar{ width:8px; height:8px; } /*滚动框背景样式*/ ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; } [/hidecontent]...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-内嵌其他网页-识趣者资源

子比主题-内嵌其他网页

操作步骤 首先到你的主题根目录，这里以本站子比主题为例，路径为：你的网址/wp-content/themes/zibll/ 新建一个空白文件 空白文件自定义命名，我这里内嵌狐狸论坛，所以就填写 bbs.php 命名后确认一下路径，然后打开刚新建的文件 将下方代码粘贴进去，记得更换你要内嵌的网址 代码 [hidecontent type="reply"] <?php /** * Template name: Huliku - 内嵌网页 * Description: Huliku - 内嵌网页 */ // 获取链接列表 get_header(); $header_style = zib_get_page_header_style(); ?> <!--开始--> <iframe src="你要内嵌的网址" width="100%"...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-修改“付费资源”文字为图标-识趣者资源

子比主题-修改“付费资源”文字为图标

很多使用子比主题的站长朋友都感觉付费资源图标显示太长，都有意想修改为图标显示，子比官网也有人分享过这方面的教程，但是需要付费购买，找了下相关教程，做一下记录，也跟大家分享一下怎么改掉它！ 效果演示 使用方法 [hidecontent type="reply"] 文件路径：zibll\inc\functions\zib-posts-list.php 搜索【$mark = zibpay_get_pay_mark();】后面添加以下代码 $svg = '<symbol id="icon-points" viewBox="0 0 1024 1024"> <path d="M419.886252 370.432927c119.605022 0 243.995044-26.302516 318.706976-76.460106v91.304594h69.207683V185.366307C807.800911 65.18189 607.999688 0.289697 420.006126 0.289697S32.091467 65.18189 32.091467 185.366307v545.629859c0 120.184417 199.801223 185.076609 387.794785...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-首页六格菜单PC版-识趣者资源

子比主题-首页六格菜单PC版

效果演示 Html代码 可直接添加到后台 小工具 >> 自定义HTML代码，里面的图片链接自行替换。 [hidecontent type="reply"] <div class="home-row-left content-area "> <div id="html-box-lg" class="html-box"> <div class="sort mobile-hidden"> <!-- 专题 --> <div class="sort-swiper-container swiper-container swiper-container-initialized swiper-container-horizontal"> <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1178px, 0px, 0px);"> <ul...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-动态背景美化-识趣者资源

子比主题-动态背景美化

一成不变的白色背景是不是看腻了？那今天我们来更换一下网页背景吧，还是动态的哦~ 效果预览 使用步骤 JS代码 [hidecontent type="reply"] <div id="bubble"></div> <script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFr ame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script> [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-网站资源下载动态按钮美化-识趣者资源

子比主题-网站资源下载动态按钮美化

一般博客网站的文章底部平时需要一些演示，下载的文件之类，都会做个下载，分享按钮方便使用。觉得还不错就分享出来给大家。 效果预览 我这里提供完整代码就不拆分了，按钮文字你也可以自行更改，需要几个按钮，就复制或删除a标签。博客使用：你直接复制css代码放置公共css中，将body中的div节点放到文章需要显示下载的地方即可。 [hidecontent type="reply"] <style> .tp-down-box{ width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .down-btn { letter-spacing: 0.1em; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 45px; width: 23%; max-width: 160px; text-decoration:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
WordPress子比主题插入高清bilibili哔哩哔哩视频代码-识趣者资源

WordPress子比主题插入高清bilibili哔哩哔哩视频代码

站长门都知道，许多博客主题都是支持嵌入bilibili视频代码播放的，但是有一个通病，就是嵌入的视频都是以最低视频分辨率播放，今天主要就是解决这个问题！ 在B站有很多影片资源可以分享，若想分想到自己的WordPress网站该怎么做呢？ 首先在“点击复制链接”处复制“嵌入代码” 在WordPress使用HTML插入媒体，填入代码后会变成下图这样，整个影片尺寸是变小的（如下） 因为B站预设的外站引用解析度是最低的，因此所以不能直接贴上代码 需要加上一段代码，让B站影片能跟随自家网站的大小来做改变： [hidecontent type="reply"] 1. 加入代码修改影片显示大小 width="100%" height="600" 比如说我想要分享的影片代码是这串 <iframe src="//player.bilibili.com/player.html?aid=914606049&bvid=BV1Mu4y1z7a9&cid=1229413200&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> 那我就在iframe之间加入这串代码 width="100%" height="600" <iframe src="//player.bilibili.com/player.html?aid=914606049&bvid=BV1Mu4y1z7a9&cid=1229413200&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="600"> </iframe> 修改大小后的影片长这样，这里的宽度和高度可以根据自己的需求修改...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题-隐藏内容模块的会员级别提示修改教程-识趣者资源

子比主题-隐藏内容模块的会员级别提示修改教程

子比主题隐藏内容会员可见的模块，子比默认的是显示一级会员可见，实际上是一级和二级会员都可见，这个设定我们站长是搞懂了，但是对于网站用户来说，可能会有歧义，产生误解，以为当前内容仅一级会员，而设置二级会员可见时，是仅二级会员可见（要考虑用户的理解能力下限）。 因为站长发布内容的时候，为了照顾一、二级会员，大部分内容会设置为一级会员可见，但这样会导致一个“损失”，可能“误导”用户只需开通一级会员，而不是直接开通更高级的二级会员。 修改前 第一个模块，一级黄金会员可见，第二个模块，二级钻石会员可见，网站用户可能会误以为两个会员等级并无关联。 修改后 第一个模块，一级和二级会员可见，第二个模块，仅二级会员可见，这样对网站用户就能很明确的了解隐藏内容所属会员了，不会存在歧义和误解。 或者将原来的一、二级可见提示改为一级及以上等级会员可见 [hidecontent type="reply"] 找到 /zibll/inc/functions/zib-theme.php 文件，Ctrl+F搜索 $type_text = array( 会看到如下内容： 'vip1' => _pz('pay_user_vip_1_name') . '可见', 'vip2' => _pz('pay_user_vip_2_name') . '可见', 修改为： 'vip1' => _pz('pay_user_vip_1_name') . '及' . _pz('pay_user_vip_2_name') ....
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-28
评论可见
子比主题美化 – 网站底部添加 CTRL+D 收藏按钮-识趣者资源

子比主题美化 – 网站底部添加 CTRL+D 收藏按钮

效果预览 代码部署 1、将下面的代码添加在网站页脚底部或者在 WordPress 后台添加小工具，效果展示是一样的我是添加在小工具的2、添加路径：在后台 >> 外观 >> 小工具 >> 自定义 HTML >> 选择你需要放的位置站长是放在 所有页面-页脚区内部 添加下方代码 [hidecontent type="reply"] <!---CTRL+D 收藏小工具开始 ---> <style type="text/css"> #go-fav { width: 100%; height: 60px; line-height: 60px; text-align: center; background: #3d3d3d;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
1…910111213…23跳转