wordpress博客怎么添加收藏書簽？下面本篇文章給大家講解一下在WordPress博客中添加收藏書簽的方法，并附上實現代碼，希望對大家有所幫助！
這兩天在鼓搗給博客添加”社會性網絡書簽Social Bookmark”，也就是文章下面提供給讀者收藏分享文章的按鈕。網絡上提供了很多WordPress插件來實現書簽的功能，但是大多數插件也就是提供一段JS代碼，其他什么也沒有提供，代碼的定制性極差。
可喜的是一些網站提供了代碼來實現書簽功能，這很不錯。于是做了一番測試，結果不是很滿意，有些代碼已經失效了，而且調用的小圖片太多，增加了http連接數，對網站的加載速度有一定的影響。求人不如求己，自己從各大書簽網站下載來了最新的代碼，經過小小的拼湊，再用上CSS Sprites技術，把這些小圖片整成一張，速度明顯上來了。另外還對代碼做了優化，通過W3C驗證。
下圖是制作成功的書簽效果，或許在本文下方看到的能給你更深的體驗：
好東西不能獨享，下面就來分享一下這個書簽收藏按鈕的制作過程。很簡單。
1、打開你的WordPress主題文件夾下single.php
2、找到，在下面加上以下代碼（就是書簽的顯示位置，或者放到你覺得合適的地方）：
<div> <strong> <span>收藏</span><span>?&?</span> <span>分享</span> </strong> <ul> <li> <a>post_title);?>&rurl=<?php echo urlencode(get_permalink($post->ID));?>&rcontent=<?php $desc = strip_tags($post->post_excerpt);?echo?urlencode($desc);??>"?title="轉貼到開心網"?rel="nofollow"><span></span></a> </li> <li> <a>ID));?>&title=<?php echo urlencode($post->post_title);?>"?rel="nofollow"><span></span></a> </li> <li> <a>ID));?>&title=<?php echo urlencode($post->post_title);?>"?rel="nofollow"><span></span></a> </li> <li> <a>ID));?>&title=<?php echo urlencode($post->post_title);?>"?rel="nofollow"><span></span></a> </li> <li> <a>ID));?>&title=<?php echo urlencode($post->post_title);?>"?title="Google書簽"?rel="nofollow"><span></span></a> </li> <li> <a>post_title);?>&iu=<?php echo urlencode(get_permalink($post->ID));?>"?title="百度搜藏"?rel="nofollow"><span></span></a> </li> <li> <a>post_title);?>&uri=<?php echo urlencode(get_permalink($post->ID));?>"?title="收藏到QQ書簽"?rel="nofollow"><span></span></a> </li> <li> <a><span></span></a> </li> <li> <a><span></span></a> </li> <li> <a><span></span></a> </li> <li> <a><span></span></a> </li> <li> <a>ID));?>&title=<?php echo urlencode($post->post_title);?>"?title="deliciou"?rel="nofollow"><span></span></a> </li> <li> <script> cT="0";nc="#444";nBgc="";nBorder="#F5E5A9";tc="#649B00";tBgc="#FFF4D0";tBorder="#F5E5A9";tDigg="%E6%8E%A8%E8%8D%90";tDugg="%E5%B7%B2%E8%8D%90";defaultItemUrl="WEB_URL";defaultFeedUrl ="http://feed.feedsky.com/ludou"; </script><script></script> </li> </ul> </div>
3、注意將上面代碼中www.ludou.org網址改成你的，接著在你的WordPress主題CSS文件中加入以下代碼:
#soucang?{ margin:15px?auto; } #soucang?ul?{ display:inline; position:absolute; } #soucang?li?{ list-style:none; float:left; margin-right:10px; display:block; } #soucang?li?a?span?{ /*請將下面的?http://example/m.gif?改成你自己的圖片鏈接*/ background:url(http://example/m.gif)?no-repeat; display:block; height:16px; width:16px; } #soucang?li#baidu??a?span?{?background-position:?0?0;?} #soucang?li#bolaa?a?span?{?background-position:?0?-17px;?} #soucang?li#delicious?a?span?{?background-position:?0?-34px;?} #soucang?li#douban?a?span?{?background-position:?0?-85px;?} #soucang?li#google?a?span?{?background-position:?0?-102px;?} #soucang?li#hexun?a?span?{?background-position:?0?-119px;?} #soucang?li#jiudian?a?span?{?background-position:?0?-136px;?} #soucang?li#kaixin?a?span?{?background-position:?0?-153px;?} #soucang?li#poco?a?span?{?background-position:?0?-187px;?} #soucang?li#qq?a?span?{?background-position:?0?-204px;?} #soucang?li#vivi?a?span?{?background-position:?0?-221px;?} #soucang?li#yahoo?a?span?{?background-position:?0?-238px;?} #soucang?li#xianguo?{margin-left:10px;?padding-bottom:5px;}
上面的代碼使用了CSS Sprites技術，其中#soucang?li?a?span的背景圖片可自定義，只需放到你的網站目錄下，將http://example/m.gif修改成你自己的圖片地址就可以了。另外，如果上面的CSS布局不適合你的博客，可以自己改改啊。
好了，到此就大功造成了。看著這些各色各樣的書簽按鈕，感覺是不是很不一樣呢？其實這些書簽對網站的美化也有一定的幫助作用哦。有事沒事，在此留個言吧。
因為網頁的寬度有限，這里只提供了16個主流的書簽按鈕，其他的可以根據自己的需要自行添加，下面提供其他的書簽代碼及logo下載，并非我原創。把上面提供的代碼看明白了，自己添加也不是什么難事了。
