本文介绍如何为子比主题网站添加动态标题效果。通过一行 JavaScript 代码监听用户页面可见性变化，实现离开页面时标题改变、返回页面时标题恢复的交互效果。所有修改均在主题后台的自定义代码中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用 Zibll 子比主题并希望增加网站趣味交互的 WordPress 站长

核心价值：通过极简的 JavaScript 代码，为网站增加动态标题交互效果，提升用户停留意愿和浏览趣味性。

操作前准备

在开始配置之前，需要先确认以下几点：

• 无需修改主题文件：代码通过主题后台的自定义 JavaScript 功能添加，升级主题时效果不会丢失。
• 操作入口：WordPress 后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义JavaScript代码」。
• 代码说明：动态标题效果依赖 visibilitychange 事件监听，当用户切换到其他标签页或最小化浏览器时触发。
• 备份建议：在添加任何自定义代码前，建议先备份网站。

核心 JavaScript 代码

以下是实现动态标题效果的核心代码，直接复制粘贴即可使用：

操作步骤

进入自定义 JavaScript 设置

• 登录 WordPress 后台。
• 进入 「Zibll子比主题」→「主题设置」 。
• 在左侧菜单找到 「全局&功能」 ，点击 「自定义代码」 选项卡。
• 找到 「自定义JavaScript代码」 文本框。

粘贴代码并保存

• 将上方核心代码完整复制。
• 粘贴到 「自定义JavaScript代码」 文本框中。
• 点击页面底部的 「保存设置」 按钮。

刷新前台查看效果

• 打开网站首页。
• 切换浏览器标签页或最小化窗口，查看标题是否变化为“你别走吖 Σ(っ °Д °;)っ”。
• 切回网站标签页，查看标题是否先显示“(/≧▽≦/)你又回来啦！”，2秒后恢复为原标题。

自定义文字修改

代码中的两处提示文字可以根据喜好自由修改：

位置	默认文字	修改建议
离开时显示	你别走吖 Σ(っ °Д °;)っ	可改为“别走嘛～”、“再待一会儿嘛”等
返回时显示	(/≧▽≦/)你又回来啦！	可改为“欢迎回来！”、“就知道你舍不得走”等

修改示例：

其他添加方式（备选）

如果主题设置中没有“自定义JavaScript代码”选项，也可以通过以下方式添加：

• 自定义头部 HTML 代码：将代码用 <script> 标签包裹，放入主题设置的“自定义头部HTML代码”中。
• 直接修改主题文件：将代码放入主题目录下的 footer.php 文件中 </body> 标签之前。

效果验证

配置完成后，建议进行以下验证：

验证步骤

• 保存配置：确保已点击「保存设置」按钮。
• 刷新前台：打开网站首页。
• 切换标签页：切换到其他浏览器标签页，观察网站标题是否变化。
• 切回标签页：切回网站标签页，观察标题是否恢复。

排障指引

如效果未生效，请依次检查：

• JavaScript 代码是否完整复制、无遗漏
• 是否粘贴在 「自定义JavaScript代码」 文本框（而非「自定义CSS样式」）
• 是否已点击 「保存设置」 按钮
• 浏览器缓存是否已清除（按 Ctrl+F5 强制刷新）

常见问题

问题	解决方法
动态标题未生效	检查代码是否粘贴在「自定义JavaScript代码」中；清除浏览器缓存后刷新
标题恢复时间太快/太慢	修改 setTimeout 中的 2000 数值（单位毫秒，2000=2秒）
文字显示乱码	确保代码文件编码为 UTF-8；避免使用特殊符号
升级主题后效果丢失	代码保存在主题设置的自定义代码中，升级主题不会丢失
移动端不生效	部分移动端浏览器对 visibilitychange 事件支持有限，属正常现象