^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望可以帮到你
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

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

阿里云服务器9.9

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

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

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>

 

让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来
小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. gadgething
    方法不错,可以试试。
  2. 阿里书籍
    很好的方法喃
  3. 源码集中营
    :grin: 方法不错,学习了!
  4. boke123导航
    有图标的友链看起来更加高大上
  5. 同盟源
    现在好多淘宝客的说
    • 陌小雨网站管理员
      @同盟源 你有没有在做,有没有兴趣一起做,O(∩_∩)O~
  6. Alick.Li
    很不错~~~~~~~~ :oops:
  7. 陌小雨网站管理员
    我这个是wp的 :oops:
  8. 电影王国
    哪天试试 :wink:
  9. 崔小可
    :mrgreen: 这个值得我拥有!
  10. 中国博客排行榜
    您好!我是中国博客排行榜(http://www.cnbokes.com/)的站长,欢迎您来贵站提交您的博客,我们会给予收录,谢谢。
  11. Han
    看来我该好好美化下我的favicon.ico了 :evil:
    • 陌小雨网站管理员
      @Han 是的,就你的最戳 :grin:

登录

忘记密码 ?

切换登录

注册