为 WordPress 博客添加带favicon的自定义友情链接页面

62

很多朋友总是问周良,我的友情链接页面上的ICO图标是怎么显示的,周良就会把图片地址告诉他,http://www.google.com/s2/favicons?domain=网站地址。今天抽空写一下具体的教程,希望对大家有用。

演示请看:https://www.aips.me/links

1.上传一个 16×16 大小的图片作为木有 favicon.ico 的网站默认 ico,把图片上传到所用主题的 images 目录下,这里示例中默认 ico 图片是 links_default.gif

2.复制一份你主题的 page.php,改名为 page-links.php

3.在 page-links.php 找到文章内容输出函数 <?php the_content(); ?>,在其下面加入下面的代码,注意看代码注释:

< div class = ”page - links” ><h3 >页内链接</h3>
<ul>
<?php
$default_ico = get_template_directory_uri().’/images/links_default.gif’; //默认 ico 图片位置
$bookmarks = get_bookmarks(‘title_li = &orderby = rand’); //全部链接随机输出
//如果你要输出某个链接分类的链接,更改一下get_bookmarks参数即可
//如要输出链接分类ID为5的链接 title_li=&categorize=0&category=5&orderby=rand
if (!empty($bookmarks)) {
    foreach($bookmarks as $bookmark) {
        echo‘ < li > <img src = ”‘,
        $bookmark - >link_url,
        ‘/favicon.ico”onerror = ”javascript: this.src = \’’,
        $default_ico,
        ‘\’” / ><a href = ”‘,
        $bookmark->link_url,
        ‘“title = ”‘,
        $bookmark->link_description,
        ‘“target = ”_blank”> ’,
        $bookmark->link_name,
        ‘ </a></li> ’;
    }
}?></ul>
</div >

4.为了好看点,你可以给 page-links 这个class定义一下样式,下面是我的主题所用样式,可以参考一下:

.page-links{overflow:hidden;margin:0 0 24px;padding:0;}
.page-links h3{border-bottom:1px solid #bfbebe;text-align:center;margin:0;}
.page-links ul{margin:0;padding:5px 0 0 0;}
.page-links ul li{float:left;width:150px;line-height:16px;height:16px;margin:5px 5px 0;padding:0;list-style-type:none;}
.page-links ul li:hover{background:#f2f2f2;}
.page-links ul li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

5.建立一个页面,使用links为页面模板即可。

注:ICO图标最好上传到网站更目录,这样便于谷歌收入。在Opera下ICO图标也最好上传到网站更目录,本
站友情链接页面使用的是谷歌自带的ICO图标,在文章开头已经给出地址。
如果您想了解关于本文代码的原理,可以阅读 这篇文章

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 62 条评论

  1.  ̄ ̄纯 属 シ 胡 闹‮ 回复

    不知道是不是主题不同的原因,就是弄不成...呃...

    1. 周良 回复

      慢慢来吧

      1. 夜灵 回复

        弄出来了,但效果和你的不一样呃..你来看看

        1. 周良 回复

          我现在主题的效果是我自己重新弄过了

  2. 鸟先生 回复

    能否把你现在的友情链接样式发我一下啊。。

    1. 周良 (文章作者) 回复

      直接在我的CSS样式里面找吧。我都忘了我用什么样式了

  3. 鸟先生 回复

    能否把你现在的友情链接样式发我一下啊。。

    1. 周良 (文章作者) 回复

      直接在我的CSS样式里面找吧。我都忘了我用什么样式了

  4. 雨林亭 回复

    重新弄过的效果能不能给一下CSS

  5. 雨林亭 回复

    重新弄过的效果能不能给一下CSS [悲伤]

  6. UCGG 回复

    失效了....我也在找替代的办法.如果直接调通友链根目录/favicon.ico 感觉这样做不好...

    1. 周良 (文章作者) 回复

      我自己的博客还没有失效,可以使用

      1. UCGG 回复

        今天貌似又可以了..谷歌的不科學,貌似Bing 也有这样的服务.

        1. 周良 (文章作者) 回复

          你可以试试,bing我不太清楚

  7. UCGG 回复

    失效了....我也在找替代的办法.如果直接调通友链根目录/favicon.ico 感觉这样做不好...

    1. 周良 (文章作者) 回复

      我自己的博客还没有失效,可以使用

      1. UCGG 回复

        今天貌似又可以了..谷歌的不科學,貌似Bing 也有这样的服务.

        1. 周良 (文章作者) 回复

          你可以试试,bing我不太清楚

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

返回顶部