关于 target=”_blank” 的争论充斥着互联网，很多人提倡不要使用 target=”_blank” 因为这个不符合 XHTML-strict 和 XHMTL 1.1 的标准。但是我真的不太想让人一点击文章中的外部链接就离开原网站了。解决的方法是使用 rel=”external”。另一个问题是，每次手动加这个标签都比较繁琐，这里介绍一种方法能自动判断文章里的链接是指向站外还是站内，如果是站外则添加一个小箭头指示，并自动加上 rel=”external” 标签，不用手动一个一个去加。
一、添加 da_auto_external_link() 函数
在 functions.php 文件中添加以下内容
1
2
3
4
5
6
7
8
| function da_auto_external_link($text) {
$newtext = str_replace('<a href=', '<a class="external" rel="external" href=', $text);
$newtext = str_replace('<a class="external" rel="external" href="'.home_url(), '<a href="'.home_url(), $newtext);
$newtext = str_replace('<a class="external" rel="external" href="#', '<a href="#', $newtext);
return $newtext;
}
add_filter('the_content', 'da_auto_external_link'); //应用于文章区域
add_filter('comment_text', 'da_auto_external_link'); //应用于评论区域 |
这个函数先把文章里的所有链接加上 external 的标识，然后再把站内链接的 external 标识给去掉。
二、添加 rel=”external” 识别
在模版文件 header.php 中的 head 区域内添加以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script type="text/javascript" >
/* External Links */
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
</script> |
三、添加小图标及其样式
在样式表文件 style.css 中添加以下内容
1
2
3
4
| .external {
padding-right: 11px;
background: url('img/external-link.png') no-repeat right top;
} |
然后上传一个文件名为 external-link.png 小图标到主题目录下的 img 子目录。当然路径和文件名你可以自己改。
