首页 建站技巧 网站外部链接怎么添加个性小...

网站外部链接怎么添加个性小图标

作者:

修改日期:

翻阅百度百科的资料,在参考资料栏目中总会看到别人留下的引入链接,对于百度而言就是外部链接了,我们平时在书写文章的时候也会在文章中引入一些外部链接,可是如果我们不注意没有设置为新窗口打开,可能会让用户有点摸不着头脑,最好的方式是能够让外部引入的链接和站内的链接不一样,而像百度这样为网站外部链接添加一个性的小图标诗歌不错的方法,效果如下图:
外部链接个性图标

实现效果并不难,即使不通代码也可以轻松实现,看以下教程:
1、打开主题的functions.php文件并添加以下代码:

  1. function autoicon($text) {   
  2. $return = str_replace(‘<a href=’, ‘<a class=“external” href=’, $text);   
  3. $return = str_replace(‘<a class=“external” href=“http://www.xuejianzhan.com’, ‘<a href=”http://www.xuejianzhan.com’, $return);   
  4. $return = str_replace(‘<a class=“external” href=“#’, ‘<a href=”#’, $return);   
  5. return $return;   
  6. }   
  7. add_filter(‘the_content’, ‘autoicon’);   //应用于文章区域   
  8. add_filter(‘comment_text’, ‘autoicon’);   //应用于评论区域  

注意:其中的http://www.xuejianzhan.com改成你你自己的域名地址。
2、右击保存以下小图标,并上传到你的主题图片文件夹中:
view_reference
3、在主题css文件中添加以下css属性:

  1. .external {   
  2.     backgroundurl(“图片的链接地址”no-repeat scroll rightright 4px transparent;   
  3.     padding-right13px;   
  4. }  

注意:图片的链接地址一定要修改正确,如果不会,可以参看css文件中其他的图片路径,学建站网把图片传放到了主题的images文件夹,图片的链接地址为images/view_reference.gif .
4、OK,一切完成。测试下:WP百科网论坛