WordPress博客怎么添加收藏书签?(附实现代码)

轻晨酱_8711

轻晨酱_8711

2023-02-28

2068人浏览

转载

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

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

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

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

2.jpg

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

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

Wordpress OAuth
Wordpress OAuth

启动并完成 WordPress.com OAuth 认证,通过 REST API 发布文章。适用于需要生成授权链接、交换授权码等场景。

下载

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下载,并非我原创。把上面提供的代码看明白了,自己添加也不是什么难事了。

推荐学习:《WordPress教程》

相关文章

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

相关标签:

php wordpress

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

40

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

20

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

40

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

120

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

80

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

80

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

40

10

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

2026.10.22

80

25

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

2026.10.22

40

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习