有些WordPress模板,把联系方式做成了小工具,后台小工具处上传好微信或者QQ二维码,侧边栏就可以展示了。
但是很多模板并没有做此功能的小工具,那么我们如何在侧边栏展示微信二维码联系方式呢?
今天阿汤博客就分享一下自己动手在侧边栏添加一个微信二维码联系方式。
1、首先准备好微信或者QQ二维码图片,上传到网站,可以通过多媒体上传,也可以通过FTP等方式上传,然后获取到图片的路径。
比如:/wp-content/uploads/img/wechat.jpg
2、登录到后台,点击页面->小工具->文本,把文本小工具添加到首页侧边栏,然后把下面的代码粘贴到文本框,记得修改文本的内容为自己的信息。
<div class="widget_lianxi"> <ul> <li>阿汤博客:Linux服务器运维技术交流博客</li> <li>邮箱地址:xxxxxx@qq.com</li> <li>微信/QQ:</li> <li style="text-align: center"><img width="150px" height="150px" src="/wp-content/uploads/img/wechat.jpg" alt="扫码加我微信"/><img width="150px" height="150px" src="/wp-content/uploads/img/qq.jpg" alt="扫码加我QQ"/></li> </ul> </div>
然后点击保存,如下图:
注:这里也可以添加类似客服那种QQ在线,代码生成可以访问http://bizapp.qq.com/webpres.htm,生成以后添加到<li></li>标签之中,再调整样式。二维码的大小,可以调整width和height的值。
3、添加CSS样式,把下面的样式添加到/wp-content/themes/模板名称/style.css末尾。
.widget_lianxi ul{padding:5px 0 15px 20px;color: #00a67c;} .widget_lianxi li{width:89%;float: left;background-color:#fff;padding:5px 8px;display:inline-block;border: solid 1px #dddd;}
注意:名称要和文本里面class="widget_lianxi"名称一致,这里只讲方法,样式需要根据自己网站的情况进行调整。
最后访问首页查看显示效果:
如果需要添加侧边栏网站统计信息,可以参考文章:《如何制作WordPress侧边栏站点统计信息小工具》