详解WordPress中添加友情链接的方法
2016-05-21 11:48
489 查看
友情链接对于一个每个独立博客来说可以说是必须的,有不少人选择在侧边栏加入友情链接栏目,但建立一个独立的友情链接页面也是一个不错的选择。用插件可以轻松做到这一点,但喜欢原生的我,能自己动手解决,还是自己动手解决好。折腾了一下,方法就出来了。
普通方法
建立一个友情链接页面的步骤也是比较简单的,先建立一个新的页面模板,用友链函数调用友链,再加上css美化,事情就完成了。
下面说说具体的步骤
1.建立一个新的模板页面
复制主题中的page.php文件,重命名为links.php。
在页面的顶部加入如下代码
<?php /* Template Name: Links */ ?>
再把类似下面的一段代码
<div class="post-content"><?php the_content(); ?></div>
替换为
复制代码 代码如下:<div class="lists"><p class="tips">站点随机排序</p><?php wp_list_bookmarks('orderby=rand&show_images=1'); ?></div>
替换后把links.php放在主题文件夹根目录,然后新建一个页面,在页面模板中选择刚建立的“Links”,保存。
解释一下上面的代码
my_list_bookmarks是WordPress调用友链的函数,orderby是友链的排序方式,这里我写的是rand,也就是随机show_images是控制是否显示友链的图片,布尔型变量,1代表显示变量,0代表不显示,其他可选参数如下:
categorize
布尔型,用于设置连接是否按照各自的分类显示category
字符串型,后面就直接 “=链接分类ID号”,那么就显示这个分类下的链接。如果没有指定的话就显示所有的链接。
category_name
字符串型,如果后面 “=某个链接分类的名称” 那么就会在该链接分类前显示分类的名称,如果这里留空的话则会显示所有链接分类的分类名称(即默认的形式)。
category_before
字符串型,位于链接分类之前的文字或代码。
category_after
字符串型,位于链接分类之后的文字或代码。
class
字符串型,每一个链接的分类都会有一个 “class” 属性(从上面的代码就能看出),默认是:linkcat
category_orderby
字符串型,链接分类的排序方式,按照名词或者ID。
‘name' (默认)
‘id'
category_order
字符串型,链接分类的升降序排列方式:
ASC (默认)
DESC
title_li
字符串型,链接标题的头文字或代码,默认是:Bookmarks,并且它控制连接是否按照列表的方式排列。
title_before 和 title_after
顾名思义,它们就是连接标题头前后的文字或代码,默认是 h2 标签
show_private
布尔型,是否显示私有链接。
include
字符串型,输出指定 ID 的 Blogroll 的分类链接,各个 ID 之间用半角的 “,” 分开。默认显示所有的 Blogroll 分类。
exclude
字符串型,将指定 ID 的 Blogroll 分类链接从整个链接列表中排除,各个 ID 之间用半角的 “,” 分开。默认是什么都不排除。
orderby
字符串型,Blogroll 的排列方式(默认是根据名称排序,除非将这个值留空),即根据我们在 WP 后台链接设置界面下的那些参数来进行排序:
(1)'id'
(2)‘url'
(3)‘name'
(4)‘target'
(5)‘description'
(6)‘owner'
(7)‘rating'
(8)‘updated'
(9)‘rel' – 按设定的关系排列
(10)‘notes'
(11)‘rss'
(12)‘length' – 连接名称的长度设定
(13)‘rand' – 随机排列显示
order
字符串型,设置升降序的排列方式
ASC (默认)
DESC
limit
整型,设置输出链接条数的最大值。默认值是”-1″,输出全部。
between
字符串型,每个连接、图片和描述之间的文字或代码,默认是 “n” 换行。
show_description
布尔型,是否允许显示每个链接的描述。
show_rating
布尔型,是否允许显示链接的等级。
show_updated
布尔型,是否允许显示最近更新后的时间戳。
hide_invisible
布尔型,是否显示所有的链接,甚至是被管理员设为不可见的链接,默认允许显示。
2.添加css美化,以下是个人的css,供大家参考
.lists {padding: 5px; margin: 25px auto auto 0;} .linkcat {font-size: 12px; font-weight: bolder; padding: 5px; margin-bottom: 15px; list-style: none; clear:both} .lists li h2 {font-size:14px; margin-bottom: 15px; color: #99CC33; } .listcat ul {margin-left: 20px;} .linkcat ul li {float: left; margin-bottom: 20px; margin-left: 20px; padding: 4px 0 4px 6px; width: 150px; border: 1px solid #d9d9d9;} .linkcat ul li a {color: #a4a4a4; text-decoration: none;} .linkcat ul li a img {margin-right: 3px;} .linkcat ul li a:visited {color: #a4a4a4;} .tips {font-size: 14px; margin-bottom: 18px; margin-left: 5px;}
使用jQuery
具体实现步骤分两步:
1.加载jQuery库,可以直接调用google jQuery库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2.加载jQuery功能代码,注意jQuery闭合$(".linkpage a").each(function(e){ $(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">"); });这段jQuery的意思是遍历所有class为linkpage下所有的a标签,然后对该a标签添加img,其中是“.linkpage”需根据自己的模板更改。
您可能感兴趣的文章:
- Nginx下让WordPress支持固定链接的伪静态规则
- Nginx下Wordpress的永久链接实现(301,404等)
- Nginx下WordPress链接(url伪静态)301永久重定向实现方法
- 如何让PHPnow支持wordpress静态化链接的方法
- WordPress中获取页面链接和标题的相关PHP函数用法解析
- Nginx下修改WordPress固定链接导致无法访问的问题解决
- 简介WordPress中用于获取首页和站点链接的PHP函数
- WordPress中用于获取文章信息以及分类链接的函数用法
- WordPress中转义HTML与过滤链接的相关PHP函数使用解析
- 详解WordPress中过滤链接与过滤SQL语句的方法
- 详解WordPress中给链接添加查询字符串的方法
相关文章推荐
- 本站清理了一些友情链接 201207
- wordpress rewrite问题解决
- jQuery下拉友情链接美化效果代码分享
- WordPress升级版本及安装插件出现”Problem with the SSL CA cert”的解决办法
- 详解WordPress中添加和执行动作的函数使用方法
- 优化WordPress的Google字体以加速国内服务器上的运行
- 在WordPress中使用PHP脚本来判断访客来自什么国家
- 使用WordPress发送电子邮件的相关PHP函数用法解析
- 解析WordPress中控制用户登陆和判断用户登陆的PHP函数
- 推荐十款免费 WordPress 插件
- 在Linux系统下一键重新安装WordPress的脚本示例
- WordPress中Gravatar头像缓存到本地及相关优化的技巧
- Wordpress 忘记密码的处理方法
- 关于WordPress的SEO优化相关的一些PHP页面脚本技巧
- 详解WordPress中用于更新和获取用户选项数据的PHP函数
- WordPress中创建用户角色的相关PHP函数使用详解
- 讲解WordPress开发中一些常用的debug技巧
- 使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
- 编写PHP脚本来实现WordPress中评论分页的功能
- 优化WordPress中文章与评论的时间显示