为WordPress添加外部链接图标

许多网站使用形如"指向右上方的箭头"的图标来标示页面中的外部链接，我们计划为WordPress引入此功能，并使用于文章和评论内容中。

构建一个新的插件，或在当前使用的主题的function.php中插入如下内容:

function external_link_v2($text) {
	$localhost = get_site_url();
	$pattern = [
		'/<a(.*?)href="(?!'.preg_quote($localhost, "/").')(.*?)"(.*?)class="(?!ext-link)(.*?)(?<!ext-link)"(.*?)\>(.*?)<\/a>/',
		'/<a(.*?)class="(?!ext-link)(.*?)(?<!ext-link)"(.*?)href="(?!'.preg_quote($localhost, "/").')(.*?)"(.*?)\>(.*?)<\/a>/',
		'/<a(((?!class)(?!href="'.preg_quote($localhost, "/").'.*?").)*?)>(.*?)<\/a>/'
	];
	$replace = [
		'<a$1href="$2"$3class="ext-link $4"$5>$6</a>',
		'<a$1class="ext-link $2"$3href="$4"$5>$6</a>',
		'<a$1 class="ext-link">$3</a>'
	];
	$text = preg_replace($pattern, $replace, $text);
	return $text;
}
add_filter('the_content', 'external_link_v2');
add_filter('comment_text', 'external_link_v2');

以上函数将对输入的文本中所有<a></a>标签进行检查，如href=""部分不是本站的链接，将在class=""中添加ext-link(若不存在class=""，则添加class="ext-link")，以便通过CSS添加外链图标.

CSS中的a.ext-link可匹配所有外部链接，故在主题的CSS文件中添加如下字段，便可在WordPress前台的文章内容部分(the_content)和评论部分(comment_text)添加外链图标。

a.ext-link {
    background-position: center right;
    background-repeat: no-repeat;
    background-image: url(/wp-content/plugins/wp-enhance/svg/extlink.svg);
    background-size: 0.8em;
    padding-right: 1em;
}

其中，后三行要根据实际情况调整，使得外链图标大小合适、不与文字重叠或相隔太远即可。