^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

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

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

1.、上传一个 16×16 大小的图片作为还没有设置 favicon.ico 图标的网站默认 ico,把图片上传到所用主题的 images 目录下,这里示例中默 ico 图片是 favicon.ico,图标格式无所谓啦,png、gif、ico 喜欢哪个就选哪个。

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

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>

 

赠人玫瑰,手有余香。