Old

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

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

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

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

98 comments

  1. 林木木 林木木 Firefox 7 Firefox 7 Windows 7 Windows 7

    杀勒个发 —_—!

    沙发
  2. 林木木 林木木 Firefox 7 Firefox 7 Windows 7 Windows 7

    恩,这个方法不错~

    板凳
  3. A.shun A.shun Opera Next 12 Opera Next 12 Windows XP Windows XP

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

    地板
  4. ......
  5. YIruu YIruu Google Chrome 20 Google Chrome 20 Windows XP Windows XP

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

    41楼
  6. 鬼娃娃 鬼娃娃 TheWorld Browser TheWorld Browser Windows 7 Windows 7

    我弄完什么都不显示啊

    42楼
    • zwwooooo zwwooooo Firefox 15 Firefox 15 Windows 7 Windows 7

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

  7. 鬼娃娃 鬼娃娃 TheWorld Browser TheWorld Browser Windows 7 Windows 7

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

    43楼
  8. NONO NONO Google Chrome 22 Google Chrome 22 Windows 7 Windows 7

    哈哈 弄好了

    44楼
  9. 鬼娃娃 鬼娃娃 Google Chrome 24 Google Chrome 24 Windows 7 Windows 7

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

    46楼
  10. 安心博客 安心博客 Firefox 20 Firefox 20 Windows 7 Windows 7

    这个功能很别出心裁啊。

    47楼
  11. 林晨 林晨 Google Chrome 21 Google Chrome 21 Windows 8.1 Windows 8.1

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

    48楼
  12. Aaron Aaron Google Chrome 30 Google Chrome 30 Windows 7 Windows 7

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

    49楼
  13. bil bil Google Chrome 45 Google Chrome 45 Windows 7 Windows 7

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

    50楼

Leave a Reply