子比美化 第13页
排序
2026-01-27
子比主题美化 – 列表文章封面添加动态缩略图-识趣者资源

子比主题美化 – 列表文章封面添加动态缩略图

给自己子比主题加一个列表文章封面添加动态缩略图 教程 把css代码加入后台即可 [hidecontent type="reply"] /*动态圆圈*/ .item-thumbnail:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); transition: background .35s; border-radius: 8px; z-index: 2; max-width: 765px; margin: 0 auto; pointer-events:...
识趣资源的头像-识趣者资源至尊会员识趣资源· 8天前
#子比美化
 2026-01-31
子比主题 – 靓号插件-识趣者资源

子比主题 – 靓号插件

识趣资源的头像-识趣者资源至尊会员识趣资源· 4天前
#子比美化
 2025-12-11
子比美化 – 底部可爱页脚美化样式-识趣者资源

子比美化 – 底部可爱页脚美化样式

在这篇之前腾给大家了好几个底部页脚的美化样式，并且适配了昼夜模式，这款可爱的页脚样式是很早的美化了，今天分享一下，并且记录一下，话不多说喜欢的自行部署吧！ [hidecontent type="reply"] 代码没有分开都写在了一起，包括图片也已经本地话上传了cdn，喜欢的自行部署！！ PHP代码 首先我们要知道我们加这个底部之后，他官方的底部还存在，我们先把官方的代码删掉然后再按照下面的步骤来走，我们先到/wp-content/themes/zibll/footer.php，找到下面的代码，下面的代码是官方自带的底部，我们要给他删掉，避免后面出现两个底部。如果是子主题自己弄一下吧，在func判断一下如果启用这个页脚就隐藏子比自带的底部 查找代码 <footer class="footer"> <?php if (function_exists('dynamic_sidebar')) { dynamic_sidebar('all_footer'); }?> <div class="container-fluid container-footer"> <?php do_action('zib_footer_conter');?> </div> </footer> 然后我们还在这个/wp-content/themes/zibll/footer.php文件里面，找到下面的代码 <?php wp_footer(); ?> 我们将下面的代码放到上面找到的代码的<?php上面即可，自己改一下下面的代码文字、链接等 <!--可爱自定义底部开始--> <style> .footer{display: none;} body{ --acg-footer:url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01PeJhn61QbIqpD8qby_!!2210123621994.png) no-repeat bottom;...
识趣资源的头像-识趣者资源至尊会员识趣资源· 2个月前
#子比美化
 2025-11-23
子比美化-首页增加一个滚动banner横幅-识趣者资源

子比美化-首页增加一个滚动banner横幅

后台HTML代码加入-选择合适的位置 [hidecontent type="payshow" desc="隐藏内容：付费阅读"] <!-- wp:zibllblock/enlighter --> <pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;link rel="stylesheet" href="在这里填写css路径！！！！！！！！"> &lt;div id="home_top"> &lt;style type="text/css"> .todayCard-title, .todayCard-tips, .topGroup.banner-button { color: #ffffff } .topGroup.todayCard { background: #000000 }...
识趣资源的头像-识趣者资源至尊会员识趣资源· 3个月前
#子比美化
 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:...
识趣资源的头像-识趣者资源至尊会员识趣资源· 7天前
#子比美化
 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]
识趣资源的头像-识趣者资源至尊会员识趣资源· 7天前
#子比美化
 2025-12-13
子比主题 – 付费详情说明模块样式-识趣者资源

子比主题 – 付费详情说明模块样式

一款在付费模块下加一个漂亮的背景图片样式来高亮显示用来提醒用户注意须知，将付费详情说明模块。 代码部署 [hidecontent type="reply"] 很多人问了：为什么配置好了没有效果，配置了这个是新发文章才有效果，之前的文章没有效果！ 网站后台–>Zibll主题设置–>商城&付费–>商城配置–>更多详情，输入需要显示的文字 CSS代码 直接将下面的代码放到：子比主题–>>自定义CSS样式即可！ /*付费详情说明模块美化*/ .pay-box .pay-details { background-image: url(https://img.alicdn.com/imgextra/i3/2934847733/O1CN0123c7o426zljQUqHlZ_!!2934847733.png); color: #fff; text-align: center; background-size: cover; } [/hidecontent]
识趣资源的头像-识趣者资源至尊会员识趣资源· 2个月前
#子比美化
 2026-01-28
子比主题-文章列表小工具-识趣者资源

子比主题-文章列表小工具

[hidecontent type="reply"] /** * Tab幻灯片小工具-大海 */ Zib_CFSwidget::create('zib_widget_tab_slider', array( 'title' => 'Tab幻灯片', 'zib_affix' => true, 'zib_show' => true, 'description' => '左侧幻灯片+右侧Tab条，hover切换', 'fields' => array( array( 'id' => 'source_type', 'title' => '数据来源', 'default' => 'custom', 'options' =>...
识趣资源的头像-识趣者资源至尊会员识趣资源· 7天前
#子比美化
 2025-12-13
子比主题 – 顶部多功能组件上方时间显示-识趣者资源

子比主题 – 顶部多功能组件上方时间显示

教程 [hidecontent type="reply"] 把下面的的代码放到 <div class="header-slider-search-more text-center before"> <div id="timeDisplay" class="time-display">19:07:48</div> <!-- 日期显示区域 --> <p id="dateDisplay" class="date-display">Tuesday, November 25, 2025</p> <script> // 更新时间和日期的函数 function updateTimeAndDate() { const now = new Date(); // 格式化24小时制时间 (HH:MM:SS) const...
识趣资源的头像-识趣者资源至尊会员识趣资源· 2个月前
#子比美化
 2026-02-03
子比美化教程 – 自定义右键菜单-识趣者资源

子比美化教程 – 自定义右键菜单

在WordPress网站的细节优化中，自定义右键菜单是一个能显著提升用户体验和网站个性的亮点。厌倦了浏览器默认的单调右键菜单？主题铺为您带来一款灵感源自他人博客的右键菜单美化方案，它采用了独特的透明模糊背景设计，并融入了智能识别图片并提供复制图片链接的功能，让您的网站在细节之处也充满惊喜。 食用教程 将下列代码粘贴到“zibll主题设置－>全局&功能－>自定义代码－>自定义底部HTML代码”中，我都整合好了，不需要分开，内容你们自己改： [hidecontent type="reply"] <!--【识趣资源网】自定义右键菜单 --> <style type="text/css"> a { text-decoration: none; color: inherit; } div.usercm { background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */ backdrop-filter: blur(15px) saturate(180%); /* 模糊和饱和度滤镜 */ -webkit-backdrop-filter: blur(15px) saturate(180%);...
识趣资源的头像-识趣者资源至尊会员识趣资源· 昨天
#子比美化
1…1112131415…23跳转