子比美化 第12页
子比主题美化相关教程
分类
排序
2026-01-24
6.6
子比美化 – 网站右侧悬浮导航-识趣者资源

子比美化 – 网站右侧悬浮导航

整合了所有代码，拒绝复杂化！代码实现了一个网站右侧悬浮功能栏，主要服务于基于 WordPress（子比主题）搭建的网站，集成了会员推广、用户互动、客服沟通、页面操作四大类核心功能，整体适配 PC 端展示，移动端自动隐藏，兼顾美观与实用性。 代码部署 [hidecontent type="payshow"] 进入"外观" → "小工具",找到"自定义HTML"小工具,把代码粘贴进去,放到“所有页面-底部全宽度” <div class="container fluid-widget"><div class="widget_text zib-widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="huliku-float"> <div class="huliku-float-box"> <!-- 会员功能 --> <div class="huliku-float-item activity"> <div class="cont"> <a href="/vips" target="_blank" class="vip-link"> <img src="https://i.imgs.ovh/2026/01/24/yqlf7g.webp"...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-24
800积分
子比主题 – 首页顶部六小格小工具-识趣者资源

子比主题 – 首页顶部六小格小工具

这是一款子比主题首页顶部六小格小工具，我一开始打算写代码方式的，我觉得还是别那么麻烦去让用户部署了，那么我就给他封成了小工具，一键部署的小工具，我觉得这个小工具比较好看的，喜欢的自行部署一下吧！ 小工具配置 [hidecontent type="payshow"] 跟着我的教程走，别走偏了，先看我怎么说的，再去操作，这个小工具跟我以前发的教程一模一样首先我们第一步：/wp-content/themes/zibll/func.php文件，如果没有这个文件自己创建在子比目录创建一个，创建之后记得加php头，要不然会报错！加如下面的代码，我会详细说这个 $widgets_files = array( 'tengfei_lattice.php', /*小工具文件名*/ ); foreach ($widgets_files as $file) { require get_template_directory() . '/tengfei/widgets/' . $file; } 将上面的代码放到/wp-content/themes/zibll/func.php文件，都是一样的，看上面的代码，别看懵逼了，我们要明白这个：tengfei_lattice.php这个代码，这个代码就是代表一个小工具的名字，相当于就是用上面的代码调用的，就是如果想加第二个小工具，那就是在tengfei_lattice.php这个代码下面加一行其他小工具的别名，我说的已经很仔细了，不懂问站长，文件放底部 附件上传到：/wp-content/themes/zibll解压即可！ 子比主题首页顶部六小格小工具下载 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-30
800积分
子比主题-自定义会员开通展示 引导区块-识趣者资源

子比主题-自定义会员开通展示 引导区块

此代码可以直接调用会员开通弹窗、增加红色边框描边 代码部署 代码放至——模块配置——底部全区块或文章内容上方、文章页顶部全区块——自定义 HTML [hidecontent type="payshow"] <div class="tf-one-home-homevip" style="background-image: url(https://s41.ax1x.com/2026/01/30/pZf1M2d.png);"> <div class="one-container wrapper"> <div class="tf-one-home-title"> <span>会员尊享权益圈子</span> <p>成为我们的VIP会员，尊享无限免费下载使用，更享受全面的服务与福利</p> </div> <div class="tf-one-home-homevip-box one-grid-ceosmls one-grid"> <div id="onecad-id-1" class="tf-one-width-1-1 tf-one-width-1 b2-radius"> <div class="tf-home-homevip-boxmk tf-one-dongtai tf-one-background-default b2-radius "> <div class="">...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-02-07
评论可见
子比美化-文章卡片下载按钮样式美化-识趣者资源

子比美化-文章卡片下载按钮样式美化

演示图 教程： 首先一共三步，有两行php代码和一个css代码，话不多说直接开始教程 [hidecontent type="reply"] 步骤一： 下面的PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概268行，如下图 $get_permalink = get_permalink();//添加文章链接 步骤二： 下面的PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概310行，如下图 $html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮 步骤三： 添加CSS代码 background: linear-gradient(to right, #4f6dee, #67bdf9);这个是颜色，自己需求改 下面代码直接放到后台css里即可 /*文章卡片下载按钮*/ a.down { display: inline-block;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 48天前
#子比美化
 2026-02-17
评论可见
子比主题 – 仿哔哩哔哩充电样式-识趣者资源
子比美化

美化子比主题 – 仿哔哩哔哩充电样式

预览图 部署教程 [hidecontent type="reply"] 在文章&列表-文章页面-文章插入内容-在文章内容后-插入内容中添加以下代码： <div class="log-power-pay"> <div class="left"> <span class="tip">文章很赞,支持一下吧~</span> <span class="count mb3"> 还没有人为TA充电 </span> <div> <div class="power-pay-avatar-group flex alc mini-scrollbar scroll-x gap-1 flex-wrap"> </div> </div> </div> <div class="right"> <div class="main-btn" data-toggle="modal" data-target="#ete-log-power-pay"> <span><i...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 38天前
#子比美化
 2026-02-27
评论可见
子比美化-彩色文字跳动特效代码（两款）-识趣者资源
子比美化

美化子比美化-彩色文字跳动特效代码（两款）

本文提供两款彩色文字特效代码,根据个人喜好自行选择部署,可以放在页脚底部或者文章底部版权位置 效果演示① 识趣资源https://47zhe.cn 本站致力于分享优质实用的互联网资源，内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程，致力打造一个IT博客！B)[ var chakhsu = function (r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n =...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 29天前
#子比美化
 2026-03-01
300积分
子比主题 – 精选滑动卡片小工具-识趣者资源
子比工具

功能子比主题 – 精选滑动卡片小工具

这是一款子比主题精选滑动卡片小工具，可以左滑右滑 小工具配置 代码部署 [hidecontent type="payshow"] 定位:/wp-content/themes/zibll中把文章附件解压，然后在func.php文件里添加L下代码(没有这个文件自己创建一个，然后记得加php头，要不然会报错 $widgets_files = array( 'tengfei_best_swiper.php', // 小工具文件名 ); foreach($widgets_files as $file) { require get_template_directory() . '/tengfei/widgets/' . $file; } 子比主题 - 精选滑动卡片小工具下载 密码1pp6 [/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 27天前
#子比美化
 2025-12-13
评论可见
子比主题 – PC右下角显示网易云热评（三款）-识趣者资源

子比主题 – PC右下角显示网易云热评（三款）

给子比主题PC端右下角加一个显示网易云热评的美化样式，这个功能还是不错的，给自己的网站加上动态的网易云热评，一共是三款，喜欢的自行部署吧！ 第一款 第二款 第三款 代码部署 [hidecontent type="reply"] 喜欢哪一款放到：WP后台–>>外观–小工具–>>自定义HTML，建议放到：所有页面-底部全宽度 第一款第二款第三款 <div id="wniui-popup-window" class="wniui-show-popup-window"> <div class="wniui-popup-header"> <div class="wniui-popup-window-title">网易云热评</div> <span id="wniui-popup-username"></span> <a id="music-link" href="" target="_blank" style="position: absolute; top: 8px; right: 10px;"> <svg style="transition: .3s;height:30px;width:30px;" t="1740280523955" class="icon" viewbox="0 0...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 3个月前
#子比美化
 2026-01-25
788积分
子比主题美化 – 文章自定义前缀（优化+）-识趣者资源

子比主题美化 – 文章自定义前缀（优化+）

原理是使用CSF框架创建一个metabox给文章储存相关数据，然后通过过滤文章标题实现在文章前面增加前缀。 操作教程（图片记得自行本地化！） 代码放在 functions.php 下或 func.php [hidecontent type="payshow"] /*文章前缀申明开始*/ CSF::createMetabox('DearLicy_titles', array( 'title' => '标题前缀', 'post_type' => 'post', 'context' => 'advanced', 'data_type' => 'unserialize', 'priority' => 'high', )); CSF::createSection('DearLicy_titles', array( 'fields' => array( array( 'id' => 'titles_moshi', 'type' =>...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 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个月前
#子比美化
 2025-12-13
评论可见
子比主题 – 右侧二次元不到翁样式-识趣者资源

子比主题 – 右侧二次元不到翁样式

发现一个好玩的，就是给自己的子比右侧加上不到翁的样式，目前只测试了子比主题，其他的站应该都可以部署的，鼠标可以拖拽不到翁，喜欢的自行部署吧！ [hidecontent type="reply"] 定位：WP后台–>>子比主题–>>网站统计HTML代码，直接丢里面就可以了，但是要注意的是，里面的JS是引入我的，因为按钮里面有跳转链接在JS里面，所以你可以本地下载一下或者下载我的附件自己引入，在JS代码里面搜：tfbkw.com，替换你的就行了 <div id="left_layer" class="sakana-tfbk" style="position:fixed; bottom:250px; right:-38px;"> <div id="sakana-widget"></div> <script> function initSakanaWidget() { new SakanaWidget().mount('#sakana-widget'); } </script> <script async onload="initSakanaWidget()" src="你的js链接" ></script> </div> [/hidecontent] 右侧二次元不到翁样式附件下载提取密码ndH7
识趣资源的头像-识趣者资源
至尊会员识趣资源· 3个月前
#子比美化
 2026-02-03
200积分
子比美化教程 – 二次元风格弹窗带时间和日期-识趣者资源

子比美化教程 – 二次元风格弹窗带时间和日期

食用教程 将下列代码粘贴到”zibll主题设置－>全局&功能－>自定义代码－>自定义头部HTML“中： [hidecontent type="payshow"] <!--【星语的小木屋】二次元风格弹窗带时间和日期 --> <style> #welcome-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /*background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(6px);*/ display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 53天前
#子比美化
 2026-01-13
评论可见
子比主题 – 自定义样式弹窗_支持所有网站-识趣者资源

子比主题 – 自定义样式弹窗_支持所有网站

这里给大家分享一款大红款的弹窗样式，可放到自己的网站进行美化弹窗，这款弹窗是每天弹窗一次，并且测试了子比，正常可用，这个是html、css、js实现的，全部网站都可以用的！ [hidecontent type="reply"] 这里给大家以子比主题为例，定位：子比主题–>>自定义底部HTML代码，将下面的代码放到里面即可！ <style> #newYearModalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; /* 默认隐藏 */ justify-content: center; align-items: center; z-index: 9999; } #newYearModal...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-25
评论可见
子比主题 – 文章页左侧悬浮快捷功能-识趣者资源

子比主题 – 文章页左侧悬浮快捷功能

给子比主题文章页面里面的电脑端的左上角加一个悬浮快捷功能，带有点赞、收藏、评论（可跳转底部评论），分享等按钮，相当于跟论坛的效果差不多，喜欢的自行部署吧！ [hidecontent type="reply"] 定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，将下面的代码直接丢里面即可！ /** * 文章页面左侧浮动按钮 */ function zib_post_fixed_btns() { global $post; if (wp_is_mobile() || !is_single() || $post->post_type !== 'post') return ''; $id = $post->ID; $logged = is_user_logged_in(); $btns = ''; $items = [];...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
 2026-01-13
评论可见
子比主题 – 前台发布文章离开页面提示保存-识趣者资源

子比主题 – 前台发布文章离开页面提示保存

这是为子比主题前台编辑器添加的一个发布文章离开页面提示保存的功能，当我们在前台发帖或发文章页面编辑一大堆内容，如果忘记手动保存直接访问其他页面后，所有内容就丢失了。此功能就是为了避免这一情况发生，有需要的朋友自行部署吧！ 代码部署： [hidecontent type="reply"] 定位：子比主题后台 – 自定义代码 – 自定义底部HTML代码中添加以下代码（记得修改代码中的网站为你自己的）： <!-- 提示编辑保存js开始--> <script type="text/javascript"> let whiteList = ['/newposts','/posts-edit/'] let flag = whiteList.includes(window.location.pathname) ? true : false let formListenerAdded = false; function listeningForm() { var hasChanges =...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 1个月前
#子比美化
1…1011121314…23跳转