今儿个心情倍儿棒，就跟抢到首发新机一样！话说咱博客装了 WordPress 后，页面总缺点灵动的小惊喜。思来想去，决定给它加个“飘来飘去的小家伙”——悬浮按钮。别小看这玩意儿，访客一键回顶、直达客服、扫码关注，全都靠它。下面把亲测零失败的“开心悬浮术”打包奉上，保准你 3 分钟搞定，全程嘴角上扬！

第一步：挑件“外套”
咱不折腾代码，插件最香。到后台「插件-安装插件」里搜索「Floating Action Button」或「Sticky Menu」。看评分 4.8 以上、更新日期新鲜、安装量 10 万+ 的，闭眼点「立即安装」→「启用」。就像挑手机，先看销量再看口碑，稳！

第二步：给它“起个名”
启用后左侧菜单会多一个「Floating Button」。点进去，先填「按钮标签」，比如“火箭回顶”或“客服小姐姐”。接着选图标，FontAwesome 几千个任你挑，我选了火箭 emoji，看着就想点。

第三步：设置“漂流轨迹”
往下拉，「位置」选右下角，顺手不挡内容；「距离底部」填 80px，手机党也能点到；「动画」挑「FadeInUp」，飘上来那一下贼丝滑。再把「显示页面」设为「全站」，让它 24 小时在线营业。

第四步：加“彩蛋”
想让按钮更懂你？点「高级设置」→「自定义 CSS」。粘一段：

css

复制

#floating-button {background: linear-gradient(135deg,#ff9569 0%,#e92758 100%);box-shadow:0 4px 12px rgba(233,39,88,.4);}

瞬间变糖果色，心情指数+10086！

第五步：手机党优化
切到「响应式」标签，把「移动端按钮大小」调到 50px，顺手不占地。预览手机模式，点一下火箭嗖地回顶，爽翻！

第六步：保存起飞
右上角「Save」，前台刷新，看到右下角那颗小火箭了吗？滑几下页面，它淡入淡出，像在跟你打招呼。恭喜你，悬浮按钮正式营业！

———
【教程时间：超详细零代码版】

目标：给 WordPress 站点添加“悬浮按钮”，实现回顶、客服、二维码等快捷功能。
工具：免费插件「Floating Action Button」或「Sticky Menu」。
耗时：3 分钟。
适合：小白、懒人、颜值党。

安装插件
后台 → 插件 → 安装插件 → 搜索「Floating Action Button」→ 安装并启用。看到左侧菜单出现「Floating Button」即成功。
创建按钮
进入「Floating Button-Add New」：

显示范围
「Visibility」里勾选「Show on all pages」，也可排除特定文章类型。
手机端测试
浏览器 F12 → 切手机模式 → 刷新页面 → 按钮应紧贴右下角，点击立即回顶。若遮挡文字，把 Bottom 调到 100px。
多按钮玩法
回到列表页点「Duplicate」复制，把图标改“whatsapp”，链接填客服微信二维码，位置改成 Bottom Left，就能左右护法双悬浮。
备份与速度
插件自带「Export Settings」，升级前导出一键恢复。若担心拖速，到「Settings」关闭 FontAwesome 全库，改用 SVG 图标，体积立减 90%。
彩蛋进阶
想让按钮只在文章页出现？在「Visibility」里选「Posts only」。
想让按钮 3 秒后自动弹出？在「Advanced」里填 Delay 3000ms。
想让按钮点击后弹出表单？装「WPForms」→ 获取表单短代码 → 在按钮链接里填 javascript:void(0) → 在「Custom JS」里写：

JavaScript

复制

document.getElementById('fab').onclick = () => {document.querySelector('.wpforms-container').style.display='block';}

最新文章

相关文章