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. YIruu says:

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

    1. zwwooooo says:

      @YIruu
      主页的链接不是这里获取的。

  2. 鬼娃娃 says:

    我弄完什么都不显示啊

    1. zwwooooo says:

      @鬼娃娃
      认真检查一下步骤和代码,因为已经很多人照着这篇文章折腾好。

  3. 鬼娃娃 says:

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

    1. zwwooooo says:

      @鬼娃娃
      这个你了解一下链接函数即可。

  4. NONO says:

    哈哈 弄好了

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

  6. 鬼娃娃 says:

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

    1. zwwooooo says:

      @鬼娃娃
      可以,自己改下链接函数参数

  7. 这个功能很别出心裁啊。

  8. 林晨 says:

    值得学习,抽空加入代码,谢谢

  9. Aaron says:

    :razz: 正需要这样的页面。Thanks

  10. bil says:

    为什么wordpress 友情链接分类没有链接 呢???
    技术博客 更多。。。
    主题博客 更多。。。。
    这个一样 更多点击打开链接页面

    1. zwwooooo says:

      @bil 只能自己写调用实现

发表评论

昵称 *

网址

B em del U Link Code Quote