【子比主题】Logo增强插件
声明：本插件在子比主题论坛购买的，本站是二开版本，感谢：xxxzzzz
Zibll Custom Logo Plus —— 子比主题 Logo 深度定制增强插件
一款专为 Zibll 子比主题 打造的 Logo 全局定制增强插件，彻底解决子比主题默认 Logo「只能换图、不能改文字、不支持双主题配色、页脚 Logo 无法独立」的四大痛点。
在零代码、零 CDN、零外链的前提下，实现 图形 + 标题 + 副标题 动态组合 Logo，并完整适配子比主题日夜双模式切换、头部 / 页脚双位置独立渲染、GSAP 动画本地加载。
￥9.8
限时特惠
￥38
立即购买
  • 授权数量：现在购买享3个域名授权
  • 授权更换：授权享免费更换且不限制次数
  • 退货退款：虚拟产品具有可复制性，付款后不支持退货退款

热烈感谢子比论坛的：xxxzzzz

图片[1] | 【子比主题】Logo增强插件 | AJYes Studio
图片[2] | 【子比主题】Logo增强插件 | AJYes Studio

✨ 核心功能亮点

1. 四重配置架构（头部 / 页脚 × 白天 / 黑夜）

插件采用「2×2 组合式」配置模型，支持最多四套完全独立的 Logo 样式：

  • [A 组] 头部 Logo（白天模式） 顶部导航栏 Logo 默认配置
  • [A 组·黑夜模式] 头部 Logo 仅在子比主题切换为暗色主题时自动生效（开启「黑夜独立配置」开关）
  • [B 组] 页脚 Logo（白天模式） 页脚版权区 Logo 默认配置（开启「页脚独立配置」开关）
  • [B 组·黑夜模式] 页脚 Logo 仅在暗色主题下生效（需同时开启页脚独立 + 黑夜独立）

两组 Logo 可随时一键复用头部配置，无需重复填写。

图片[3] | 【子比主题】Logo增强插件 | AJYes Studio

2. 图形 + 文字 动态组合 Logo

不再局限于上传一张图片：

  • 图形层：支持上传 PNG/JPG 图片或内联 SVG 代码，SVG 内置 20+ 标签白名单过滤，防 XSS
  • 标题层：独立设置主标题文字（可换行）、字体大小、字重、颜色、阴影
  • 副标题层：独立设置副标题文字、字体大小、颜色、与主标题间距
  • 间距密度模式：头部宽松模式、页脚紧凑模式，完美贴合原主题排版
  • 层级可调：图形/标题/副标题 可自由控制出现顺序与水平/垂直间距
图片[4] | 【子比主题】Logo增强插件 | AJYes Studio

3. 4 组独立发光调色板（彻底移除默认粉色发光）

每组 Logo 配置提供独立的发光效果面板，支持精细化参数：

  • 发光启用开关 + 实时展开/收起调色板
  • 发光颜色（调色板 + 十六进制输入双通路）
  • 透明度（0~1，推荐 0.2~0.45）
  • 模糊半径（0~80px）
  • X / Y 轴偏移（-200~+200px）
  • 头部 & 页脚 & 白天 & 黑夜，共 4 套配色完全独立

4. 日夜双模式零闪烁切换

深度适配 Zibll V9 子比主题的 body.dark-theme + cookie.theme_mode 双轨机制：

  • <head> 预注入脚本：在页面渲染最早阶段就判断当前主题模式，提前写入 body.dark-theme 类
  • MutationObserver 监听：监控 body 类名变化，实时触发 Logo 重新渲染
  • CSS 变量作用域隔离：白天变量写到 :root，黑夜变量写到 body.dark-theme，切换无延迟、无闪烁（FOUC）

5. Zibll V9 页脚 Logo 动态锚点兜底

针对子比首页、分类页、专题页等因条件判断不输出 <a class="footer-logo"> 原生容器的问题：

  • 当选择器完全匹配失败时，自动在 .footer-contact-box > li.hidden-xs 首个位置动态注入空锚点
  • 注入的锚点自带 class="footer-logo zcl-plus-injected"，完美兼容后续替换渲染
  • 控制台 WARN 级日志提醒「原生未输出，已动态注入」

6. 顶级菜单 + Tab 化 + 双栏实时预览后台

设置页完全摆脱「子比主题自定义器」的嵌套层级，独立为 WordPress 后台顶级菜单：

  • 四个 Tab 结构：Logo 设置 / 高级参数 / 依赖管理 / 使用说明
  • 双栏比例网格布局（1.6 : 1）：左栏编辑、右栏实时预览 + 操作卡 + 历史快照
  • 右栏跟随滚动：实时预览框在长页编辑时始终可见
  • 快捷开关卡：页脚独立 + 黑夜独立，在 Logo 设置 Tab 即可切换，无需跳转
  • 代码快照系统：每次修改自定义 CSS/JS 并保存时，自动生成可回溯快照（一键还原）
  • 完全响应式：移除固定 max-width，随浏览器窗口自适应

7. 本地零 CDN 依赖管理（GSAP）

移除所有外部 CDN 外联脚本，完全本地化：

  • GSAP 依赖提供一键下载到本地目录功能（下载后永久离线可用）
  • 插件本身不发起任何外部 HTTP 请求
  • 无遥测、无许可校验、无更新回拨，完全合规
图片[5] | 【子比主题】Logo增强插件 | AJYes Studio

🛡️ 安全与开发保护机制

开关默认值作用
核心驱动接管关闭总开关，关闭后前台完全不渲染任何 Logo 替换，回到主题默认（方便临时排障）
开发者模式关闭关闭时「自定义 JS 扩展代码」在前台绝对不执行，防止误贴脚本导致页面崩溃
CSS 作用域智能隔离开启（推荐）自定义 CSS 自动包裹 .custom-logo-wrapper 前缀，防止样式污染导航 / 页脚 / 正文
前端调试模式（F12）关闭开启后控制台打印彩色全链路日志：INFO / WARN / ERROR，支持 ZCLPlus.dump() 诊断

SVG 安全过滤：只放行 <svg> / <path> / <circle> / <rect> / <g> / <defs> / <linearGradient> / <stop> / <polygon> / <ellipse> / <line> / <polyline> / <text> / <tspan> 等 20+ 安全标签，其余标签与事件属性（onclick / onload 等）自动剥除。

🔧 前端调试模式（全链路可观测）

遇到 LOGO 不显示、切换异常时，开启调试模式，按 F12 → Console：

  • 🟢 [ZCL+] INFO：数据注入、模式判定、选择器匹配、替换成功
  • 🟡 [ZCL+] WARN：选择器未找到、模式不一致、回退候选触发、动态锚点注入
  • 🔴 [ZCL+] ERROR：替换失败、异常捕获
  • 在 Console 输入 ZCLPlus.dump() → 打印完整诊断 JSON → 右键 Copy object 发给开发者
  • 输入 ZCLPlus.getState() / ZCLPlus.forceRender() / ZCLPlus.enableDebug() 等方法交互式排障

🎯 适用场景

  • 品牌站 / 企业站：白天黑夜不同 Logo 配色（黑夜要浅色 LOGO，白天要深色 LOGO）
  • 内容型站点：头部放站点名称 + Slogan 双文字 LOGO，页脚放精简版品牌图 + 备案号
  • 商城 / 下载站：节日或促销期快速切换 LOGO 的发光颜色（红色促销 / 蓝色科技 / 绿色环保）
  • 站点迁移 / 重品牌：不需要动主题代码，后台即改即生效，主题升级不覆盖
  • 调试 / 排障场景：开启调试模式后 30 秒内定位任何选择器 / 模式 / 渲染层面的问题

📦 系统要求

项目要求
WordPress 版本≥ 5.9（支持 Settings API + wp_body_open）
PHP 版本≥ 7.4（推荐 PHP 8.0 / 8.1 / 8.2）
Zibll 子比主题版本V7 / V8 / V9（V9 页脚锚点兜底已适配）
浏览器Chrome 90+ / Edge 90+ / Firefox 88+ / Safari 14+
存储写入权限/wp-content/plugins/zcl-plus/assets/vendor/（下载 GSAP 本地化用）