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. 林木木 林木木 2011-10-15 10:50 # Firefox 7.0.1Windows 7

    杀勒个发 —_—！

    Reply | Quote
    沙发！软软很舒服！1
  2. 林木木 林木木 2011-10-15 10:51 # Firefox 7.0.1Windows 7

    恩，这个方法不错～

    Reply | Quote
    板凳！有点硬！2
  3. A.shun A.shun 2011-10-15 10:52 # Opera Next 12.00Windows XP

    前排，既然是现成的，那我也要加上（懒啊- -

    Reply | Quote
    地板！又硬又冷！3
  4. 无冷 无冷 2011-10-15 11:54 # Google Chrome 13.0.782.220Windows XP

    这个就全部都是一样的图标了 :smile:

    Reply | Quote
    4楼
  5. Demon Demon 2011-10-15 13:13 # Google Chrome 14.0.835.202Windows 7

    听说这个样影响速度么。

    Reply | Quote
    5楼
  6. 有点蓝 有点蓝 2011-10-15 13:36 # Opera 12.00Windows XP

    盼星星盼月亮我终于盼到了Z大的技术文 :mrgreen:

    Reply | Quote
    6楼
  7. 有点蓝 有点蓝 2011-10-15 13:52 # Opera 12.00Windows XP

    你更改了固定链接模式？

    Reply | Quote
    7楼
  8. phoetry phoetry 2011-10-15 14:06 # Opera 10.10Windows 7

    所以还是用谷歌的favicon缓存比较好, 省去onerror的判断, 而且经过处理可以做到完全前端输出, 后台反正越省事越好.

    Reply | Quote
    8楼
  9. hzlzh hzlzh 2011-10-15 14:58 # Google Chrome 12.0.742.112Windows 7

    很早就用上了，我直接用的原始default图标，用缓存好点

    Reply | Quote
    9楼
  10. yesureadmin yesureadmin 2011-10-15 15:01 # Google Chrome 15.0.854.0Windows 7

    整上是漂亮些

    Reply | Quote
    10楼
  11. 郎中中 郎中中 2011-10-15 19:39 # Google Chrome 14.0.835.202Windows 7

    世界上本没有问题，问的人多了，也就有了问题

    Reply | Quote
    11楼
  12. 寂静 寂静 2011-10-15 20:09 # Google Chrome 14.0.835.187Windows XP

    其实这个效果还不错，但还是不弄了 :smile:

    Reply | Quote
    12楼
  13. 郑永 郑永 2011-10-15 21:46 # Firefox 6.0.2Windows 7

    不错，呵呵。以后用得到。

    Reply | Quote
    13楼
  14. 阅微博客 阅微博客 2011-10-15 22:16 # Google Chrome 14.0.835.202Windows 7

    wp_list_bookmarks 的show_images 参数不能输出后台添加的链接图像吗？

    Reply | Quote
    14楼
  15. wmtimes wmtimes 2011-10-15 22:35 # Google Chrome 14.0.835.202Windows 7

    大步要改链接了？那可记得一定要把我加上哦。
    ico我的一开始就加上了的。

    Reply | Quote
    15楼
  16. 闲来无事瞎扯蛋 闲来无事瞎扯蛋 2011-10-15 23:05 # Internet Explorer 9.0Windows 7

    学习了......

    Reply | Quote
    16楼
  17. Kars Kars 2011-10-15 23:33 # Firefox 7.0.1Windows XP 
    echo '<li><img src="', $bookmark->link_url , '/favicon.ico" onerror

    favicon.ico 前方的反斜杠应该去掉、、因为输出的链接已经带反斜杠了、、

    echo '<li><img src="', $bookmark->link_url , 'favicon.ico" onerror
    Reply | Quote
    17楼
  18. powerson powerson 2011-10-16 16:55 # Google Chrome 14.0.835.163Windows XP

    我回去试试，好像好复杂啊 :sad:

    Reply | Quote
    18楼
  19. 软件风暴 软件风暴 2011-10-16 18:30 # Pale Moon 7.0.1Windows 7

    又是一个技术文章 哈哈 我老来翻你的老帖子

    Reply | Quote
    19楼
  20. 皇家元林 皇家元林 2011-10-16 21:21 # Firefox 7.0.1Windows 7

    这个不错哦，上次遇到过一个用google那个连接，经常无法显示。你这个如果ico图标不在根目录不就显示默认了吗

    Reply | Quote
    20楼
  21. 秦天SEO 秦天SEO 2011-10-17 09:19 # Google Chrome 14.0.835.202Windows XP

    呵呵，不错，我试试看！

    Reply | Quote
    21楼
  22. love02xp love02xp 2011-10-17 10:30 # Maxthon 3.0Windows 7

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

    Reply | Quote
    22楼
  23. soping soping 2011-10-17 14:19 # Firefox 7.0.1Windows 7

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

    Reply | Quote
    23楼
  24. Dick_Wu Dick_Wu 2011-10-17 18:45 # Google Chrome 16.0.904.0Windows XP

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

    Reply | Quote
    24楼
  25. w-school w-school 2011-10-17 23:08 # Firefox 7.0Windows 7 x64 Edition

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

    Reply | Quote
    25楼
  26. zee zee 2011-10-19 21:02 # Internet Explorer 8.0Windows XP

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

    Reply | Quote
    26楼
  27. 奚少 奚少 2011-10-19 22:46 # Firefox 7.0.1Windows 7

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

    Reply | Quote
    27楼
  28. Junan Junan 2011-10-20 00:40 # Google Chrome 14.0.835.186Windows XP

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

    Reply | Quote
    28楼
  29. skun skun 2011-10-20 13:42 # Google Chrome 10.0.648.205Windows XP

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

    Reply | Quote
    29楼
  30. 花皙蔻 花皙蔻 2011-10-22 10:58 # TheWorld BrowserWindows XP

    这个不错，要折腾下！！

    Reply | Quote
    30楼

Leave a Reply


B em del U Link Code Quote

Welcome! o(∩_∩)o
X