大家做外贸网站,都需要能让客人方便随时联系我们,比如添加whatsapp聊天按钮,常用的方法是通过插件来解决,但是网站插件多了影响网站速度。
通过下面的两行简单的代码,即可实现在wordpress网站的页面中添加whatsapp聊天按钮,还可以实现简单的hover特效(鼠标移到图标上,图标改变尺寸、透明度、旋转角度等等)。
首先,在 </body>
之前加入下面代码
html
1
<div class="whatsapp"><a href="https://wa.me/你的手机号码" target="_blank"><img src="https://img.icons8.com/color/96/000000/whatsapp--v1.png" /></a></div>.whatsapp{ position:fixed; bottom:10px; right:15px;}
有如下两种方法添加,通过下面两种方法添加后,在网站前端所有页面都会显示。
方法1:编辑模板文件
footer.php(推荐对代码稍微熟悉的同学使用,以免出错,导致网站显示不正常)
方法二:通过模板“添加自定义HTML”功能
一般的模板都有“添加自定义HTML”功能,可以把这段代码添加到页面底部某个位置。
然后,在customize中添加additional css,来设置图标的格式。
一般的模板都有添加additional css的功能,主要是用来调整显示样式。
plaintext
123456789101112131415
.whatsapp{
position:fixed;
bottom:10px;
right:15px;
}
.whatsapp img{
width:48px;
opacity:0.5;
}
.whatsapp img:hover{
opacity:1;
width:58px;
transform:rotate(8deg);
}
下面是添加好之后的效果,是不是很简单。
这是默认效果
这是鼠标放上去的效果,图标稍微变大,同时顺时针轻微旋转