个性化 WordPress 友情链接页面

刚刚写下一篇《个性化Wordpress评论框》,现在再谈谈如何建立一个个性化的 WordPress 的友情链接页面,效果可以见我的友情链接。要完成该个性化友链页面需要两步:1、新建页面用函数调用友链。2、给友链加 CSS 美化。下面是分解步骤:

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

新建一个页面模板,打开所用主题的 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 -->

参数解释:

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;
}

写了一大堆,看似复杂,实则简单,因为我已经给出了需要的代码,剩下的事情只需要复制粘贴即可,赶快试试吧。

  1. Pingback: wordpress笔记之自定义友链页面 | 闻心阁

  2. Pingback: 再次清理友链 - Louis Han Life Log

  3. Pingback: 建立个性化 WordPress 友情链接页面的过程 – 王鹏森的个人网站 - 王鹏森的全拼域名网站(wangpengsen.com)

  4. 想请教下,为什么我在链接中设置链接图片地址后,就只显示图片没有链接文字了,反之,若不填图片url就可以显示出文字,为了方便请教,我特意在网站友链页面保留一个不显示的效果,希望得到你的帮助。 :roll:

  5. Pingback: 美化wordpress友情链接页面 | klant中文网

  6. Pingback: WordPress个性化友情链接页面 | Just share free for fun

  7. Pingback: WordPress 友情链接页面全面修缮 / IM路人

  8. Pingback: 佈景主題:Simple Chimera 2.0 | Lab Crocodile

  9. Pingback: 求索阁 » Blog Archive » 个性化Wordpress友情链接页面

  10. Pingback: StartOver

    • 这个教程只是我现在友链页面的其中一步,呵呵
      我和每个友链都声明过,我不会在首页加友链,也不交换友链,愿意的可以加我,我也只加自己喜欢的链接,不互换,自愿原则,链接换的到,友情换不到

  11. Pingback: 利用wp_list_bookmarks函数+CSS实现友情链接随机显示、分列显示 « 阿邙’S Blog

  12. 回复还真快 我已经搞定了 直接在原有的page页面加上了那段代码,效果也出来了。不过我没有分类链接。谢谢万大侠的分享

  13. 你这个我刚好要,有无效果看看?!
    偶想建立个页面,在CMS里调用到主页面,不知道你这个效果如何?有无得看看?

  14. 还是得再次请教您。。改了一晚上都改不对,我用firebug参照把属性id修改了,但还是不成功,我把原page的代码和我自己修改后的代码发在google在线文档里,希望您能帮我看下。。。
    地址http://docs.google.com/View?id=dgsvc63r_36dx6n7wgm

    再次感谢。