个性化 Wordpress 友情链接页面

现在的位置: 首页＞Wordpress＞正文

个性化 Wordpress 友情链接页面

发表于：2009年12月01日分类：Wordpress 1条评论

要完成该个性化友链页面需要两步：1、新建页面用函数调用友链。2、给友链加 CSS 美化。下面是分解步骤：

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

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

< ?php
/*
Template Name: Links Page Template PAGE
*/
?>
再找到如下代码：

< ?php the_content(); ?>

修改为：

< ?php wp_list_bookmarks(‘categorize=1&category=XX,YY,ZZ&
category_orderby=id&before=

&after=&show_images=0&
show_description=1&orderby=name&title_before=

&title_after=

‘); ?>

参数解释：

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_temp.php，将其上传到主题文件夹的目录下。最后新建一个页面，并在右侧的页面模块中选择刚刚新建的“Links Page Template PAGE”。

用wp_list_bookmarks()函数调用友链的方法转载自http://zeuscn.net/archives/2008/03/28/easily-create-a-link-page.html

二、给友链加 CSS 美化

在 style.css 中加入以下CSS，当然也可以根据个人喜好自己DIY。

/*———————Links Page———————–*/
#mainlink {
clear: both;
margin: 0 40px;
width: 900px; /* Prevents IE6 miscalculation */
background: #fff;
}
.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;
}
.linkpost {
display:inline;
float:left;
margin:0 20px;
padding:0 5px;
width:920px;
}
#linkcontent {
margin-top:8px;
width:970px;
float:left;
}
写了一大堆，看似复杂，实则简单，因为我已经给出了需要的代码，剩下的事情只需要复制粘贴即可，赶快试试吧。
» 本文链接地址：http://www.life-studio.cn/diy-wordpress-links-page.html