刚刚写下一篇《个性化Wordpress评论框》,现在再谈谈如何建立一个个性化的 WordPress 的友情链接页面,效果可以见我的友情链接。要完成该个性化友链页面需要两步:1、新建页面用函数调用友链。2、给友链加 CSS 美化。下面是分解步骤:
一、新建页面用函数调用友链
新建一个页面模板,打开所用主题的 page.php 文件,在文件最顶端加上以下声明代码:
/*
Template Name: Links Page Template PAGE
*/
?>
再找到如下代码:
<?php the_content(); ?>
</div><!--/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。
#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;
}
写了一大堆,看似复杂,实则简单,因为我已经给出了需要的代码,剩下的事情只需要复制粘贴即可,赶快试试吧。
- 获取 Favicon 服务美化友情链接2009年07月8日
-
Wordpress 访客信息输入框美化2009年07月7日 -
个性化 Wordpress 侧边栏2009年06月27日 -
个性化 Wordpress 标题 Logo2009年06月26日
Pingback: wordpress笔记之自定义友链页面 | 闻心阁
Pingback: 再次清理友链 - Louis Han Life Log
Pingback: 建立个性化 WordPress 友情链接页面的过程 – 王鹏森的个人网站 - 王鹏森的全拼域名网站(wangpengsen.com)
请问页面模版如何新建?能给我你的qq吗
用了万哥的方法,加了独立的友链页面。多谢啦!
另外我想说明一下,调用函数中是否显示图片,我设置为1,应该不是这个问题。
想请教下,为什么我在链接中设置链接图片地址后,就只显示图片没有链接文字了,反之,若不填图片url就可以显示出文字,为了方便请教,我特意在网站友链页面保留一个不显示的效果,希望得到你的帮助。
按照万戈的方式现在去试试,弄个独立的友情链接页面
请问如何获取友情链接目录及其ID呢?
这个正好需要
搞定了~ 样式DIY了一下,O(∩_∩)O哈哈~
奇怪我的PAGE里没有div class="entry"
?php the_content(); ?
div
这段。
你有QQ吗?想找你帮我改下.
真的搞不懂。太难了。
我来好好研究一下吧,总之目前是没有看到什么效果的。
好像弄不出来,囧
没找到这个 - -
一直想把友情列做成两栏的,可折腾了好久都没成功
Pingback: 美化wordpress友情链接页面 | klant中文网
哎,css我的做不好啊
css这东西就靠练习啦,学起来很快的
你这个表情我还有会哦,好看!!
嘿嘿,学习了!
您好 为什么样式修改了没反应呢 我是直接复制进去的
要根据自己的主题稍加调整的
channel主题 该怎么调整呢
牛呀 ,
已经用上
结合我的主题可能样式还需要再调
不懂的再来请教万戈吧
非常好的效果!
太高明了,赞一个。
不错,试用下
谢谢博主分享.刚去搞了一个友链页面.
lz我发现我吧CSS代码加进去之后没什么反应,加没加一样,不知道怎么回事 bigbengua@163.com
老师可以帮我调试下嘛??342859809@qq.com万分感谢啊
老师,你的CSS是不是有些问题啊??不然怎么回出不来效果呢???
Pingback: WordPress个性化友情链接页面 | Just share free for fun
Pingback: WordPress 友情链接页面全面修缮 / IM路人
我来偷方法了
万戈老师,这个CSS是怎么添加进去的啊?我照葫芦画瓢都没画出来哦~~~这个是我的链接http://qiusuoge.com/link
写的真好!
你好,我按你的方法改了,为什么出不了你那种效果,只是普通列表效果
前輩,我山寨了您的友情鏈接。
http://firefore.com/links
可以嗎?
呵呵,看起来不错呀,这个没有专利权,尽情地山寨吧
小声告诉你:他也是山寨的 哈哈
原来是wp_list_bookmarks这个函数;不过目前链接不多,暂不需要单独一个页面
我的模板自带了,嘿嘿
有这一句
没有这两句怎么办?
代码被过滤了,完全看不到。。。
Pingback: 佈景主題:Simple Chimera 2.0 | Lab Crocodile
博主问下,我做了后,友链是竖着排的,怎么把他高层横着排的!
设定li元素的宽度,然后左浮动
给我举个例子,我是新人不懂,谢谢了!
<?php
/*
Template Name: template
*/
?>
我这个要怎么改呀
我QQ:38683686空帮我在线调一下好吗?
Pingback: 求索阁 » Blog Archive » 个性化Wordpress友情链接页面
Pingback: StartOver
,你现在的友链是这样做出来的吗?友链不在首页会不会让“友”不高兴啊?这个一定要回答啊。
这个教程只是我现在友链页面的其中一步,呵呵
我和每个友链都声明过,我不会在首页加友链,也不交换友链,愿意的可以加我,我也只加自己喜欢的链接,不互换,自愿原则,链接换的到,友情换不到
说的很对 真友情 才真链接
终于有一看了20遍以上文章搞的有点象样了,其他的继续看
建议 博主写个wp主题制作教程 从css+div讲起 很多朋友看见这些代码会犯晕的 呵呵
我还没到教DIV+CSS的水平呢,呵呵,只够自己折腾的能耐
Pingback: 利用wp_list_bookmarks函数+CSS实现友情链接随机显示、分列显示 « 阿邙’S Blog
我用了这个方法,怎么和你网上邻居的效果不一样呢?
我现在的友链页面是我的特别加强版,不是仅这一个教程可以搞定的
能教教我们这些菜鸟啊?
我改天再写一个完整的教程吧
万分感谢
呵呵,其实原理很简单的,关键是在样式
没成功...
试了一下午,都没有成功

因为不会CSS!怎么调试都没用!!做好了,有点错误,还不美观!
能否帮调试一下??谢谢!!
http://www.box.net/shared/0m0uovag8z
这是我的page.php文件!
呃。。。打不开啊
不会吧!我可以打开!
试试这个看看
http://www.dbank.com/download.action?t=40&k=MTM2NDk5MDI=&pcode=LCwxNzM1MTcsMTczNTE3&rnd=7625
要复制了才能打开!!
回复还真快 我已经搞定了 直接在原有的page页面加上了那段代码,效果也出来了。不过我没有分类链接。谢谢万大侠的分享
郁闷了 我就没有在我的page.php文件中找到你说的那段代码 可能是因为主题不同的原因?
每个主题都有所不同,但是原理是一样的
完全被忽悠。。。。修改了不成功。页面显示:
友情链接
Edit this entry.
恩,这篇我是写的比较草率。。。很多人都没看懂。。。
偶也没看懂~~~这阵子忙完了,写个更详细点的啊~
效果图示跟你的“网上邻居”里的一样吗?
恩,对的,就是我现在的网上邻居
很不错,用上了
太好了,终于有人看懂我在说些啥了
找到宝贝了!
呵呵,过奖,你能用上就好
我发现Carrington主题不能那么容易修改 哎
HOHO~我想要挑战一下,有没有兴趣做我的小白鼠呀
怎么做小白鼠?
我来帮你改呀~只是没有把握哦
可以啊,怎么改?
我自己随便改了一下,就成这样了:http://louishan.com/link
还有啊,我用你这个转向代码,为什么会出错呢?
我先吃饭,等会QQ上呼你哈~
你这个我刚好要,有无效果看看?!
偶想建立个页面,在CMS里调用到主页面,不知道你这个效果如何?有无得看看?
效果可以看我的友情链接页面,至今我还是在用这个效果:
http://www.life-studio.cn/link
真不错。
好久没上来逛了。近来忙。但还是坚持一个星期二三篇,555.
兄弟没经过你同意添加你友情链接了。感觉你近来很研究WP啊。
呵呵,谢谢哈~
我对WP比较痴迷,就喜欢这个折腾劲儿
楼主加偶Q有事请才一二。104384312
我弄了个模板确实能显示到一个新页面。但是偶的是横向的。怎么像你一样?
请看我的www.bokit.com/test
是不是样式?
怎么调用?
万戈这小表情能发我套吗?
学习下怎么把友情链接搞成两行
表情我也是从别人那里扒来的,右链另存为就行,整套的我至今还没找到
这是人人网(校内网)的表情哟,我有全套
哈·你的友情链接页面很好 拿回去了。。
谢谢^.^我回去试试。
呵呵,不错。加一个这个页面
可以考虑在链接前面加上对应的favicon,这样效果更好一点~~
这个提意不错,更加个性化了,有空试试
刚去看了你的博客,调用favicon的方法很强大,学习了
呵呵~互相学习~
真漂亮,赞一个
哈哈~用CSS规划了一下看上去专业多啦~
这里的主题 真好看 !! 内容很充实!! 很棒!
客观点好,这个只是你喜欢的样式
万戈真是热情哦,恩,过两天我自己的新主题就来试试这个。。。先打个记号
这段css代码不错哦
还是得再次请教您。。改了一晚上都改不对,我用firebug参照把属性id修改了,但还是不成功,我把原page的代码和我自己修改后的代码发在google在线文档里,希望您能帮我看下。。。
地址http://docs.google.com/View?id=dgsvc63r_36dx6n7wgm
再次感谢。
OK,收到,不过今天要睡觉去了,明天一早帮你改吧,然后我会发到你的邮箱
收到,修改成功,非常感谢您。已经无偿加上您的链接。
http://leo-n.cn/links
另外,把你的CSS也给我一份吧,我对照下
万分感谢,我这就添加上css去。
嗯,学习了,不错哦~
发现万戈这里变成WordPress学堂了,每次来都有收获~
过奖过奖了,只是记录些我的wordpress学习过程,要常来啊
内牛曼面啊,找了好久的东西终于找到了,十分感谢分享!
呵呵,不客气哒,也不必内牛曼画的~
我在本地环境上测试了下,无法调用css。。。显示出来的和不加css是一样的,请问下该怎么解决?
因为你不是在线调试,我看不到你的代码,所以只好猜测一下。
在第一步中,class=entry 和 h3 标签是每个主题各不相同的,所以这要根据你的主题修改一下,如果你照搬我的代码是不行的哟
恩,谢谢你的回答,我待会试试看。
不客气,也谢谢你的支持
友情链接偶是纯手工HTML在主题里增加的,哦哈哈
这也是你减少查询次数的手段吧,小子你真行,不过我太懒,这方法我就不用了
再学一招 戈戈小盆友真是招招领先 哈
界面很美观,学习到了.
请教一下怎么自助添加链接呢?
请看第一步,第一步就是介绍函数自动调用链接
看了效果,不错,哈哈!
我主题买好了
不会吧!帅哥....