WordPress新手：如何创建全局粘性圆角联系按钮（含展开菜单）

一、核心代码实现 #

1. HTML结构（按钮+菜单） #

把这段代码加到网站页脚，确保全站都能加载：

<div class="sticky-contact-wrapper">
  <button class="sticky-contact-toggle" id="contactToggle">📞</button>
  <div class="sticky-contact-menu" id="contactMenu">
    <a href="tel:+123456789" class="contact-item">电话</a>
    <a href="mailto:info@example.com" class="contact-item">邮箱</a>
    <a href="https://wa.me/123456789" class="contact-item">WhatsApp</a>
    <!-- 按需添加更多联系方式 -->
  </div>
</div>

2. CSS样式（粘性+响应式） #

这段代码负责固定位置、样式和适配移动端：

/* 固定容器：右下角，层级拉满不被覆盖 */
.sticky-contact-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* 主按钮样式 */
.sticky-contact-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366; /* WhatsApp绿，可自己换色 */
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.sticky-contact-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 隐藏菜单，点击后显示 */
.sticky-contact-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 10px;
}

.sticky-contact-menu.active {
  display: flex;
}

/* 菜单选项样式 */
.contact-item {
  padding: 12px 20px;
  background-color: white;
  color: #333;
  text-decoration: none;
  border-radius: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.contact-item:hover {
  background-color: #f0f0f0;
  transform: translateX(-5px);
}

/* 移动端适配：缩小按钮和字体 */
@media (max-width: 768px) {
  .sticky-contact-toggle {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .contact-item {
    padding: 10px 16px;
    font-size: 14px;
  }
}

3. JavaScript交互（点击展开/收起） #

实现按钮点击切换菜单显示，点击页面其他地方自动收起：

document.addEventListener('DOMContentLoaded', function() {
  const toggleBtn = document.getElementById('contactToggle');
  const contactMenu = document.getElementById('contactMenu');
  
  // 点击按钮切换菜单
  toggleBtn.addEventListener('click', function() {
    contactMenu.classList.toggle('active');
    // 按钮旋转动画，增强交互感
    toggleBtn.style.transform = contactMenu.classList.contains('active') ? 'rotate(45deg)' : 'rotate(0deg)';
  });
  
  // 点击页面空白处收起菜单
  document.addEventListener('click', function(e) {
    if (!toggleBtn.contains(e.target) && !contactMenu.contains(e.target)) {
      contactMenu.classList.remove('active');
      toggleBtn.style.transform = 'rotate(0deg)';
    }
  });
});

二、WordPress添加步骤（新手友好版） #

方法1：用主题自定义功能 #

1. 后台进入「外观」→「自定义」→「额外CSS」，粘贴上面的所有CSS代码，保存。
2. 进入「外观」→「主题文件编辑器」，找到footer.php，在</body>标签前面插入HTML代码，更新文件。
3. 同样在主题文件编辑器里打开functions.php，在文件末尾粘贴下面代码（把JS代码放进去），更新文件：

function add_sticky_contact_js() {
  ?>
  <script>
    // 这里粘贴上面的JavaScript代码
  </script>
  <?php
}
add_action('wp_footer', 'add_sticky_contact_js');

方法2：用插件（不用改主题文件） #

1. 安装并激活「Insert Headers and Footers」插件。
2. 后台进入「设置」→「Insert Headers and Footers」，在「Footer」栏粘贴HTML代码和JavaScript代码（把两个代码放一起），保存。
3. 还是去「外观」→「自定义」→「额外CSS」粘贴CSS代码，保存。

三、自定义调整建议 #

• 换按钮颜色：修改.sticky-contact-toggle里的background-color值，比如改成#0088cc（蓝色）。
• 换图标：把按钮里的📞换成Font Awesome图标，先在header.php里加<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">，然后按钮里写<i class="fa-solid fa-phone"></i>。
• 改位置：把.sticky-contact-wrapper的bottom和right改成top和left，就能固定在左上角。
• 加更多选项：在.sticky-contact-menu里新增<a>标签，比如微信、企业微信链接。

内容的提问来源于stack exchange，提问作者Alex Stroescu