网站尽量少使用插件。如果这个功能也用插件，那个功能也用插件，最后你的网站一定臃肿，加载也一定慢到不可接受。
所以这2个飘浮的功能按钮，我们来用最轻量的方式实现，不用插件。
虽然实现它不用插件，但还是有必要先安装 Code Snippets 插件，相信做WP站的站长都会装这个，不管什么主题都能用，通用性强。用这个来部署自定义代码。有些同学会选择在一些主题里直接加代码，加在header或footer里，都是OK的，那就连Code Snippets插件都不用装。
先在你网站的 wp-content 文件中创建一个名为 "floating-sidebar" 的文件夹，然后在这个新文件夹内创建一个名为 "images" 的文件夹，然后上传2个PNG格式的小图标。
图标如下：请先下载保存到你的电脑本地。分别命名为： whatsapp-icon 和 email-icon 即可。记得是PNG格式，尺寸都是200 x 200 px，别太大或太小，太大或太小略微难看，200px刚刚好。
将如下html代码粘贴到 Code Snippets 中并保存，位置是 wp_head:
<div id="floatingMenu"> <a href="https://api.whatsapp.com/send/?phone=8613800000000&text&type=phone_number&app_absent=0" target="_blank" class="whatsapp" aria-label="Chat on WhatsApp"> <img src="https://yourdomain.com/wp-content/floating-sidebar/images/whatsapp-icon.png" alt="WhatsApp"> </a> <a href="mailto:name@yourdomain.com" class="email" aria-label="Send Email"> <img src="https://yourdomain.com/wp-content/floating-sidebar/images/email-icon.png" alt="Email"> </a></div>
记得把上面代码中的三个信息改成你的：手机号、域名、邮箱。
将如下css代码粘贴到 Code Snippets中并保存，位置是 wp-footer：
<style>#floatingMenu { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 9999;}
#floatingMenu a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: all 0.3s ease;}
#floatingMenu a:hover { transform: scale(1.1);}
#floatingMenu img { width: 30px; height: 30px;}
.whatsapp { background: #ffffff; }.email { background: #ffffff; }
@media (max-width: 768px) { #floatingMenu { right: 10px; bottom: 20px; top: auto; flex-direction: row; }}</style>
然后就实现了在网站右侧显示 WhatsApp 和 E-mail 这2个功能图标了：鼠标划上去有轻微的放大效果，圆润且低调，令人舒服。
客户点击WhatsApp图标即可开启WhatsApp即时聊天；点击E-mail图标即可打开邮箱客户端给你写邮件。
是不是很简单？这绝对是最轻量级的方式，完全不会拖慢你网站的加载。
有什么不明白的可以加微信问我，我是富力客SEO汤师爷，无偿为您答疑解惑，做时间的朋友。
