纯代码实现外链自动添加小图标

External Link Icon

不知大家有没有注意到笔者博客文章中的外链都有一个小图标:比如【浅谈WordPress的Pingback和TrackBack机制及其优化】一文:

这个小图标提醒了读者这是个外部链接,提升了用户体验。那么如何给外链自动加上这个小图标呢?(千万别想着手动添加,太耗精力了)

方法一.使用插件WP External Links

WP External Links这个插件不仅可以给外链添加小图标,还可以添加Nofollow、external属性,还可以设置外链在新窗口/标签打开。此外,还可以设置应用范围:文章区域、评论区域、侧边栏。功能非常强大。

WP External Links

 

方法二.纯代码法(免插件)

如果仅仅是想给外链添加一个小图标的话,何必多安装一个插件呢。

向function.php文件添加以下代码(将www.jeriffcheng.com换成自己的博客网址):

function autoicon($text) {
$return = str_replace('<a href=', '<a class="external" href=', $text);
$return = str_replace('<a class="external" href="http://www.jeriffcheng.com', '<a href="http://www.jeriffcheng.com', $return);
$return = str_replace('<a class="external" href="#', '<a href="#', $return);
return $return;
}
add_filter('the_content', 'autoicon');   //应用于文章区域
add_filter('comment_text', 'autoicon');   //应用于评论区域

将小图标ext-icon-2上传到空间获取链接。然后向style.css文件添加以下代码:

.external {
	padding-right: 11px;
	background: url('图片的链接地址') no-repeat right top;
}

最后解释一下代码的作用:

添加到function.php的代码给所有的外部链接加上了一个external类,接着添加到style.css文件中的代码给所有external类的链接添加背景图片,就是那个小图标。这样,就实现了免插件,给外链添加小图标的目的。

  5Comments

  1. shangrenxi   •  

    我不用wp写html网页,有办法自动加载外部缩略图吗?

  2. hx   •  

    看了几篇,感觉博主正则用的很给力!学习一下

    • Jeriff Cheng   •     Author

      呵呵,这段代码是我从国外博客看到的,修改了一下而已。

Leave a Reply

Your email address will not be published. Required fields are marked *