Life Studio » Favicon

JQ 完善 WordPress 友链的 Favicon

万戈 — Sun, 21 Feb 2010 08:55:11 +0000

折腾 WordPress 的时候时间过的特别快，而且每次亲自操刀修改主题后都特别有成就感，哈哈。今天延续前两天的折腾，继续拓展 JQuery 库在 WordPress 上的应用。木木是我首要的学习对象，他对 JQuery 的了解与 WordPress 相结合应用已经先我一步，我这两天就泡在他的网站上挖我想要的 JQ 知识。

为了实现友情链接页面中带 favicon 小图标的友情链接，我写过一个用 PHP 实现此效果的教程，代码的原理很好理解，但是因为在 functions.php 中重新定义了 wp_list_bookmarks 函数，所以代码显得非常的冗长，足足有100多行。现在有了 JQuery 库，这就完全不必要了，仅需2、3行 JQ 执行代码即可搞定，而且所要遍历的标签选择更自由，还省了不少 PHP 的查询次数，爽歪歪了。

方法是从木木的《给友情链接添个 Favicon 美化美化》挖来的，简述如下：

1、加载 JQuery 库

这个是所有 JQuery 运行所必须的，你可以调用 google 托管的，也可以下载到自己的主机上调用，可取所需了。

2、载入 JQuery 执行代码

$(".linkpage a").each(function(e){

$(this).prepend("+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");

});

不多说了，懂点点英文的就应该就能大致理解这段代码的意思，最终效果可以看我的友情链接页面，和之前 PHP 实现的效果一模一样，只是方法更简单了而已。JQuery 真伟大，我喜欢。

与

Favicon,jQuery,WordPress,链接

解决 favicon 图标无法被 google 缓存

万戈 — Tue, 26 Jan 2010 12:17:20 +0000

先简单的扫一下盲，什么是 favicon 图标，favicon 就是出现在浏览器地址栏左侧的那个小图标。所谓 favicon，即 Favorites Icon 的缩写，中文名称是网站头像，顾名思义，便使其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。（以上摘自百度百科）

那为什么有些站长在添加 favicon.ico 图标后，为什么还是无法正常显示呢？你可以试试自己的网站能否正常显示且被 google 缓存接受，只要在 http://www.google.com/s2/favicons?domain= 后加入自己的域名就行，比如我的 favicon 图标在 google 中的缓存就是 http://www.google.com/s2/favicons?domain=wange.im，（=后不需要加http://）我总结了一些小经验，欢迎指正。

1、favicon.ico 最好是添加在网站根目录下。

没有什么明文规定 favicon.ico 图标必须放在哪一个目录下，但是实践证明，在网站根目录的 favicon.ico 更有利于正常显示，也方便 google 缓存 favicon。

比如，芒果的网站，在浏览器中可以正常显示 favicon 图标，但是没有被 google 缓存，其原因就是 favicon.ico 没有被放在网站根目录下，而是在主题文件夹的/image/下，看其源码就知道了，google 拐不过这个弯来，所以还是放在根目录比较好。

2、favicon.ico 最好不要超过2kb。

谁也没有规定过 favicon.ico 多大才好，但是仅在半厘米之大的小方块里显示图标，我们实在没有必要将其像素做的太高，那样的话会不利于 google 缓存图标。

比如，盛者无罪的网站，在浏览器中确实可以正常显示，也是放在了网站的根目录下，但是却没有被 google 缓存，显示出了默认的小地球图标，因为该网站的 favicon.ico 有 70K 之巨，建议优化之。

3、favicon.ico 最好是16px*16px。

理论上来说 favicon.ico 可以是16px*16px，或者是32px*32px的，但是即使你把 favicon.ico 做成128px*128px，也是可以在浏览器中显示的，比如商业哲学评论的网站，但是像素太高也就不可避免地违背了上一条建议。再看超人流水账的网站，虽然他的 favicon 图标仅是32px*32px的，却还是没有被 google 成功缓存，所以还是建议 favicon 做成16px*16px就够了，小而精。

4、在网页头部之间添加如下代码：

和前三条一样，这也不是硬性规定，有童鞋就不加。

比如，牧狼羊的网站，同样，在浏览器中其 favicon.ico 是可以显示的，只是 google 无法缓存他的图标，究其原因，估计就是少加了这句代码，建议狼兄还是加上吧。

以上仅是些由个人经验所总结的，没有广泛验证过，欢迎拍砖。

与

Favicon,google,浏览器,缓存

获取 Favicon 服务美化友情链接

万戈 — Wed, 08 Jul 2009 02:14:47 +0000

之前写过一篇《个性化 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 ( $bookmark->link_image != null && $show_images ) {

    if ( strpos($bookmark->link_image, 'http') === 0 )

        $output .= "link_image" $alt $title />";

    else // If it's a relative path

        $output .= " . get_option('siteurl') . "$bookmark->link_image" $alt $title />";

    if ( $show_name )
        $output .= " $name";
} else {
    $output .= $name;
}

替换为：

if ( $show_images ) {

    if ( $bookmark->link_image != null) {

        if ( strpos($bookmark->link_image, 'http') !== false )

            $output .= "link_image" $alt $title />";

        else // If it's a relative path

            $output .= " . 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 .= "";

    }

}

替换完成后将 _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的功能就完成了。

现在，可以通过来生成链接列表了。当然，也可以修改主题的友情链接页面模板文件，找到 wp_list_bookmarks(…)，替换为上述第二个函数，即 my_list_bookmarks。注意，需要在参数中增加一项"show_images=1"。以此模板创建一个页面，就可以看到效果。

最后，可能需要对 CSS 进行一下加工，以保证 img 能显示在对应位置上。

Bronco原创：http://heybronco.net/tech/wordpress/get-favicon-automatically/

与