WordPress 已经发布了 Block 编辑器，这为小工具中增加社交图标提供了更好的办法。然而，对于国内社交平台的支持目前仍然不是完善。并同过去一篇文章中讨论了如何自定义社交图标小工具，今天将给出实现微信图标并马上弹出二维码的设计方案。
步骤指南
第一步：在主题的 style.css 中添加 CSS 样式
在主题中添加以下样式，以实现在鼠标悬停时弹出二维码。
以上两个方法联合起来即可实现Block 小工具编辑器社交图标小工具增加对微信弹出二维码的支持，具体方法如下：
第一步，在主题的style.css中添加如下的css样式；
a[rel~="weixin"] {
position: relative;
}
a[rel~="weixin"]::after {
content: "";
position: absolute;
right: -2.5rem;
top: -9rem;
z-index: 99;
width: 128px;
height: 128px;
background-size: cover; /* 或 contain */
border: 4px solid #0095ba;
transform-origin: top right;
transform: scale(0);
opacity: 0;
transition: all 0.4s ease-in-out;
}
a[rel~="weixin"]:hover::after {
transform: scale(1);
opacity: 1;
}第二步：添加背景图片
将二维码图片地址增加到 CSS 中：
a[rel~="weixin"]::after {
background-image: url(https://example.com/qrcode.png);
}第三步：添加微信链接
根据WordPress Block 小工具自定义社交图标文章中的教程，在社交图标小工具中添加链接，并输入 #weixin。
第四步：在区块侧边栏中输入 REL 值
在社交图标小工具中选择微信链接，并在区块编辑器侧边栏的链接 REL 字段中输入“weixin”。
完成效果
完成上述步骤后，您就可以在 WordPress 中实现微信图标的鼠标悬停弹出二维码功能。您可以根据实际需要，修改 CSS 样式来调整二维码的位置和大小。具体效果可参考本站侧边栏显示。