很多时候，很长时间以后，我们找了很多友链。但是这些友链并不是要全部放到首页侧边栏友链处，或者有些人根本就将所有链接都放到内页。于是，为了简便，做一个链接页面模板（links.php）是个不二选择。
很多人，很多WordPress主题都这样做了。通过WordPress的调用函数可以自动添加删除友链。很方便。
但是，有些人的链接页面就是一堆，一个接一个，密密麻麻；有的稍好，还分分类。如下面：
我之前也是这么做的，简单的分分类，然后css中给每个a链接前面加个小网络图标。其实这么做完全可以了。但是，前几天我在某位博友那里看到他的友链展示页面，前面的图标不全是小网络图标，有些则是那个博客的favicon地址栏图标。看起来非常不错。今天突然想到，我是不是也可以改造一下自己的友链页面。
虽然WordPress后台有给每个链接添加图片的设置，通过函数可以调用，但是那得手动一个一个添加图片，这么一来还不如搞个静态的页面。现在都讲究自动化，这个当然也要。我没有与之前看到的那位博主交流，今天一时也记不得那次是在哪位博主那里看到的了，不知道他是如何实现的，是用强大的jQuery还是自己写的JavaScript亦或者是其他方法。我是钟情于使用jQuery的，因为提供的强大的选择器功能可以很方便地的选择页面需要的元素。开初步实现了了给每个有favicon的博客链接添加其favicon图标，但在要去掉有favicon图标的链接前的小地球网络图标时，我忽然想到，其实没必要这么麻烦。于是，诞生了这么个简单的方法（以下不是教程，是我自己所用主题修改的一个思路。实现方法请看文章结尾）：
我的链接模板（inove）处代码如下：
<div class="links">
<ul>
<?php
$bookmarks = get_bookmarks(回调参数);
if ( !empty($bookmarks) ) {
foreach ($bookmarks as $bookmark) {
echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" >' . $bookmark->link_name . '</a></li>';
}
}
?>
</ul>
<div class="fixed"></div>
</div>
PS：这段代码并不十分好，中间又传递了参数，将链接单独提取出来了，不过这样一来倒是正好方便我以下的修改了。而大多数人的用的比较简洁的代码是
<?php wp_list_bookmarks(回调参数); ?>
参数参考wp手册。如果你是这样的调用函数，下面我说的插入的代码则要加入到回调参数中了。
css中样式中对a链接处样式：
.links{}
.links ul{}
.liks li{}
.linkcat li a{
background:url(img/links.gif) no-repeat;
padding-left:22px;
height:16px;
line-height:16px;
display:block;
}
我可以直接在上面绿色的<li>标签后面加上一个img——<img width="16px";height="16px"; src="’ . $bookmark->link_url . ‘/favicon.ico" />，即绿色字体代码变为：
<li><img width="16px";height="16px"; src="' . $bookmark->link_url . '/favicon.ico" /><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" >' . $bookmark->link_name . '</a></li>
这样，如果有地址栏图标的博客地址就会出现favicon图标了。但是，原先的地球图标依然存在，我们要想办法将其隐藏掉。这里可以用JavaScript，但是，css也可以做到。那么，css中如何修改呢？
我们可以用这个favicon图标覆盖掉原先的，并设置图标背景颜色与网页颜色一致。
css中对这个favicon图标的样式设定（根据自己具体情况自定义设置，这里是举例）：
.post .content .linkcat li img { //选择img图标元素
float:left;
background:背景颜色;
margin:X X;
}
这样，我们就可以通过覆盖来隐藏掉那个小地球图标。最后，看看我自己的效果吧，也可点击本站导航“links”页面：
很不幸，但我做完这一切的时候，发现只在Firefox3.6下测试通过，IE下favicon图标浮动在地球网络图标下方，opera和chrome下获取失败的图标显示XX。最终，这使我明白，各个浏览器对于获取图片失败的不同处理方式。
——————————————————————分割线——————————————————————
呵呵，讲了这么多，最后居然只能在火狐下实现。其实我也是在说了以上那么多话以后才发现这个兼容性错误的。怎么办，重新来过？于是我想换个思路，使无法获取图标的时候能获取一个默认图标。我于是查资料，发现有两个方法可以解决：
- 图片地址用http://www.google.com/s2/favicons?domain=博客地址，这个可行，但是我发现取得的默认图标是有白色背景的，我不想为了这个方法而去修改页面颜色。
- 利用img的onerror属性，定义获取图片失败后的默认图片。如下： <img width="16px";height="16px"; src="’ . $bookmark->link_url . ‘/favicon.ico" onerror=”javascript:this.src=\’files/links.gif\’” />
很重要的一点，onerror后面双引号里面那个JavaScript脚本，单引号前面必须加上转义符“\”,因为这段img代码是在php中用“echo()”输出的。不加转义符会出问题，但是我对php只是初步了解，实在看不出和哪里冲突了，难道是因为多了个等号？
其实我一开始就思考岔路了，把一个简单问题复杂化了。甚至一度想用JavaScript去实现。另外我也被之前加入的那个默认网络图标给迷惑了，一直在想如何能在有favicon图标的时候隐藏它，没有favicon的时候则显示它。而其实直接去掉它，弄张默认图片就行了。
如此一来，实现就很容易了，直接诶将以上代码写在要显示的地方即可。甚至css也不用写了。对，只需这一句代码。
——————————————————————分割线——————————————————————
最后，提醒一点啊，这里我是通过“http://博客地址/favicon.ico”来获取那个地址栏图标的，也就是说只有你的favicon图标放在博客根目录下才可以获取。而我们一般也是推荐这个地址栏图标用ico格式，命名为“favicon”并放置于根目录。虽然gif，png格式也可以，但是对于ie就会出现问题。
补充：上面很乱，有人抱怨看不懂。总结一下，就是上面那些完全都不必看，那是我自己摸索的思路。想要添加favicon图标，只需在每个li标签中添加<img width="16px";height="16px"; src="链接地址/favicon.ico" onerror=”javascript:this.src=\’默认图片\’” /> 即可。
另外，大家也都看到了，我的友链较少，也欢迎各位认真经营自己博客的博主来与我交换链接。
补充：本来我是准备每周更新两到三篇日志的，但是突然发现马上明天就是12月份了。所以趁着今天周末，昨天和今天各更新了一篇。以后能不能及时更新也说不准。时间，真的不多了。。。
