北极寒流 » 网络资源 » 让WordPress外部链接在新窗口打开 - 2010.08.22

让WordPress外部链接在新窗口打开

WordPress外部链接在新窗口打开此效果需要通过jQuery来实现,所以没加载jQuery的请先自行加载jQuery再进行下面的吧。

通过jQuery实现WordPress外部链接在新窗口的代码也就几句话:

$("a[href*='http://www.articn.com'],a[href*='javascript'],a:has(img),a[href*=#]").attr("rel","inlinks");
$("a[rel!='inlinks']").click(function(){window.open(this.href);return false;}).css({background:"url(out-link.gif) no-repeat right 50%","padding-right": "12px"});

解释下:第一句,用 jQuery 选择所有 a 链接中含有 “www.articn.com” . “javascript” . “#” 的链接,这是网站中所有的内链了,当然不好保证还有其它的情况。a:has(img) 是将图片链接排除,因为我们并不想在图片链接的右侧也加个小图标。.attr(“rel”,”inlinks”) 是为所有已经选择的元素添加 rel=inlinks 的属性,标识一下。

第二句就是设置所有链接中 rel 属性不等于 inlinks 的(也就是外部链接了),在新窗口打开,并设置相应的 CSS 属性,也就是加一个外部链接的标识小图片。

不过如果你真的按上面的代码这样写的话那就会给博客中所有的外链都进行了设置,而通常我们只想在内容区域的外部链接添加图标标识,因为我们的侧边栏有很多的外部链接,如果按上面的代码在右边加个小图片的话会比较夸张,也影响美观,对于留言区域也是一样。于是,代码建议这样写的:

$("a[href*='http://www.articn.com'],a[href*='javascript'],a:has(img),a[href*=#]").attr("rel","inlinks");
$("a[rel!='inlinks']").click(function(){window.open(this.href);return false;});
$(".post .content p a[rel!='inlinks']").css({background:"url(out-link.gif) no-repeat right 50%","padding-right": "12px"});

这样我们就让所有的外链在新窗口打开,而只为 .content 中的 a 链接设置了 CSS 样式。

这样做还有一点点小问题存在,就是这个样式是在 JS 中设置的,也就是说只有当 JS 加载完之后才会给链接加上对应的样式信息,这样如果网速不够快的话,就会出现一开始并没有右空白和图片标识,等一下后又突然出现,特别对于在尾部加载 JS 的话有时就比较明显。解决办法是用CSS 对外部链接进行判断并实现相应的样式,而只用 jQuery 来设置新窗口打开的动作就可以了!!

同时附上壹品集的css代码部分:

/* 区分内链外链 */
.postbg a[href^="http:"]{ background: url(images/external.gif) no-repeat right; padding-right:13px; }
.postbg a[href*="epinv.com"]{ background-image:none; padding-right:0; }
.postbg a[href$=".jpg"],.postbg a[href$=".gif"],.postbg a[href$=".png"]{ background-image:none; padding-right:0; }

关于对图片的判断部分,请按你的主题自己修改。

如果采用了CSS设置外链图标,那么上面那段JS代码就可以把后面那段加CSS熟悉的代码去掉了。

参考资料:http://www.xiaorsz.com/css-used-to-highlight-the-different-types-of-link/