环球热讯:WordPress博客怎么添加收藏书签?(附实现代码)

时间:2023-02-28 20:04:35       来源:转载

WordPress博客怎么添加收藏书签?下面本篇文章给大家讲解一下在WordPress博客中添加收藏书签的方法,并附上实现代码,希望对大家有所帮助!


【资料图】

这两天在鼓捣给博客添加"社会性网络书签Social Bookmark",也就是文章下面提供给读者收藏分享文章的按钮。网络上提供了很多WordPress插件来实现书签的功能,但是大多数插件也就是提供一段JS代码,其他什么也没有提供,代码的定制性极差。

可喜的是一些网站提供了代码来实现书签功能,这很不错。于是做了一番测试,结果不是很满意,有些代码已经失效了,而且调用的小图片太多,增加了http连接数,对网站的加载速度有一定的影响。求人不如求己,自己从各大书签网站下载来了最新的代码,经过小小的拼凑,再用上CSS Sprites技术,把这些小图片整成一张,速度明显上来了。另外还对代码做了优化,通过W3C验证。

下图是制作成功的书签效果,或许在本文下方看到的能给你更深的体验:

好东西不能独享,下面就来分享一下这个书签收藏按钮的制作过程。很简单。

1、打开你的WordPress主题文件夹下single.php

2、找到,在下面加上以下代码(就是书签的显示位置,或者放到你觉得合适的地方):

收藏 & 分享
  • <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>
登录后复制

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中文网其它相关文章!

关键词: 相关文章 求人不如求己 这两天在