您现在的位置是：首页 > WordPress教程WordPress教程

WordPress怎么添加浮动按钮？

WP集市 2025-08-21 【WordPress教程】 1953人已围观

哎，最近老有朋友问我：“我那WordPress网站，想加个不管咋滚页面都飘在边上的按钮，点一下能跳转到联系页或者微信二维码，咋整啊？” 说实话，这功能看着花里胡哨，其实搞起来特简单，今天就手把手教你，代码党、小白党都能学会，看完不会你打我（不是）。

先唠唠：为啥要搞浮动按钮？

说白了，就是方便用户嘛！比如客服按钮、返回顶部、关注公众号这些，固定在屏幕边上，用户不管划到哪都能点，比藏在导航栏里实用多了。尤其手机上，屏幕小，浮动按钮一眼就能瞅见，转化率都能高不少——你懂的，用户懒得找，咱们就得送到眼前。

开整！两种方法：代码党vs小白党

方法一：自己写代码（适合爱折腾的）

先啰嗦一句：改代码前一定备份！一定备份！一定备份！重要的事说三遍，不然改崩了哭都来不及（别问我咋知道的）。

第一步：写个按钮样式（CSS）

浮动按钮要“飘着”，还得好看，得先给它穿件“衣服”。这衣服就是CSS代码，控制它在哪儿、长啥样。直接上代码，你照着改就行：

/* 浮动按钮样式 */
.my-floating-btn {
  position: fixed; /* 固定在屏幕上，滚页面也不动 */
  right: 20px; /* 距离右边20像素，自己调数字 */
  bottom: 40px; /* 距离底边40像素，手机上别太靠下 */
  width: 60px; /* 按钮大小，60像素见方 */
  height: 60px;
  background: #2ecc71; /* 按钮颜色，这是个清新绿，自己换#ff6b6b是红色 */
  border-radius: 50%; /* 圆形按钮，想要方的改20px */
  box-shadow: 0 3px 10px rgba(0,0,0,0.2); /* 加个阴影，不那么愣 */
  display: flex; /* 让里面的图标/文字居中 */
  align-items: center;
  justify-content: center;
  color: white; /* 文字/图标颜色 */
  font-size: 24px; /* 图标大小 */
  text-decoration: none; /* 去掉链接下划线 */
  z-index: 9999; /* 让它在最上面，别被其他内容盖住 */
}

/* 鼠标放上去变颜色（可选） */
.my-floating-btn:hover {
  background: #27ae60; /* 深一点的绿，hover效果 */
  transform: scale(1.05); /* 稍微放大一点，有互动感 */
}

第二步：把CSS塞进WordPress

代码写好了，咋塞进去？新手的话，直接用WordPress自带的“自定义CSS”最方便，不用动文件：
后台 → 外观 → 自定义 → 额外CSS，把上面那段CSS粘贴进去，保存！

（进阶党：也可以改主题的style.css，或者用functions.php加载，但新手不推荐，容易改错地方）

第三步：加按钮的HTML和链接

光有样式不行，还得有个“按钮本体”，带链接的那种。咋加？用WordPress的“钩子”，把按钮塞到页面底部（这样不管滚到哪都能看到）。

打开后台 → 外观 → 主题文件编辑器，找到“functions.php”（在右边列表里找），拉到最下面，粘贴这段代码：

// 添加浮动按钮到页脚
add_action('wp_footer', 'add_my_floating_button');
function add_my_floating_button() {
  echo '<a href="https://你的链接地址" class="bda8-aaba-81e0-9cfc my-floating-btn">📞</a>';
}

解释下：

wp_footer 是WordPress的“钩子”，意思是“把内容加到页面底部”；
href="https://你的链接地址"：把链接换成你要跳转的页面，比如联系表单页、微信二维码页；
class="aaba-81e0-9cfc-5a55 my-floating-btn"：对应前面CSS的样式名，别改；
📞 是图标，也可以换成文字，比如“联系我”“↑”（返回顶部），或者用字体图标（比如Font Awesome的<i class="81e0-9cfc-5a55-a62f fa fa-phone"></i>，但得先加载Font Awesome）。

粘贴完点“更新文件”，刷新网站，瞅瞅！是不是右下角飘着个绿色按钮？点一下试试，能跳转就对了～

方法二：用插件（纯小白首选，不用写代码）

怕改代码？怕改崩？没事，WordPress最不缺的就是插件！直接搜个现成的，点点鼠标就完事。

后台 → 插件 → 安装插件，搜“Floating Button”，出来一堆，比如“Simple Floating Button”“Floating Action Button”，随便挑个下载量高的（比如第一个）；
安装、启用后，后台会多一个“Floating Button”设置项，点进去：
- 按钮文字/图标：填“联系我们”或者选个图标；
- 链接地址：填你要跳转的页面；
- 位置：选“右下角”“左下角”；
- 颜色、大小：自己调，预览看着舒服就行；
保存设置，刷新网站，搞定！

缺点？插件多了可能影响网站速度（不过这种小插件影响不大），而且样式没自己写的灵活，但胜在省心——适合完全不想碰代码的朋友。