用CSS样式和WordPress替换样式实现网站内容链接添加超链接图标方法

2022-05-01 0 560

我们网友是否有看到在访问有些博客网站的时候内容中有文本链接的时候会看到在后面或者前面会有一个图标,这样用户体验上看确实比我们直接文本点击容易给点击打开,算是一个提高用户体验的方式。那这样的样式是如何实现的呢?在这篇文章中老蒋整理几个常见的方法,一种是直接CSS样式在有文章链接的前面或者后面添加,一种是直接用WordPress替换函数样式。

1、定义单独的样式

我们可以单独给需要设置A跳转的文本设置一个样式。

  a.external {
      background: url(/images/external.png) center right no-repeat;
      padding-right: 13px;
    }

图标我们自己准备。

<a href="#" rel="external nofollow"  class="external">Link</a>

在需要添加的URL添加样式external。

2、CSS背景图实现

    .content{
        width:600px;
        margin:30px 30px 30px 30px;
        font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
        font-size:14px;
        color:#333;
        line-height:185%;
    }
    .content a {
    background:url(data:image/png;base64,iVBORw0KG2iRXFWCMUAAAAASUVORK5CYII=) center right no-repeat;
        padding-right:13px;
        margin-left:3px;
        margin-right:3px;
        text-decoration: underline;
        color: #c30;
    }
    .content a:hover {
        color: blue;
    }

这里直接用CSS背景图实现,但是需要用到图片的BASE64加密,我们需要自己准备。

3、WordPress直接替换规则

我们可以直接用WP替换链接规则自动加上前缀的图标。

//文章内外链添加go跳转
function the_content_nofollow($content){
    preg_match_all('/<a(.*?)href="(.*?)" rel="external nofollow" (.*?)>/',$content,$matches);
    if($matches){
        foreach($matches[2] as $val){
            if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){
                $content=str_replace("<a href=\"$val\"", "<i class='fa fa-external-link' style='color:#45b6f8'  aria-hidden='true'></i><a href=\"".home_url()."/go/?url=$val\" ",$content);
            }
        }
    }
 return $content;
}
add_filter('the_content','the_content_nofollow',999);

这里还将外部的地址用GO跳转,这个根据自己需要可以设置的。

这样,我们可以根据实际的需要自己选择喜欢哪种。

文章来源于网络

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 互联网技术 用CSS样式和WordPress替换样式实现网站内容链接添加超链接图标方法 https://www.lingchenw.cn/1528.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载