^ Back to top

给WordPress友情链接添加图标,并在新窗口打开友情链接

注意到陌小雨下面的友情链接了么,前面有个美美的图标,五彩冰粉的,这些都是博友的favicon图标呢?是不是觉得很高大上,今天就分享如何给WordPress友情链接添加favicon图标。效果图:
给WordPress友情链接添加favicon图标,并在新窗口打开友情链接

1.、上传一个 16×16 大小的图片作为还没有设置favicon.ico图标的网站默认ico,把图片上传到所用主题的 images 目录下,这里示例中默 ico 图片是 favicon.ico,图标格式无所谓啦,png、gif、ico喜欢哪个就选哪个。如果暂时没有好的favicon.ico图标,那就前往这个页面,http://www.dedewp.com/flinks,这么多金灿灿的图标,看中哪个直接按住图标拖动到新窗口保存到本地上传吧!

2.、在你需要调用友情链接的地方,复制下面的代码就可以啦

<ul>
 <?php
 $default_ico = get_template_directory_uri().'/images/favicon.ico'; 
 $bookmarks = get_bookmarks('title_li=&orderby=rand&categorize=0&category=57'); 
 >
 <?php if(!empty($bookmarks)): >
 <?php foreach ($bookmarks as $bookmark): > 
 <li>
 <img src="<?php echo $bookmark->link_url >/favicon.ico" alt="<?php echo $bookmark->link_name >" onerror="javascript:this.src='<?php echo $default_ico; ?>'">
 <a href="<?php echo $bookmark->link_url >"><?php echo $bookmark->link_name ></a>
 </li>
 <?php endforeach >
 <?php endif ;>
 </ul>

代码解释:第四行调用的是连接分类目录id为57下的所有链接,并随机在前台显示,因为陌小雨的淘宝客网站大全收录了很多网站,所以友情链接也建立了好多好多个分类目录呢。

3、分享陌小雨正在使用的css样式:

.item li{display:inline-block;width:30%;height: 26px;;white-space:nowrap;*display:inline;*zoom:1}
.item a:hover{color:#ff8502;text-decoration:none}
.item li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

上面的.item为第一个步骤的父容器,如果不明白是啥意思,就跟着陌小雨学学xhtml+css的基础课程吧!

4、布置完你会发现,这些链接都是在当前窗口打开的,很不友好,那么如何在新窗口打开这些链接呢?

我们只需要在第1个步骤第10行做一点小小的修改就好啦!修改为下面的:

 <a target="_blank" href="<?php echo $bookmark->link_url >"><?php echo $bookmark->link_name ></a>

2017-8-17日更新

如果不喜欢设置默认的图标,可以调用外部的api,将第二步的代码修改为:

<ul>
 <?php
 $bookmarks = get_bookmarks('title_li=&orderby=rand&categorize=0&category=57'); 
 >
 <?php if(!empty($bookmarks)): >
 <?php foreach ($bookmarks as $bookmark): >
 
 <li>
 <img src="<?php echo $bookmark->link_url >/favicon.ico" alt="<?php echo $bookmark->link_name >" onerror="javascript:this.src='https://api.byi.pw/favicon/url=<?php echo $bookmark->link_url; ?>'">
 <a target="_blank" href="<?php echo $bookmark->link_url >"><?php echo $bookmark->link_name ></a>
 </li>
 <?php endforeach >
 <?php endif ;>
 </ul>

 

陌陌评论 17

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. gadgething
    方法不错,可以试试。回复
  2. 阿里书籍
    很好的方法喃回复
  3. 源码集中营
    :grin: 方法不错,学习了!回复
  4. boke123导航
    有图标的友链看起来更加高大上回复
12

站内搜索

其他人正在搜