WordPress主题文章页外部链接增加图标让链接更显眼

虫子君
虫子君
虫子君
390
文章
166
评论
2019.11. 720:45:32 1 611 2905字阅读9分41秒

WordPress文章页当中的外链地址,想要明显一点,但是又不想让连接文字的颜色影响整个页面的美感,下面的这个方法估计蛮适合你。如果您仅仅是需要将连接添加一个图标,那可以换成另一种办法实现。后面虫子君会说到。

一共有两个办法,一个是纯代码就可以实现,只需要在function.php文件当中添加功能,另一个则是需要借助插件实现。为什么是会是这样?那是因为虫子君只是想将文章页面中的外部链接地址增加图标,以增强视觉效果。

虫子君最近做了一个网站,主要是DIY主机这一块而的,都是一些硬件方面的知识,自己写的,不参水。但是又想盈利,想着吧将自己网站内容的连接添加一个图标,增加外链文字的美感。但是默认的<a>标签是蓝色的,如果换成其他颜色,又会不显眼或者会影响整个页面的美观,所以虫子君今天在折腾这个外链的时候,突发奇想,将自己网页文章当中的外链地址增加一个图标,是不是会更好看一点,但是又不会影响整个页面的美观。

wordpress外链地址图标

wordpress 外链地址图标;上图这般

1、代码实现方法"

以下的代码是将文章当中的外部链接自动排除出来,再增加一个特殊标签实现的。所以需要在PHP代码段中,将您网站域名排除。(如果您使用了对象储存图片,那连图片的地址也会一并加上,当然您也可以在插入图片的时候,不连接到图片的源地址,这样也可以避免)。

这个方法不适合正在使用对象储存图片的网站,因为对象储存也是外链地址。总的来说这一段代码不是很智能,适合要求单一的用户。

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

将以上代码,粘贴到你wordpress主题的function.php文件的最后

注:其中代码中的“https://chonzi.com”需要改成你自己网站的域名

再到style.css文件当中将下面的代码粘贴到里面,保存即可大功告成。

.external {padding-right: 11px; background: url('https://cdn.chonzi.com/wp-content/uploads/19d0b2c513fd3c.png') no-repeat right top;}

注:其中代码中的“https://cdn.chonzi.com/wp-content/uploads/19d0b2c513fd3c.png”这个图片的地址请改成您自己的,虫子君的oss已经设置了白名单。

第二种方法利用“WP No External Links”识别外链之后再添加图标

第二个方法虫子君比较推荐,首先WP No External Links插件可以自动将你网页中的外链地址,转换成内链,这一点对于权重不多,并且是新站的用户会比较合适。

为什么一定需要使用WP No External Links插件?那是因为这个插件,在你的外链地址前,会包裹一个“noindex”标签,所以可以断定网页当中含有“noindex”标签的连接地址,都是外链地址。这就给了我们一个动手的机会,因为在网页的代码中,唯有外链地址的“a”标签,会包裹一个“noindex”所以实现外链地址加图标的,方法就变的简单多了。

noindex a {padding-right: 15px; background: url('https://cdn.chonzi.com/wp-content/uploads/19d0b2c513fd3c.png') no-repeat right top;}

只需要将noindex 后面的a标签,增加一个背景图片即可完成这个我们需要的功能。然后设置一下不平铺,以及排列方向等等。

然后这里再补充一点,就是很多朋友不一定知道虫子君是怎么设置WP No External Links插件的,所以这里虫子君做了截图大家对照着勾选启用即可。

WP No External Links

WP No External Links

其中非常重要的一点“Surround masked links with <noindex>link</noindex> tag (for yandex search engine)”这一项一定要勾选上,不然后面的css文件不会生效。

其他方面,大家自己手动操作,如果需要扩展其他的功能,不妨看看虫子君之前汉化了“WP No External Links”插件分享的那一篇文章。

拓展一下,结合自己的经验,再做出新的玩法。

首先实现连接文章添加图标的功能,并不是PHP的功劳,仅仅是利用了css当中的背景属性,所以哈基本上可以说,所有网页的连接地址,都可以实现这个简单的功能。

如果您仅仅是想在您文章当中的文字连接地址增加图标的话,不妨试试下面的这个办法。这个办法意思是说将段落文本下的连接文本增加一个图标的意思。然后图片文件的地址就是您的图片地址。

p a {padding-right: 15px; background: url('https://cdn.chonzi.com/wp-content/uploads/19d0b2c513fd3c.png') no-repeat right top;}

想通了以后发现其实这个功能,完全可以不依赖任何插件,就可以实现的办法,完全没有必要非得利用PHP一类的。

好了,今天的博客就到这里了,文中可能会有一些些的不如人意的地方,大家请多包涵,虫子君不是程序员,所以只会实现一些简单的效果。

 

展开全文
虫子君
  • 版权声明: 发表于 2019.11. 720:45:32
  • 转载注明:https://chonzi.com/8146.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • avatar 叶忠文博客 @回复 0

      不错啊