您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
WordPress博客添加收藏书签的代码实例
寒雁2023-06-19 18:10:54WordPress教程已有435人查阅
导读这两天在鼓捣给博客添加"社会性网络书签Social Bookmark",也就是文章下面提供给读者收藏分享文章的按钮。
这两天在鼓捣给博客添加"社会性网络书签Social Bookmark",也就是文章下面提供给读者收藏分享文章的按钮。网络上提供了很多WordPress插件来实现书签的功能,但是大多数插件也就是提供一段JS代码,其他什么也没有提供,代码的定制性极差。
可喜的是一些网站提供了代码来实现书签功能,这很不错。于是做了一番测试,结果不是很满意,有些代码已经失效了,而且调用的小图片太多,增加了http连接数,对网站的加载速度有 的影响。求人不如求己,自己从各大书签网站下载来了 新的代码,经过小小的拼凑,再用上CSS Sprites技术,把这些小图片整成一张,速度明显上来了。另外还对代码做了优化,通过W3C验证。
好东西不能独享,下面就来分享一下这个书签收藏按钮的制作过程。很简单。
1、打开你的WordPress主题文件夹下single.php
2、找到<?php the_content(); ?>,在下面加上以下代码(就是书签的显示位置,或者放到你觉得合适的地方):
3、注意将上面代码中 .ludou.org网址改成你的,接着在你的WordPress主题CSS文件中加入以下代码:
上面的代码使用了CSS Sprites技术,其中#soucang li a span
的背景图片可自定义,只需放到你的网站目录下,将 /static/upload/image/20230617/vlkvansiah0.gif修改成你自己的图片地址就可以了。另外,如果上面的CSS布局不适合你的博客,可以自己改改啊。
好了,到此就大功造成了。看着这些各色各样的书签按钮,感觉是不是很不一样呢?其实这些书签对网站的美化也有 的帮助作用哦。有事没事,在此留个言吧。因为网页的宽度有限,这里只提供了16个主流的书签按钮,其他的可以根据自己的需要自行添加,下面提供其他的书签代码及logo下载,并非我原创。把上面提供的代码看明白了,自己添加也不是什么难事了。
本文标签:
很赞哦! (4)
暂无内容 |
暂无内容 |
相关文章
- linux搭建WordPress博客的方法
- 使用C#转移Wordpress博客到为知笔记或Evernote的方法
- 本地搭建Wordpress博客网站的方法
- docker搭建wordpress博客的实现方法
- linux系统搭建wordpress博客的方法
- 阿里云搭建WordPress博客的方法
- wordpress博客怎么写robots.txt
- Windows搭建Wordpress博客的步骤方法
- socket实现WordPress博客自动发文登录的方法
- centOS服务器怎么搭建wordpress博客
- WordPress博客Centos7+Apache2.4+php5.6+mysql5.5搭建Lamp环境
- Docker怎么搭建WordPress博客
暂无内容 |
暂无内容 |
随机图文
lnmp安装nginx搭建wordpress的方法
1.安装nginx源,2.安装nginx3.启动nginx4.配置nginx开机自启动5.输入ip,看到nginx欢迎界面,安装成功ps:默认配置文件路径 /etc/nginx/nginx.conf默认log目录:/var/log/nginx/默认静态目录:/usr/share/nginx/htmlWordPress主题语言包汉化的制作方法
经过这次yHtml5主题的制作,我学会了怎么给主题制作语言包,就是一般的汉化主题啦。需要的朋友可以了解下,废话不多说,看步骤wordpress模板中常用函数介绍
wordpress模板常用函数有哪些;如果您是一位wordpress新手,那么这些函数对你来说 非常有用,比如说你看中了某款主题WordPress防暴力破解攻击的方法
我们可以通过以下三个步骤来减少被攻击以及被攻陷的机会:1、在当前 functions.php 添加以下代码去掉 WordPress 版本信息,减少被扫描到的机会。
留言与评论 (共有 0 条评论) |