公告:123目录网为广大站长提供免费收录网站服务,我们将免费进行到底,如需快审服务(10元/站)请联系站长QQ,可自助充值发布。

点击这里在线咨询客服
新站提交
  • 网站:315
  • 待审:0
  • 小程序:12
  • 文章:35791
  • 会员:69

 

使用WordPress建网站的学员都知道,我们在网站后台添加友情链接之后,网站前台只能显示文字的链接。今天学建站网介绍一下Wordpress友情链接文字前添加图标效果的实现方法。效果如下图:

方法/步骤

上传一个 16×16 大小的图片,图片名为 favicon.ico ,把图片上传到所用主题的 images 目录下; 在你需要调用友情链接的地方,复制下面的代码就可以啦。
<?php $default_ico = get_template_directory_uri()./images/favicon.ico; $bookmarks = get_bookmarks(title_li=&orderby=rand&categorize=0&category=10); > <?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 为 10下的所有链接,并随机在前台显示。 如果需要设置样式,可以添加以下的 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;}

标签:

下一篇:WordPress调用所有分类目录名、别名(wordpress页面调用分类目录)

上一篇:WordPress如何调用不同分类的图片友情链接(wordpress如何调用api接口)

相关文章

  admin95360564zxm

注册时间:

网站:1 个   小程序:3 个  文章:12 篇

  • 315

    网站

  • 12

    小程序

  • 35791

    文章

  • 69

    会员

赶快注册账号,推广您的网站吧!
最新入驻小程序

数独大挑战2018-06-03

数独一种数学游戏,玩家需要根据9

答题星2018-06-03

您可以通过答题星轻松地创建试卷

全阶人生考试2018-06-03

各种考试题,题库,初中,高中,大学四六

运动步数有氧达人2018-06-03

记录运动步数,积累氧气值。还可偷

每日养生app2018-06-03

每日养生,天天健康

体育训练成绩评定2018-06-03

通用课目体育训练成绩评定