首先来说新建一个友情链接的页面,一开始觉得很多网站这样蛮好的,因为出来可以放链接之外还可以放些自己的收藏。但是可惜的是wordpress做起来还蛮麻烦的,要做模板。幸亏这些东西网上很多,直接copy过来也ok。可惜的是我的主题有点特别,然后试了好多次才弄好的。 :veryangry: :heart:

一、新建页面用函数调用友链

新建一个页面模板,打开所用主题的 page.php 文件,在文件最顶端加上以下声明代码:

<?php
/*
Template Name: Links Page Template PAGE
*/
?>

再找到如下代码:

<div class="entry">
<?php the_content(); ?>
</div><!--/entry -->

修改为:

<div class="entry">
<?php wp_list_bookmarks('categorize=1&category=XX,YY,ZZ&
category_orderby=id&before=<li>&after=</li>&show_images=0&
show_description=1&orderby=name&title_before=<h3>&title_after=</h3>'); ?>
</div><!--/entry -->

对于我的主题,因为加上category=XX,YY,ZZ后总是显示不出来,估计是没把XX,YY,ZZ换成ID的缘故

<div  class="linkpage">
<ul><?php wp_list_bookmarks('categorize=1&category_orderby=id&before=<li>&after=</li>&show_images=0&show_description=0&orderby=name&title_before=<h3>&title_after=</h3>'); ?></ul>
</div>

参数解释:

categorize=1 — 显示所有 Blogroll 的分类;
category=XX,YY,ZZ — 指定显示 ID 为 XX YY ZZ 的 Blogroll 分类,如果您的 Blogroll 没有一个总的大分类话,这个参数可以去掉,因为上一个参数已经指定了显示所有分类;
category_orderby=id — 分类按照 ID 号进行排列,假如 XX>ZZ>YY 那么最终显示的顺序就是:XX 分类下的链接、ZZ 分类下的链接、YY 分类下的链接;
before 和 after — 每个连接前后都用 li 标签套起来;
show_images=0 — 不显示链接的图片;
show_description=1 — 显示连接的描述;
orderby=name — Blogroll 的链接根据其名称排序;
title_before 和 title_after — 分类标题前后用 h3 标签套起来(这个因站而异)。修改好代码之后将该文件另存为一个 php 文件,比如:link.php,将其上传到主题文件夹的目录下。最后新建一个页面,并在右侧的页面模块中选择刚刚新建的“Links Page Template PAGE”。

二、给友链加 CSS 美化

在 style.css 中加入以下CSS,当然也可以根据个人喜好自己DIY。这里是copy万戈的

.linkpage ul {padding: 5px 6px;list-style-type: none;overflow:auto}
* html .linkpage ul{ height:1%;}
.linkpage ul li {color: #333;margin-bottom: 5px;font-size: 12px;}
.linkpage ul li ul li {float: left;width: 141px;text-align: center;margin: 3px 3px;line-height: 180%;background-color: #FFFFFF;border: 1px solid #dadada;}
.linkpage ul li ul li a {color: gray;display: block;}
.linkpage ul li ul li a:hover {background-color: gray;color: #FFFFFF;font-weight:bold;}

要注意的是这里的linkpage就是你上面对应的定义的div的名称。这样对应了才ok

三、JQ 完善 WordPress 友链的 Favicon

效果就是为了实现为了友情链接页面中带 favicon 小图标的友情链接,图标调用的是Google的,有些小朋友或者童鞋,就一个蓝色的小球球,杯具……是GG的服务器上没有你站点的缓存,我也米办法。

方法如下:

1、加载 JQuery 库这个是所有 JQuery 运行所必须的,你可以调用 google 托管的,也可以下载到自己的主机上调用,可取所需了。

2、载入 JQuery 执行代码

$(".linkpage a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
});
所以如果你想放到一个单独的地方的话就可以
<script type="text/javascript">
jQuery(document).ready(function($){
$(".linkpage a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=float:left;padding:5px;>");
});
});
</script>
就可以了。这里还要说的一下就是这里的linkpage也是要和上面的对应的定义的div对应的。