有些WordPress模板，把聯(lián)系方式做成了小工具，后臺(tái)小工具處上傳好微信或者QQ二維碼，側(cè)邊欄就可以展示了。
但是很多模板并沒有做此功能的小工具，那么我們?nèi)绾卧趥?cè)邊欄展示微信二維碼聯(lián)系方式呢？
今天阿湯博客就分享一下自己動(dòng)手在側(cè)邊欄添加一個(gè)微信二維碼聯(lián)系方式。
1、首先準(zhǔn)備好微信或者QQ二維碼圖片，上傳到網(wǎng)站，可以通過多媒體上傳，也可以通過FTP等方式上傳，然后獲取到圖片的路徑。
比如：/wp-content/uploads/img/wechat.jpg
2、登錄到后臺(tái)，點(diǎn)擊頁面->小工具->文本，把文本小工具添加到首頁側(cè)邊欄，然后把下面的代碼粘貼到文本框，記得修改文本的內(nèi)容為自己的信息。
<div class="widget_lianxi"> <ul> <li>阿湯博客：Linux服務(wù)器運(yùn)維技術(shù)交流博客</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>
然后點(diǎn)擊保存，如下圖：
注：這里也可以添加類似客服那種QQ在線，代碼生成可以訪問http://bizapp.qq.com/webpres.htm，生成以后添加到<li></li>標(biāo)簽之中，再調(diào)整樣式。二維碼的大小，可以調(diào)整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"名稱一致，這里只講方法，樣式需要根據(jù)自己網(wǎng)站的情況進(jìn)行調(diào)整。
最后訪問首頁查看顯示效果：
如果需要添加側(cè)邊欄網(wǎng)站統(tǒng)計(jì)信息，可以參考文章：《如何制作WordPress側(cè)邊欄站點(diǎn)統(tǒng)計(jì)信息小工具》
