详解WordPress中添加友情链接的方法
<p>友情链接对于一个每个独立博客来说可以说是必须的，有不少人选择在侧边栏加入友情链接栏目，但建立一个独立的友情链接页面也是一个不错的选择。用插件可以轻松做到这一点，但喜欢原生的我，能自己动手解决，还是自己动手解决好。折腾了一下，方法就出来了。</p>
<p>
<strong>普通方法</strong><br>
建立一个友情链接页面的步骤也是比较简单的，先建立一个新的页面模板，用友链函数调用友链，再加上css美化，事情就完成了。</p>
<p>
下面说说具体的步骤</p>
<p>
1.建立一个新的模板页面<br>
复制主题中的page.php文件，重命名为links.php。<br>
在页面的顶部加入如下代码</p>
<div>
<pre>
<?php
/*
Template Name: Links
*/
?>
</pre>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
再把类似下面的一段代码</p>
<div>
<pre>
<div><?php the_content(); ?></div>
</pre>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
替换为</p>
<p>
</p>
<div>
<span><u>复制代码</u></span> 代码如下:</div>
<div id="code10653">
<p>
<br>
<div><p>站点随机排序</p><?php wp_list_bookmarks('orderby=rand&show_images=1'); ?></div></p>
<p>
</p>
<p>
</p>
</div>
<p>
<br>
替换后把links.php放在主题文件夹根目录，然后新建一个页面，在页面模板中选择刚建立的“Links”，保存。<br>
解释一下上面的代码<br>
my_list_bookmarks是WordPress调用友链的函数，orderby是友链的排序方式，这里我写的是rand，也就是随机show_images是控制是否显示友链的图片，布尔型变量，1代表显示变量，0代表不显示，其他可选参数如下：<br>
categorize<br>
布尔型，用于设置连接是否按照各自的分类显示category<br>
字符串型，后面就直接 “=链接分类ID号”，那么就显示这个分类下的链接。如果没有指定的话就显示所有的链接。<br>
category_name<br>
字符串型，如果后面 “=某个链接分类的名称” 那么就会在该链接分类前显示分类的名称，如果这里留空的话则会显示所有链接分类的分类名称(即默认的形式)。<br>
category_before<br>
字符串型，位于链接分类之前的文字或代码。<br>
category_after<br>
字符串型，位于链接分类之后的文字或代码。<br>
class<br>
字符串型，每一个链接的分类都会有一个 “class” 属性（从上面的代码就能看出），默认是：linkcat<br>
category_orderby<br>
字符串型，链接分类的排序方式，按照名词或者ID。<br>
‘name' (默认)<br>
‘id'<br>
category_order<br>
字符串型，链接分类的升降序排列方式：<br>
ASC (默认)<br>
DESC<br>
title_li<br>
字符串型，链接标题的头文字或代码，默认是：Bookmarks，并且它控制连接是否按照列表的方式排列。<br>
title_before 和 title_after<br>
顾名思义，它们就是连接标题头前后的文字或代码，默认是 h2 标签<br>
show_private<br>
布尔型，是否显示私有链接。<br>
include<br>
字符串型，输出指定 ID 的 Blogroll 的分类链接，各个 ID 之间用半角的 “,” 分开。默认显示所有的 Blogroll 分类。<br>
exclude<br>
字符串型，将指定 ID 的 Blogroll 分类链接从整个链接列表中排除，各个 ID 之间用半角的 “,” 分开。默认是什么都不排除。<br>
orderby<br>
字符串型，Blogroll 的排列方式（默认是根据名称排序，除非将这个值留空），即根据我们在 WP 后台链接设置界面下的那些参数来进行排序：<br>
（1）'id'<br>
（2）‘url'<br>
（3）‘name'<br>
（4）‘target'<br>
（5）‘description'<br>
（6）‘owner'<br>
（7）‘rating'<br>
（8）‘updated'<br>
（9）‘rel' – 按设定的关系排列<br>
（10）‘notes'<br>
（11）‘rss'<br>
（12）‘length' – 连接名称的长度设定<br>
（13）‘rand' – 随机排列显示<br>
order<br>
字符串型，设置升降序的排列方式<br>
ASC (默认)<br>
DESC<br>
limit<br>
整型，设置输出链接条数的最大值。默认值是”-1″，输出全部。<br>
between<br>
字符串型，每个连接、图片和描述之间的文字或代码，默认是 “n” 换行。<br>
show_description<br>
布尔型，是否允许显示每个链接的描述。<br>
show_rating<br>
布尔型，是否允许显示链接的等级。<br>
show_updated<br>
布尔型，是否允许显示最近更新后的时间戳。<br>
hide_invisible<br>
布尔型，是否显示所有的链接，甚至是被管理员设为不可见的链接，默认允许显示。</p>
<p>
</p>
<p>
2.添加css美化，以下是个人的css，供大家参考</p>
<div>
<pre>
.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;}
</pre>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<strong>使用jQuery</strong><br>
具体实现步骤分两步：<br>
1.加载jQuery库，可以直接调用google jQuery库</p>
<p>
</p>
<div>
<span><u>复制代码</u></span> 代码如下:</div>
<div id="code2367">
<p>
</p>
<p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></p>
<p>
</p>
</div>
<p>
</p>
<div>
<p>
2.加载jQuery功能代码，注意jQuery闭合</p>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<div>
<pre>
$(".linkpage a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http://[^/]+).*$/, '$1').replace( 'http://', '' )+">");
});
</pre>
</div>
<div>
这段jQuery的意思是遍历所有class为linkpage下所有的a标签，然后对该a标签添加img，其中是“.linkpage”需根据自己的模板更改。</div>
頁:
[1]