之前写过一篇《个性化 WordPress 友情链接页面》,主要是用 CSS 美化了友情链接页面,如今在这个基础上,我又对友情链接页面进行了改进。效果可以见我的友情链接页面。你可以看到,在每个友情链接之前都有一个对应的 Favicon 小图标,很有个性吧。在公布这个效果的实现方法之前,先要感谢一下Bronco童鞋,是他给我留言建议我使用这个效果,并提供了方法。
基本的设计思想是:获得每个链接的地址,提取出域名部分,提交给 Google,Google 返回的就是一个16×16的 PNG 图片,对于没有被 Google 缓存 Favicon 的网站,会得到一个小地球的图标,就像这样
获取图标的网址为:http://www.google.com/s2/favicons?domain=example.com,将 example.com 换成需要的域名就OK啦~至于获取链接中的域名,可以用正则表达式来实现。
另外,大多数模板对于链接页面的实现都是通过调用WP的系统函数 wp_list_bookmarks 来完成的,而为了完成自动获取 Favicon 需要改动函数。为了保证将来升级 WordPress 本功能依然有效,故将 wp_list_bookmarks 以及相关的 _walk_bookmarks 复制到主题的 function.php 中,作为主题函数来使用。
以 WordPress 2.7.1 为基础进行修改,其他版本请参考修改。
1、打开 wp-include 目录下的 bookmark-template.php 文件,将其中的两个函数复制出来,放到一个新的文件中,原文件关闭,修改在新文件中进行。
2、编辑 _walk_bookmarks 函数,找到第103行,将如下的内容:
if ( strpos($bookmark->link_image, 'http') === 0 )
$output .= "<img src="$bookmark->link_image" $alt $title />";
else // If it's a relative path
$output .= "<img src="" . get_option('siteurl') . "$bookmark->link_image" $alt $title />";
if ( $show_name )
$output .= " $name";
} else {
$output .= $name;
}
替换为:
if ( $bookmark->link_image != null) {
if ( strpos($bookmark->link_image, 'http') !== false )
$output .= "<img src="$bookmark->link_image" $alt $title />";
else // If it's a relative path
$output .= "<img src="" . get_option('siteurl') . "$bookmark->link_image" $alt $title />";
} else {//否则显示网站的Favicon
if (preg_match('/^(https?://)?([^/]+)/i',$the_link,$URI)) {//提取域名
$domains = $URI[2];
}else{//域名提取失败,显示默认小地球
$domains = "example.com";
}
$output .= "<img src="http://www.google.com/s2/favicons?domain=$domains" $alt $title />";
}
}
替换完成后将 _walk_bookmarks 改名,例如 my_bookmarks
3、编辑 wp_list_bookmarks 函数,将其中所有的 "_walk_bookmarks" 替换为新函数 "my_bookmarks"。三次替换,分别在228行、239行和242行左右。
4、将 wp_list_bookmarks 改名,比如 my_list_bookmarks。
5、检查一下代码,确保替换无误并且没有误删任何字符后,将两个函数复制到主题目录下的 function.php 文件中,原来的注释可以删掉。Bronco童鞋还 Email 给我修改好的 function.php(点击下载 1.76K),我就借花献佛拿出来共享下,将 function.php 中的代码复制到主题下 function.php 中即可。这样,自动获取favicon的功能就完成了。
现在,可以通过<?php my_list_bookmarks(show_images=1) ?>来生成链接列表了。当然,也可以修改主题的友情链接页面模板文件,找到 wp_list_bookmarks(…),替换为上述第二个函数,即 my_list_bookmarks。注意,需要在参数中增加一项"show_images=1"。以此模板创建一个页面,就可以看到效果。
最后,可能需要对 CSS 进行一下加工,以保证 img 能显示在对应位置上。
Bronco原创:http://heybronco.net/tech/wordpress/get-favicon-automatically/
-
JQ 完善 Wordpress 友链的 Favicon2010年02月21日 -
个性化 Wordpress 侧边栏2009年06月27日 -
个性化 Wordpress 友情链接页面2009年06月25日 -
Wordpress 自定义顶部图像2011年01月29日
Pingback: 本站links页面更新《获取 Favicon 服务美化友情链接》 – 马龙渊'S Blog马龙渊博客 简单的生活 简单的梦想
我汉~~~~~~
怎么我没有画出水来~~~万戈
帮我看看哟
http://www.malongyuan.com
万戈先生真是神人啊(昨天也在这里解决了调用评论带头像功能),直接下载function.php添加就可以用了。谢谢万戈和Bronco。搜了很多地方,这里最好用(本人没学过计算机语言,这个真方便直接。)
有一小问题,后台添加链接之后出现:
Warning: Cannot modify header information - headers already sent by (output started at /home/bookshit/domains/xzdy.org/public_html/wp-content/themes/D-Z-Theme-Pro_CP/functions.php:210) in /home/bookshit/domains/xzdy.org/public_html/wp-includes/pluggable.php on line 897
不过添加链接是成功的。
天,我折腾不来
呵呵...神奇的东西,它又好了!我很无语,花了一天时间,在万戈大哥这学到很多东西,单方面纯加万戈友链,不敢要求博主加我,因为我那真没什么东西,全是我自己唠叨,有的技术也都是伪技术!这里,必须强烈支持...
谢谢支持呀,呵呵,多多折腾,总会有进步的
崩溃了...弄了一上午了
搞不定 搞不定 站点地图和 友链 都靠右了,郁闷
看看你的标签都闭合了没有?
额...万戈大哥,能否加你Q呢?我对对函数也不是很懂,我现在按照这个方法,直接将你提供下载里的代码全部复制founction最下面,之后站点地图和 友链页面全部都靠左了!其他页面正常!希望能得到你的指教(QQ:327921262)
MSN:mofei_88828@msn.cn
哦哦...我的怎么添加之后 友链和 网站地图页面整体都靠右了呢??
每个主题都不完全一样,需要按照自己的主题对样式略作修改
Pingback: WordPress 友情链接页面全面修缮 / IM路人
Pingback: WordPress建立独立友情链接页面 - BoKeam's Blog
Mark
那个友情链接页确实不错
又开始了?
Pingback: WordPress 主題製作學習筆記:幫你的主題加上「友情連結」頁面並「自動獲取連結Favicon」
现在的友情链接依然在用是吧
为了看懂此文,还需深入学习代码。
我的很简洁啊!
Pingback: 三石映像 » wordpress友情链接显示方式大全
Pingback: 创建友情链接页面并使其随机显示、分列显示 « 阿邙’S Blog
Pingback: 创建友情链接页面并使其随机显示、分列显示 « 阿邙’S Blog
那个地球再好看点就好了!
Pingback: 无折腾,不WP
学习了。。。今天试着做做。。
Pingback: 给友情链接添个 Favicon 美化美化 | 木木木木木
恩 这个实用啊
但是貌似很多朋友看不懂我在写啥,是我写的太粗糙了吧,改天完善下
这个很不错哦
有创意啊,很喜欢这个效果
代码会否有些过长?怕影响速度。
不会的,你看我的友情链接页面就知道了,查询次数最少,是所有页面打开速度最快的
为了炫一点,就算慢一些我也认了
万能的万戈!你好强大哦!
不要迷恋哥,哥只是个传说!
一直想找这个实现方法,嗯,万戈兄弟真是万能…
不过不知道会不会拖慢加载速度?
速度肯定多少有些影响的,但来自谷歌的服务器,慢也不会慢到哪里去,你看我这个页面打开的速度如何?
不过发现我的小图标很可爱,耶耶耶,自我陶醉一下
看看我的留言板去,有改版哟,嘿嘿
难道留言板也有什么好东西?飞过去看看~
效果的话似乎不错,不过又加了1kb的代码了...
我博客好像没有弄图标
<?php get_links('-1', '', '', '', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
我是用这个来调用友链的诶,刚试了下没成功……
有点麻烦的所,支持拿来玩玩~
相当漂亮。。我也折腾下去。。
谢谢,嘿嘿,有人喜欢就是对我最大的鼓舞
沙,发,不喜欢看技术文的过。。。
谁叫俺是粗人,不会写柔美的言情小说,唉,吸引不了小雯子的眼球