wordpress里怎么在页面右下角固定位置加一个电话按钮

发表于 分类于 ，
详细介绍在WordPress网站页面右下角添加固定电话/WhatsApp按钮的两种方法，包括HTML+CSS代码实现和使用Code Snippets插件的全站添加方案

可以通过在 WordPress 页面底部（或全站）添加一段简单的 HTML + CSS 代码来实现右下角固定的 WhatsApp 按钮。你可以把代码放在以下位置之一：

  • 使用 Elementor 的「HTML」组件添加到页脚；
  • 或者在 外观 → 自定义 → 额外CSS / 额外HTML 中添加。

✅ 方法 1：直接插入 HTML + CSS 代码

将下面的代码复制到 Elementor 的 “HTML” 小组件中（建议放在页脚区域）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- WhatsApp 固定按钮 -->
<a href="https://api.whatsapp.com/send/?phone=8618018761460&text&type=phone_number&app_absent=0" 
   class="whatsapp-float" target="_blank" rel="noopener">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" 
       alt="WhatsApp" class="whatsapp-icon">
</a>

<style>
.whatsapp-float {
  position: fixed;
  bottom: 20px; /* 距离底部距离 */
  right: 20px;  /* 距离右侧距离 */
  background-color: #25d366; /* WhatsApp 绿色 */
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.whatsapp-icon {
  width: 50px;
  height: 50px;
  padding: 10px;
}
</style>

✅ 方法 2：使用「Code Snippets」插件添加全站按钮

  1. 安装并启用插件 Code Snippets。
  2. 新建一个 Snippet，选择类型为「在前端执行」。
  3. 粘贴以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
add_action('wp_footer', function() {
  ?>
  <a href="https://api.whatsapp.com/send/?phone=8618018761460&text&type=phone_number&app_absent=0" 
     class="whatsapp-float" target="_blank" rel="noopener">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" 
         alt="WhatsApp" class="whatsapp-icon">
  </a>
  <style>
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 999;
    transition: transform 0.2s ease;
  }
  .whatsapp-float:hover {
    transform: scale(1.1);
  }
  .whatsapp-icon {
    width: 50px;
    height: 50px;
    padding: 10px;
  }
  </style>
  <?php
});

✅ 效果

  • 按钮会固定在右下角（如你图片中那样）。
  • 点击后跳转到 WhatsApp 对话界面。
  • 可调整 bottom、right、width 等值来控制位置和大小。