有些WordPress模板，把聯(lián)系方式做成了小工具，后臺小工具處上傳好微信或者QQ二維碼，側邊欄就可以展示了。
但是很多模板并沒有做此功能的小工具，那么我們如何在側邊欄展示微信二維碼聯(lián)系方式呢？
今天阿湯博客就分享一下自己動手在側邊欄添加一個微信二維碼聯(lián)系方式。
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"名稱一致，這里只講方法，樣式需要根據自己網站的情況進行調整。
最后訪問首頁查看顯示效果：
如果需要添加側邊欄網站統(tǒng)計信息，可以參考文章：《如何制作WordPress側邊欄站點統(tǒng)計信息小工具》
贊
0
賞
