WordPress博客怎么添加收藏书签？下面本篇文章给大家讲解一下在WordPress博客中添加收藏书签的方法，并附上实现代码，希望对大家有所帮助！
(资料图片)
这两天在鼓捣给博客添加"社会性网络书签Social Bookmark"，也就是文章下面提供给读者收藏分享文章的按钮。网络上提供了很多WordPress插件来实现书签的功能，但是大多数插件也就是提供一段JS代码，其他什么也没有提供，代码的定制性极差。
可喜的是一些网站提供了代码来实现书签功能，这很不错。于是做了一番测试，结果不是很满意，有些代码已经失效了，而且调用的小图片太多，增加了http连接数，对网站的加载速度有一定的影响。求人不如求己，自己从各大书签网站下载来了最新的代码，经过小小的拼凑，再用上CSS Sprites技术，把这些小图片整成一张，速度明显上来了。另外还对代码做了优化，通过W3C验证。
下图是制作成功的书签效果，或许在本文下方看到的能给你更深的体验：
好东西不能独享，下面就来分享一下这个书签收藏按钮的制作过程。很简单。
1、打开你的WordPress主题文件夹下single.php
2、找到<?php the_content(); ?>，在下面加上以下代码（就是书签的显示位置，或者放到你觉得合适的地方）：
<div id="soucang"><strong><span style="color:#9932CC">收藏</span><span style="color:#57c200"> & </span><span style="color:#9932CC">分享</span></strong><ul><li id="kaixin"><a href="http://www.kaixin001.com/repaste/share.php?rtitle=<?php echo urlencode($post->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 id="jiudian"><a title="推荐到九点" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a></li><li id="douban"><a title="推荐到豆瓣" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a></li><li id="yahoo"><a title="雅虎收藏" href="http://myweb.cn.yahoo.com/popadd.html?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a></li><li id="google"><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="Google书签" rel="nofollow"><span></span></a></li><li id="baidu"><a href="http://cang.baidu.com/do/add?it=<?php echo urlencode($post->post_title);?>&iu=<?php echo urlencode(get_permalink($post->ID));?>" title="百度搜藏" rel="nofollow"><span></span></a></li><li id="qq"><a href="http://shuqian.qq.com/post?from=3&title=<?php echo urlencode($post->post_title);?>&uri=<?php echo urlencode(get_permalink($post->ID));?>" title="收藏到QQ书签" rel="nofollow"><span></span></a></li><li id="vivi"><a href="javascript：d=document;t=d.selection?(d.selection.type!="None"?d.selection.createRange().text:""):(d.getSelection?d.getSelection():"");void(vivi=window.open("http://vivi.sina.com.cn/collect/icollect.php?pid=www.ludou.org&title="+escape(d.title)+"&url="+escape(d.location.href)+"&desc="+escape(t),"vivi","scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes"));vivi.focus();" title="保存到爱问ViVi收藏夹"><span></span></a></li><li id="bolaa"><a href="javascript：d=document;t=d.selection?(d.selection.type!="None"?d.selection.createRange().text:""):(d.getSelection?d.getSelection():"");void(blog=window.open("http://www5.bolaa.com/CommendBlog/SmallLogin.aspx?title="+escape(d.title)+"&newspath="+escape(d.location.href)+"&subtitle="+escape(t),"bolaa","width=400px,height=400px"));blog.focus();" title="推荐到博拉"><span></span></a></li><li id="poco"><a href="javascript：d=document;t=d.selection?(d.selection.type!="None"?d.selection.createRange().text:""):(d.getSelection?d.getSelection():"");void(keyit=window.open("http://my.poco.cn/fav/storeIt.php?t="+escape(d.title)+"&u="+escape(d.location.href)+"&c="+escape(t)+"&img=http://www.h-strong.com/blog/logo.gif","keyit","scrollbars=no,width=475,height=575,status=no,resizable=yes"));keyit.focus();" title="收藏到POCO网摘" rel="nofollow"><span></span></a></li><li id="hexun"><a href="javascript：t=document.title;u=location.href;e=document.selection?(document.selection.type!="None"?document.selection.createRange().text:""):(document.getSelection?document.getSelection():"");void(open("http://bookmark.hexun.com/post.aspx?title="+escape(t)+"&url="+escape(u)+"&excerpt="+escape(e),"HexunBookmark","scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes"));" title="转帖到和讯网摘" rel="nofollow"><span></span></a></li><li id="delicious"><a href="http://www.delicious.com/post?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="deliciou" rel="nofollow"><span></span></a></li><li id="xianguo"><script charset="utf8" type="text/javascript">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 type="text/javascript" charset="utf8" src="http://re.xianguo.com/api/diggthis.js"></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下载，并非我原创。把上面提供的代码看明白了，自己添加也不是什么难事了。
推荐学习：《WordPress教程》
以上就是WordPress博客怎么添加收藏书签？（附实现代码）的详细内容，更多请关注php中文网其它相关文章！
