子比美化 第2页
标签
排序
2026-03-12
免费
子比主题 – 子比付费阅读增强插件-识趣者资源
子比插件

插件子比主题 – 子比付费阅读增强插件

这是一款子比主题付费阅读增强插件，这款插件还是比较不错的，让用户先试看文章内容，接下...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 9天前
#子比美化
 2026-03-08
评论可见
子比主题 – 文章列表悬停边框美化教程-识趣者资源
子比美化

美化子比主题 – 文章列表悬停边框美化教程

 逛博客的时候发现这个美化很不错，用上去之后很简洁，我觉得这个是子比主题美化的一款必不可少的，鼠标悬停文章列表边框美化。示例图代码部署[hidecontent type="reply"]/*文章列表悬停边框美化*/ .card { box-shadow: 0.3em 0.3em 0.7em #00000015; border: rgba(0, 0, 0, .05) 0.2em solid; } .card:hover { border: #006fff 0.2em solid; transition: border 1s; }[/hidecontent]
识趣资源的头像-识趣者资源
至尊会员识趣资源· 13天前
#子比美化
 2026-03-08
评论可见
子比主题-侧边栏小工具彩色标签云-识趣者资源
子比美化

美化子比主题-侧边栏小工具彩色标签云

标签云修改需要用到只有简单的CSS代码，我们先来看下效果图吧！ 示例图 步骤一：使用小工具 打开小工具找到侧边栏，点击进去之后点击添加小工具选择Zibll标签云，然后就是参数了，因为追求工整选择了固定宽度，标签数量也选择了24个(3的倍数随意就好) 步骤二：CSS代码 加入到主题后台的自定义CSS样式里保存即可 [hidecontent type="reply"] /*文章随机彩色标签*/ .widget-tag-cloud.fixed-width .but:hover{opacity: 1;}.widget-tag-cloud.fixed-width .but{opacity: 0.6;line-height: 20px !important;padding: 4px 10px !important;font-size: 12px !important;}.widget-tag-cloud.fixed-width .but:nth-child(5n){background-color: #4A4A4A;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+3){background-color: #1ac756;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+4){background-color: #19B5FE;color:...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 13天前
#子比美化
 2026-03-08
100积分
子比主题 – 首页文章列表标签随机彩色样式-识趣者资源
子比美化

美化子比主题 – 首页文章列表标签随机彩色样式

学习如何在子比主题中自定义美化，通过简单步骤实现首页文章列表标签的随机彩色效果，提升网站视觉效果与用户体验。 效果预览 代码部署 [hidecontent type="payshow"] CSSJS 子比主题可选择添加到如下位置： zibll主题设置 -> 全局功能 -> 自定义代码 -> 自定义CSS代码 颜色自行修改，这个不难吧？ /*文章外部标签随机彩色 huliku.com*/ .item-tags a { padding: 5px 10px; border-radius: 5px; margin-right: 5px; } .item-tags a.meta-pay { background-color: #FFD700; color: black;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 13天前
#子比美化
 2026-03-08
评论可见
子比主题 – 个人主页公开/私密功能-识趣者资源
子比美化

功能子比主题 – 个人主页公开/私密功能

这是一款子比主题的个人主页公开/私密功能，用户很方便自己设置自己的个人主页的私密，很方便的一款功能，喜欢的自行部署吧！ [hidecontent type="reply"] 定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一下，记得加上php头，要不然会报错，将下面的代码放里面即可！ // 1. 在作者主页封面右下角菜单添加“公开/私密”切换按钮 add_filter('author_header_drop_lists', 'custom_zib_author_privacy_toggle_btn', 20, 2); function custom_zib_author_privacy_toggle_btn($lists, $author_id) { // 安全校验：只有当前登录用户是主页作者本人时才显示该选项 if (get_current_user_id() !== $author_id) { return $lists; } // 获取当前状态 $is_private = get_user_meta($author_id, 'profile_is_private', true); $text = $is_private...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 13天前
#子比美化
 2026-03-06
评论可见
子比主题 – 首页顶部搜索框美化（两款）-识趣者资源
子比美化

美化子比主题 – 首页顶部搜索框美化（两款）

给子比的顶部搜索框加一个美化，我觉得这种方形的搜索框还是比较的好看的，喜欢的自行部署吧，一共是两款美化样式！ 第一款 第二款 代码部署 [hidecontent type="reply"] CSS代码放到：子比主题–>>自定义CSS样式，JS代码放到：子比主题–>>自定义javascript代码 第一款第二款 CSS代码 .header-slider-search .line-form{ border-radius:5px; } .header-slider-search .line-form .abs-right button{ background: #0088ff; color: rgb(255, 255, 255); border-radius: 5px; margin-right: -28px; height: 51.28px; padding: 10px; border-bottom-left-radius: 0px; border-top-left-radius: 0px;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 15天前
#子比美化
 2026-03-06
评论可见
子比主题 – 顶部多功能组件按钮美化-识趣者资源
子比美化

美化子比主题 – 顶部多功能组件按钮美化

这是一款子比主题的顶部多功能组件按钮美化，这分两个按钮，在此文章之前，带有开始探索、创作者入驻等两个按钮，喜欢的自行部署吧！ 示例图 代码部署 [hidecontent type="reply"] 定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，将下面的代码放里面即可！ /** * 在顶部多功能组件搜索框右侧添加两个按钮：开始探索 + 创作者入驻 */ add_action('wp_footer', 'zib_custom_search_buttons'); function zib_custom_search_buttons() { ?> <style> .header-slider-search .search-input .line-form { display: flex; align-items: center; gap: 10px; } .header-slider-search .search-custom-btns { display: flex;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 15天前
#子比美化
 2026-03-03
评论可见
子比主题-圆角炫彩滚动公告栏（黑色背景 + 炫彩文字）-识趣者资源
子比美化

美化子比主题-圆角炫彩滚动公告栏（黑色背景 + 炫彩文字）

演示图 自定义圆角大小 你可以轻松调整圆角程度： 轻微圆角：border-radius: 6px; 标准圆角：border-radius: 12px;（当前设置） 大圆角（胶囊形）：border-radius: 24px; 或 border-radius: 50px; 💡 提示：如果希望左右两侧是半圆形（像胶囊），可设 border-radius: 50px; 并确保高度固定。 [hidecontent type="reply"] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>圆角炫彩滚动公告</title> <style> body { background: #f0f0f0;...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 18天前
#子比美化
 2026-03-03
评论可见
子比主题 – 顶部多功能组件添加适配日夜模式波浪-识趣者资源
子比美化

美化子比主题 – 顶部多功能组件添加适配日夜模式波浪

前言 顶部多功能组件背景底部添加白色波浪的教程。波浪已适配日夜模式。这个教程原创是狐狸库 教程开始 狐狸库发的是PC端和移动端都显示波浪。我个人感觉移动端显示这个背景不太美观。博客使用的是移动端不显示波浪的。给大家把两个版本的css都发出来 移动端显示波浪 将下面css代码放入自定义css中 [hidecontent type="reply"] .parallax{fill:var(--body-bg-color)}.parallax > use{animation:move-forever 30s cubic-bezier(0.55,0.5,0.45,0.5) infinite}.parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s;opacity:0.5}.parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s;opacity:0.6}.parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s;opacity:0.7}.parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s;opacity:1}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}} [/hidecontent] 移动端不显示波浪 将下面css代码放入自定义css中 [hidecontent type="reply"] .parallax{fill:var(--body-bg-color)}.parallax > use{animation:move-forever 30s cubic-bezier(0.55,0.5,0.45,0.5) infinite}.parallax >...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 18天前
#子比美化
 2026-03-02
300积分
子比主题美化 –墨星同款优惠券样式推广代码-识趣者资源
子比工具

功能子比主题美化 –墨星同款优惠券样式推广代码

前言 大家好，今天转网站发现了一个很好看的样式，就把它给扒出来了，原作者是墨星博客，在此非常感谢。并且做成了一排两个的摆放样式。并且自适应移动端，显示一行一个。这个可以很好起到宣传作用！ 效果图 教程开始 将下面代码放入wordpress后台-外观-小工具–自定义HTML代码，选择一个自己喜欢的位置，推荐顶部全宽度或者底部全宽度。 代码部分 [hidecontent type="payshow"] <style> .mxchild-card{display:flex;align-items:stretch;min-height:80px;background:rgb(41,151,247);border-radius:8px;-webkit-mask-image:radial-gradient(circle at 88px 4px,transparent 4px,red 4.5px),radial-gradient(closest-side circle at 50%,red 99%,transparent 100%);-webkit-mask-size:100%,2px 4px;-webkit-mask-repeat:repeat,repeat-y;-webkit-mask-position:0 -4px,87px;-webkit-mask-composite:source-out;mask-composite:subtract;position:relative;padding-right:100px;overflow:hidden}.card-left{width:88px;text-align:center;color:#fff;font-weight:bold;display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-left .price{display:flex;align-items:baseline;line-height:1}.card-left .currency{font-size:16px}.card-left .amount{font-size:32px;margin-left:2px}.card-right{padding:12px;display:flex;flex:1;flex-direction:column;justify-content:center}.card-info{margin:0;font-size:14px;line-height:1.4;color:#fff}.card-subtitle{margin:0;font-size:12px;color:rgba(255,255,255,0.9);margin-top:2px;line-height:1.3}.coupons-container{display:flex;flex-wrap:wrap;gap:8px;width:100%}.coupons-container .mxchild-card{flex:1;min-width:300px}@media (max-width:768px){.coupons-container{flex-direction:column;gap:8px}.coupons-container .mxchild-card{min-width:100%}}.mxchild-card .buy-button{content:"立即购买";position:absolute;right:12px;top:50%;transform:translateY(-50%);background:#fff;color:rgb(41,151,247);padding:6px 12px;border-radius:5px;font-size:14px;font-weight:bold;white-space:nowrap;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;border:none;transition:all 0.3s ease}.mxchild-card .buy-button:hover{background:rgba(255,255,255,0.9);transform:translateY(-50%) scale(1.05)} </style>...
识趣资源的头像-识趣者资源
至尊会员识趣资源· 19天前
#子比美化
1234…35跳转