主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
如何给WordPress博客添加书签?以下文章将讲解如何在WordPress博客中添加书签,并附上实现代码,希望对你有所帮助!
这两天我一直在修改我的博客。社交网站书签社交书签& quot,也就是文章下方的按钮,供读者收藏和分享文章。网络上有很多实现书签功能的WordPress插件,但是大部分插件只提供了一个JS代码,其他什么都没有,所以代码定制性很差。
好在有些网站提供了实现书签功能的代码,很不错。于是做了一些测试,结果不是很理想。部分代码无效,调用小图片过多,增加了http连接数,对网站加载速度有一定影响。求人不如求己。我从各大书签网站下载了最新的代码,稍微东拼西凑之后,用CSS Sprites技术把这些小图做成一张,明显提高了速度。此外,代码经过W3C优化和验证。
下图是成功制作的书签效果。或许你在本文底部看到的东西能让你有更深的体会:
好东西不能独享。下面分享一下这个书签收藏按钮的制作过程。很简单。
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博客就是这样添加书签的。详情(附实现代码)请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- Windows搭建IIS+PHP+MySQL环境(Windows搭建php服务器)
- 宝塔 panel php安装扩展失败怎么办(宝塔 panel php安装扩展失败怎么办?)
- 创建mysql索引极大地优化了php应用程序的性能(创建MySQL索引极大地优化了PHP应用程序的性能模块)
- Apache+MySQL+php环境安装(示例总结)(php安装mysqli扩展)
- 微信开发实现自定义菜单代码教程(如何从微信自定义菜单跳转到网页)
本文由主机参考刊发,转载请注明:如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接) https://zhujicankao.com/91968.html
评论前必须登录!
注册