子比主题添加 FPS 帧率显示代码

在子比（zibll）主题的网站左上角添加轻量级 FPS 帧率显示功能，可直观监控网站运行性能：

• 🟢 绿色（≥50 FPS）：性能良好
• 🟡 黄色（30-50 FPS）：性能一般
• 🔴 红色（<30 FPS）：性能较差
• 纯原生 JS 编写，不依赖 jQuery，不与主题冲突
• 自动适配页面层级，不遮挡点击事件

效果预览

代码部署

方法 1：自定义 JS 添加（推荐，无需修改主题文件）

1. 登录 WordPress 后台 → 外观 → 自定义 → 自定义代码 → 自定义 JS
2. 清空原有 JS 内容（如需保留请换行添加）
3. 粘贴下方完整代码 → 点击「发布」保存
4. 刷新网站前端即可看到左上角的 FPS 数字

方法 2：主题函数文件添加

1. 后台 → 外观 → 主题文件编辑器 → 选择子比主题的 functions.php
2. 在文件末尾粘贴下方「函数版代码」
3. 点击「更新文件」保存即可生效

完整代码

标准版代码（自定义 JS 使用）

函数版代码（functions.php 使用）

自定义调整（可选）

1. 修改显示位置：
   • 右上角：将 top: 15px; left: 15px; 改为 top: 15px; right: 15px; left: auto;
   • 左下角：将 top: 15px; left: 15px; 改为 bottom: 15px; left: 15px; top: auto;
2. 修改文字大小：调整 font-size: 12px; 中的数值（如 14px、16px）
3. 添加文字描边（背景复杂时提升可读性）：在 cssText 中添加：csstext-shadow: 0 0 2px #000, 0 0 2px #000; /* 黑色描边 */ -webkit-text-stroke: 0.5px #000; /* 兼容webkit浏览器 */

总结

1. 该代码专为子比主题优化，显示彩色 FPS 数字，美观且实用；
2. 提供两种安装方式，推荐使用「自定义 JS」方式，更安全且无需修改主题核心文件；
3. 支持自定义显示位置、文字大小，可根据网站风格灵活调整；
4. 代码轻量级，不占用服务器资源，仅在前端运行，对网站性能无影响。