什麼是側邊跟隨百度分享按鈕？先用一個預覽圖表達一下想要實現的效果：
正如你所看到的，側邊跟隨百度分享按鈕指的就是上圖中的 ①，這個百度分享按鈕能夠固定懸浮在頁面左側，跟隨頁面滾動一直顯示；② 就是劃詞分享效果；③ 就是圖片分享效果。
下面三好公民詳解一下實現方法，參考了鳥哥在 HotNews Pro Plus 主題中的代碼，原代碼沒有劃詞分享和圖片分享效果，三好公民做了一點修改，能夠實現劃詞分享和圖片分享效果，並且能夠在任何 WordPress 主題上添加側邊跟隨百度分享按鈕。
1. 新建一個文件 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="分享到人人網" 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>
將這個 share.php 文件上傳到當前主題的根目錄。
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> 的前面添加調用 share.php 文件的代碼即可：
<?php get_template_part( 'share' ) ?>