原创【代码】WP博客滚动标签云-兼容子比主题V9

预览效果

浅色模式

深色模式

扫码关注微信并回复“密码”，获取口令输入后查看内容

提交

============================================================
子比主题 V9 滚动标签云 · 使用说明
============================================================

本组件为单个自包含 HTML 文件（子比标签云.html），无需安装
任何插件，把里面的一段代码复制到子比主题小工具中即可使用。

功能：5 行标签墙，左右交错、各行速度不同地打乱滚动；每个
标签一种颜色；自动读取网站全部标签；鼠标悬停暂停；自动跟随
子比深色模式；当前所在标签页自动高亮。

————————————————————
一、安装步骤（约 1 分钟）
————————————————————

第 1 步：打开「子比标签云.html」
用浏览器（Edge / Chrome 均可）双击打开该文件。

第 2 步：复制代码
在页面「完整代码」区域右上角，点击「复制代码」
按钮。样式、结构、脚本已全部包含在这一段代码里，
不需要再另外添加 CSS 或 JS。

第 3 步：粘贴到网站，二选一：

方式 A（推荐，侧边栏 / 底部栏）：
1. 登录 WordPress 后台；
2. 进入「外观 → 小工具」；
3. 把「自定义 HTML」小工具拖到想放的侧边栏或底部
栏位；
4. 把代码粘贴进内容框，标题留空；
5. 点击「保存」，刷新前台即可看到。

方式 B（放在文章或页面里）：
1. 编辑文章 / 页面时，添加区块「自定义 HTML」；
2. 粘贴代码并发布即可。

————————————————————
二、标签自动识别原理
————————————————————

· 组件通过 WordPress 标准接口
/wp-json/wp/v2/tags 按文章数量倒序自动读取全站标签，
最多读取 10 页（每页 100 个），自动过滤文章数为 0 的
空标签。

· 代码中已内置 028wp.com 当前的 87 个有效标签作为兜底：
万一接口被安全插件、防火墙拦截，组件不会留白，会自动
显示内置标签。

· 以后网站新增标签会自动出现，无需修改代码。若前台标签
没有更新，请到缓存插件中清除缓存后再刷新。

————————————————————
三、自定义修改（懂一点代码即可）
————————————————————

复制前先在「子比标签云.html」文件里改好，再复制；
也可以直接在后台的自定义 HTML 小工具里改。

1. 改行数、滚动速度、打乱程度
在代码的 <script> 部分找到三行：
ROWS = 5 —— 标签墙行数
SPEED = [1, 1.45, 0.85, 1.2, 0.95]
—— 每行速度系数，数字越大滚得越慢
PHASE = [0, 0.31, 0.62, 0.14, 0.47]
—— 每行起始位置（0~1），让各行不对齐
说明：第 1、3、5 行向左滚，第 2、4 行向右滚，行数改
多时速度系数会自动循环取值。
整体快慢：搜索代码中的 tw/60，把 60 改大则整体变慢，
改小则变快（含义为每秒滚动像素数）。

2. 改标签颜色
找到 .zbtc-c1 到 .zbtc-c12 共 12 个样式，每个标签按
名称固定分配其中一种颜色（同一个标签颜色始终不变）。
修改里面的颜色值即可，浅底与深底模式可分别设置。

3. 改标题
找到「标签云」三个字直接替换；不想要标题可以删除
<div class=”zbtc-title”>……</div> 这一行。

4. 改边缘渐隐宽度、行间距
–zbtc-edge:20px; 两端渐隐遮罩宽度
–zbtc-row-gap:9px; 每行之间的间距

5. 恢复卡片外框（当前为无框透明版）
组件默认透明、无圆角阴影，直接嵌入子比小工具卡片。
如果想让它自己带一张卡片，给 .zbtc-box 加回这三行：
background:#ffffff;
border-radius:16px;
box-shadow:0 2px 12px rgba(31,35,41,.05);
（深色模式下再把 background 改为 #1f2229。）

————————————————————
四、常见问题
————————————————————

Q：深色模式下样式不对（背景、文字颜色不变）？
A：组件会自动识别子比夜间主题。若你的主题深色类名特殊，
给组件容器 <div class=”zbtc-box”> 手动加一个类，
改成 <div class=”zbtc-box zbtc-box–dark”> 即可。

Q：标签不滚动、静止排列？
A：当某一行标签太少、一屏能完整显示时，该行会自动变为
静态居中排列，属于正常设计；标签数量增多后会自动恢复
滚动。另外，系统开启了「减少动态效果」时动画也会停用。

Q：手机上能用吗？
A：可以，宽度自适应；手指触摸某行时该行暂停，方便点击。

Q：标签点击后跳转？
A：每个标签都是正常链接，点击进入对应的标签归档页；
当前所在归档页的标签会自动变为实心高亮。

Q：会不会影响网站速度？
A：纯 HTML + CSS + 原生 JS，无任何外部依赖；标签数据
来自网站自身接口，不加载第三方资源。

============================================================