许多网站使用形如"指向右上方的箭头"的图标来标示页面中的外部链接,我们计划为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;
}
其中,后三行要根据实际情况调整,使得外链图标大小合适、不与文字重叠或相隔太远即可。