為WordPress添加側(cè)邊跟隨百度分享按鈕（含劃詞分享、圖片分享效果）

什么是側(cè)邊跟隨百度分享按鈕？三好公民先用一個(gè)預(yù)覽圖表達(dá)一下想要實(shí)現(xiàn)的效果：

正如你所看到的，側(cè)邊跟隨百度分享按鈕指的就是上圖中的 ①，這個(gè)百度分享按鈕能夠固定懸浮在頁(yè)面左側(cè)，跟隨頁(yè)面滾動(dòng)一直顯示；② 就是劃詞分享效果；③ 就是圖片分享效果。

下面三好公民詳解一下實(shí)現(xiàn)方法，參考了鳥哥在HotNews Pro Plus主題中的代碼，原代碼沒有劃詞分享和圖片分享效果，三好公民做了一點(diǎn)修改，能夠?qū)崿F(xiàn)劃詞分享和圖片分享效果，并且能夠在任何WordPress主題上添加側(cè)邊跟隨百度分享按鈕。

1.新建一個(gè)文件 share.php，然后把如下代碼粘貼到其中：

<div id="share">
    <div class="share_top">
        <i class="lt"></i>
    </div>
    <div class="share">
        <div class="bdsharebuttonbox">
            <a href="#" class="bds_more" data-cmd="more"></a>
            <a title="分享到QQ空間" href="#" class="bds_qzone" data-cmd="qzone"></a>
            <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
            <a title="分享到騰訊微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
            <a title="分享到人人網(wǎng)" href="#" class="bds_renren" data-cmd="renren"></a>
            <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="share_bottom">
        <i class="lb"></i>
    </div>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

將這個(gè) share.php 文件上傳到當(dāng)前主題的根目錄。

2.在主題的style.css中添加如下樣式代碼：

#share {
	display:block;
	width:35px;
	margin-left:-517px;
	position:fixed;
	left:50%;
	top:420px;
	_margin-left:-515px;
	_position:absolute;
	_margin-top:420px;
	_top:expression(eval(document.documentElement.scrollTop));
	}
.share {
	background:#fff;
	width:24px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	}
.share_top {
    position:relative;
    background:#fff;
    width:24px;
    height:8px;
    border-top:1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    }
.share_bottom {
    position:relative;
    background:#fff;
    width:24px;
    height:8px;
    margin:0 0 10px 0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    }
.bdsharebuttonbox {
    padding:0 0 0 4px !important;
    }
.bdsharebuttonbox a {
    width:16px !important;
    padding:0 !important;
    margin:3px 0 !important;
    }

3.在主題的 footer.php 中 </body> 的前面添加調(diào)用 share.php 文件的代碼即可：

<?php get_template_part( 'share' ) ?>