零基础学做网站培训介绍

当前位置:

WordPress友情链接文字前添加图标效果

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

Wordpress友情链接文字前添加图标效果

方法/步骤

  1. 上传一个 16×16 大小的图片,图片名为 favicon.ico ,把图片上传到所用主题的 images 目录下;
  2. 在你需要调用友情链接的地方,复制下面的代码就可以啦。
    
    
    <ul>
    <?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>
  3. 代码解释:第四行调用的是连接分类目录 id 为 10下的所有链接,并随机在前台显示。
  4. 如果需要设置样式,可以添加以下的 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淘客模板 图文教程 (17922 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发,自己比较喜欢。注意:此模板不支持IE6,
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • Wordpress 如何开启伪静态 视频教程 (1114395 次浏览)
    做网站制作好之后,如果网站做SEO优化时,需要进行伪静态的设置,同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpre
  • wordpress友情链接插件 图文教程附件下载 (111215 次浏览)
    wordpress友情链接插件介绍WordPress官方从WordPress 3.5版本之后,把友情链接功能从核心从核心功能中删除了,这给升级的用户造成了困扰,在WordPre
  • 学做网站论坛友情链接申请要求:1.网站权重大于1,建站时间达到一年以上,即可申请本论坛友情链接2.和建站方面相关的网站、博客、门户等都
  • 什么是友情链接交易平台网站友情链接是网站SEO优化中,经常用到的站外优化方法之一。通过交换友情链接可以提升双方网站的权重。(相关问题:怎么做
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • HTML文字倾斜标签是什么 (120617 次浏览)
    HTML文字倾斜标签是什么?我们在做网站时,有的文字需要倾斜显示,这时就需要使用HTML文字倾斜标签了。HTML斜体标签:HTML 斜体标签元素知识与
  • 在制作网页中我们时常会将一些文字、图片等做成超链接,但如果在制作时,某些链接页面还没有做好,这时我们就可以用的空链接,提醒自己哪些地方需要添
  • 网页如何添加背景音乐 视频教程附件下载 (1109610 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 网页如何添加视频动画 视频教程 (1100876 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 网站favicon图标如何制作 图文教程 (110637 次浏览)
    在我们上网的时候,看到有许多网站,当打开它的时候,在浏览器中会出现它们网站的图标,特别的个性化。很多学做网站的学员也问过这样的问题,询问网站f
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。
  • 在使用WP程序做网站时,登录网站后台时,程序会自动调用程序的默认图标,对于不想让别人知道自己网站程序的学建站学员来说,就需要将这个图标替换成自
  • Wordpress标签云是将网站里的标签附着不同的颜色,好像一个七彩的云一样,在自己建网站时,可以美化我们的网站。效果如下:我们在学习怎么做
  • 使用WP程序制作门户网站时,需要调用网站头条新闻,让第一个文章标题与其它的标题不一样,以形成新闻头条的效果。如下图:如何使用wp网站代码
  • 有些网站的文字的后面或者下面都有阴影效果,这样使文字更有立体感。并且可以根据自己网站版面要求去设置阴影的颜色,离文字的距离,阴影范围的大小等