WordPress: 带 favicon.ico 显示的友情链接自定义页面

» 2011-10-15 98条评论

总是有朋友问起,虽然网上搜一下就能找到,不过问多了就觉得有点回答麻烦,干脆写个文章以后可以直接扔文章地址。

我只说步骤,不解析原理,需要了解的朋友可以去我这代码源出处 qiqiboy.com 搜索一下。

> 示例页面:点击

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. 建立一个页面,别名(slug)为 links 即可。

完!

zww
or
oooo

“WordPress: 带 favicon.ico 显示的友情链接自定义页面”有98条评论

  1. 秦天SEO says:

    呵呵,不错,我试试看!

  2. love02xp says:

    学习并用上了,谢啦。。。

    1. zwwooooo says:

      @love02xp
      杯具,你可以试试willin这个

  3. soping says:

    大大的实用,前几天折腾了个没ico的,刚才照着文中折腾了一下,各种错乱,囧~

    1. zwwooooo says:

      @soping
      检查步骤,木有问题的

  4. Dick_Wu says:

    好吧羡慕了你半天原来玩这个就这么简单~~~~

    1. zwwooooo says:

      @Dick_Wu
      这……也不是我会,是qiqiboy这位js帝折腾出的。

  5. w-school says:

    不用插件怎么实现代码高亮显示那?

  6. zee says:

    :evil: 不错 不过暂时用不上 网站基本都是文字连接。

    1. zwwooooo says:

      @zee
      这个功能不是必需品

  7. 奚少 says:

    我很想知道怎么缓存一下 :smile:

    1. zwwooooo says:

      @奚少
      调用google的ico图片缓存,具体搜一下

  8. Junan says:

    :lol: 占位置 收藏~~ :mrgreen:

  9. skun says:

    评论框的邻居是广告。 :smile: :smile: :smile:

    1. zwwooooo says:

      @skun
      嗯,大家都懂的

  10. 花皙蔻 says:

    这个不错,要折腾下!!

    1. zwwooooo says:

      @花皙蔻
      慢慢折腾玩

  11. 爱惜 says:

    我之前弄了N久才弄到的。郁闷的说。

    1. zwwooooo says:

      @爱惜
      折腾就是如此。

  12. 完美一样照抄但就是不显示不知道什么问题

    1. zwwooooo says:

      @yesureadmin
      这~自己检查以喜爱

  13. 考虑弄个这样的页面

  14. icoony says:

    这个不错的~!

  15. 小左 says:

    终于搞定了!

  16. [...] 加入带ICO图标的链接页面,本站的Links页面,具体实现方法请看ZWW的教程:WordPress: 带 favicon.ico 显示的友情链接自定义页面,不过zww同学忘记说了一句,创建页面之前要在page-links.php文件的头部加上模板标识: [...]

  17. 朱定聪 says:

    :razz: 感谢博主,已经弄完了,http://www.congblog.cn/links 但是我想加分类链接,目的就是 主页+内页 链接,可以请教下如何做到吗?

    1. zwwooooo says:

      @朱定聪
      给链接分类,然后参考分类链接函数的参数

  18. 朱定聪 says:

    :razz: 自己baidu了一下,终于弄好了,谢谢博主哦~~
    另外来个友情链接吧:
    网站名称:朱定聪的博客
    网站描述:专注于IT博客,记录、学习、交流、分享生活的点点滴滴朱定聪的个人博客…
    网站地址:http://www.congblog.cn

    1. zwwooooo says:

      @朱定聪
      百度能解决就最好了,不能解决就用google

  19. 一叶 says:

    问一下,我的一加上onerror="javascript:this.src=\'' , $default_ico , '\'" 这一句就出错,页面无法显示了,什么情况?

    1. zwwooooo says:

      @一叶
      注意标点符号别用错了

    2. 一叶 says:

      @zwwooooo
      复制粘贴过去的,我不会PHP。。

    3. zwwooooo says:

      @一叶
      如果你是整段粘帖过去按道理不会出问题,那么多朋友照做都Ok了

    4. 一叶 says:

      @zwwooooo
      额,不是整段复制过去的,只是提取了默认图片那一句,我用的是另外的一段代码,谷歌的缓存显示favicon.ico的,但是无法获取,所以我自己修改了一下改成你这里的形式,一些无法获取的想显示默认图片

    5. zwwooooo says:

      @一叶
      好吧,注意语法。

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote