You are here: Home » All Categories » » WordPress: 带 favicon.ico 显示的友情链接自定义页面

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

Oct 15th, 2011 10:18 | Leave a comment?(94) Go to comments

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

我只说步骤,不解析原理,需要了解的朋友可以去我这代码源出处 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 即可。

完!

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25533

Filed under

| Tags:

,

Related Posts

Most Popular

94 Comments.

⊕Leave a comment?
  1. 爱惜 爱惜 Namoroka 3.6.17Windows Vista

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

    31楼
  2. yesureadmin yesureadmin Google Chrome 15.0.854.0Windows 7

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

    32楼
  3. 宝宝健康成长 宝宝健康成长 ChromePlus 1.6.3.1Windows XP

    考虑弄个这样的页面

    33楼
  4. icoony icoony Maxthon 3.0Windows 7

    这个不错的~!

    34楼
  5. 小左 小左 Internet Explorer 9.0Windows 7

    终于搞定了!

    35楼
  6. 朱定聪 朱定聪 Google Chrome 14.0.835.202Windows XP

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

    37楼
  7. 朱定聪 朱定聪 Google Chrome 14.0.835.202Windows XP

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

    38楼
  8. 一叶 一叶 Google Chrome 20.0.1123.4Windows 7

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

    39楼
    • zwwooooo zwwooooo Firefox 12.0Windows 7 x64 Edition

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

    • 一叶 一叶 Google Chrome 20.0.1123.4Windows 7

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

    • zwwooooo zwwooooo Firefox 12.0Windows 7 x64 Edition

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

    • 一叶 一叶 Google Chrome 20.0.1123.4Windows 7

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

    • zwwooooo zwwooooo Firefox 12.0Windows 7 x64 Edition

      @一叶
      好吧,注意语法。

  9. YIruu YIruu Google Chrome 20.0.1132.57Windows XP

    博主你好,问下我的this.src获取的是links页面的链接而不是主页的链接是怎么回事呢?

    41楼
  10. 鬼娃娃 鬼娃娃 TheWorld BrowserWindows 7 x64 Edition

    我弄完什么都不显示啊

    42楼
  11. 鬼娃娃 鬼娃娃 TheWorld BrowserWindows 7 x64 Edition

    现在可以了,但是我不会像你这样分三类,我所有的都连在一个业内链接了?怎么回事?

    43楼
  12. NONO NONO Google Chrome 22.0.1229.94Windows 7

    哈哈 弄好了

    44楼
  13. 鬼娃娃 鬼娃娃 Google Chrome 24.0.1290.1Windows 7 x64 Edition

    你这个是全部显示在同一个页面上,可以分类不同的显示在同一个页面吗??

    46楼
  14. 安心博客 安心博客 Firefox 20.0Windows 7

    这个功能很别出心裁啊。

    47楼

Leave a Reply


Welcome! o(∩_∩)o
X