主机评测网,专注vps、独立服务器等主机评测
最专业的主机评测网站

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

如何给WordPress博客添加书签?以下文章将讲解如何在WordPress博客中添加书签,并附上实现代码,希望对你有所帮助!

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

这两天我一直在修改我的博客。社交网站书签社交书签& quot,也就是文章下方的按钮,供读者收藏和分享文章。网络上有很多实现书签功能的WordPress插件,但是大部分插件只提供了一个JS代码,其他什么都没有,所以代码定制性很差。

好在有些网站提供了实现书签功能的代码,很不错。于是做了一些测试,结果不是很理想。部分代码无效,调用小图片过多,增加了http连接数,对网站加载速度有一定影响。求人不如求己。我从各大书签网站下载了最新的代码,稍微东拼西凑之后,用CSS Sprites技术把这些小图做成一张,明显提高了速度。此外,代码经过W3C优化和验证。

下图是成功制作的书签效果。或许你在本文底部看到的东西能让你有更深的体会:

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

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

1.在single.php下打开你的主题文件夹。

2.发现

& ltdiv id = & quot搜仓& quot& gt& ltstrong & gt& ltspan style = & quotcolor:# 9932 cc & quot;& gt收藏品

#搜仓{ margin:15px auto;} #搜仓ul { display:inline;位置:绝对;} #搜仓李{ list-style:none;浮动:左;右边距:10px显示:块;} #搜仓阿利span {/*请把下面的http://example/m.gif改成自己的图片链接*/background:URL(http://example/m . gif)no-repeat;显示:块;高度:16px宽度:16px} #搜仓李#百度a span { background-position:0 0;} #搜仓李# bolaa a span { background-position:0-17px;} #搜仓李#美味a span { background-position:0-34px;} #搜仓李#豆瓣a span { background-position:0-85px;} #搜仓李# Google a span { background-position:0-102 px;} #搜仓李#贺勋a span { background-position:0-119 px;} #搜仓李#九点a span { background-position:0-136 px;} #搜仓李#辛凯a span { background-position:0-153 px;} #搜仓李# poco a span { background-position:0-187 px;} #搜仓李# QQ a span { background-position:0-204 px;} #搜仓李# vivi a span { background-position:0-221 px;} #搜仓李#雅虎a span { background-position:0-238 px;} #搜藏李#郭喜安{ margin-left:10px;垫底:5px}上面的代码使用了CSS Sprites技术,其中#搜仓阿利span的背景图片是可以自定义的,只需要放在你的网站目录下,把http://example/m.gif改成你自己的图片地址就可以了。另外,如果上面的CSS布局不适合你的博客,可以自己改。

嗯,就是这样。看着这些五花八门的书签按钮,是不是感觉很不一样?其实这些书签对美化网站也是有帮助的。有事没事。请在此留言。

因为网页宽度有限,这里只提供了16个主流的书签按钮,其他的可以根据自己的需要添加。以下是其他书签代码和logo下载,非本人原创。看了上面提供的代码,自己添加并不难。

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

推荐学习:WordPress教程

WordPress博客就是这样添加书签的。详情(附实现代码)请关注草根吧VPS其他相关文章!

:如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接) https://vps.caogenba.com.com/91968.html

赞(0) 打赏
未经允许不得转载:主机测评 » 如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

评论 抢沙发

登录

找回密码

注册