给 WordPress 子比主题网站增加仿苹果 iOS 灵动岛悬浮通知效果，访问网站的时候顶部居中弹出灵动岛提示框，会根据访问的页面自动切换提示文字，支持首页、文章页、分类页、用户中心、消息页面等场景，自带波动音频柱动画，鼠标悬浮自动放大，4 秒后自动消失。整套效果分为三段代码：自定义 CSS 样式、自定义头部 HTML 结构、PHP+JS 逻辑代码，三步全部部署完成才可以正常运行。

效果预览

页面加载完成，顶部居中弹出黑色圆角灵动岛提示，左侧显示图标，右侧显示动态页面提示文字，附带跳动音频条动画；鼠标悬浮灵动岛会自动放大，停留 4 秒之后执行平滑的收起消失动画。

部署前重要提醒

1、建议优先使用子主题或者Code‑Snippets代码片段插件，不要直接修改父主题文件，主题更新会覆盖你的自定义代码；

2、三段代码缺一不可，少粘贴任意一段都会造成特效失效；

3、修改主题函数文件前务必备份functions.php，防止代码出错网站 500 报错；

4、代码部署保存完成后，清除 WordPress 缓存、CDN 缓存、浏览器缓存再查看效果。

添加自定义 CSS 样式代码

进入子比主题后台设置 → 自定义 CSS，将下面全部 CSS 代码粘贴进去保存。

添加后台自定义头部 HTML

子比后台设置 → 自定义头部 HTML，粘贴下面 HTML 代码，构建灵动岛 DOM 结构。

提示：你可以修改img里面的图片地址换成自己站点图标，修改 p 标签里面默认欢迎文字。

添加 PHP+JS 逻辑代码

把下面完整 PHP 代码添加到子主题functions.php底部，或者使用 Code‑Snippets 插件新建 PHP 片段运行；不要重复粘贴代码。

此段代码实现页面加载自动触发灵动岛，自动识别页面类型输出对应的提示文字，4 秒自动关闭动画。

自定义修改说明

• 修改图标：修改第二步 HTML 里面img的 src 地址，替换为自己的图片链接；
• 修改显示时长：找到 JS 代码里面4000，单位毫秒，4000=4秒，可以自行调整；
• 修改灵动岛距离顶部距离：CSS 代码找到top:80px，修改数值调整垂直位置；
• 修改默认提示文字：可以直接修改 HTML 和 JS 里面的文字内容，改成你网站的名称；
• 修改背景颜色：CSS 中background-color:#000;是黑色，替换为其他色值即可。

注意事项

• CSS、HTML、PHP 三段代码全部都要部署，缺一不可，少一段特效完全失效；
• 外部图片链接如果失效，灵动岛图标会裂开，建议把图标下载上传到自己网站，使用本地图片地址；
• 部分子比老版本页面 class 不一致，会出现页面识别文字不生效，建议升级子比主题；
• 不要多次复制同一段 PHP 函数，会直接造成网站 500 报错；
• 手机移动端同样可以生效，如果移动端位置不合适，可以自行添加媒体查询 CSS 做适配。

常见问题

全部粘贴完成，页面完全看不到灵动岛？

1、检查三段代码是否全部粘贴，不要遗漏；
2、清除全部缓存（网站缓存、CDN、浏览器硬刷新 Ctrl+F5）；
3、F12 浏览器开发者工具看控制台有没有 JS 报错，HTML 结构是否成功输出；
4、确认 PHP 片段已经启用，functions.php 代码保存成功。

灵动岛出来了，但是文字不自动切换，全部显示默认文字？

老版本子比主题 body 的 class 名称不一致，导致页面判断失效，可以升级子比主题；或者手动修改 JS 里面页面判断条件适配你的站点。

图标图片显示裂开？

把图标下载上传到你的 WordPress 媒体库，替换图片 src 为你的本地图片地址。