我要投稿

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

天择互联网技术

2022-05-01 0 716

我们网友是否有看到在访问有些博客网站的时候内容中有文本链接的时候会看到在后面或者前面会有一个图标，这样用户体验上看确实比我们直接文本点击容易给点击打开，算是一个提高用户体验的方式。那这样的样式是如何实现的呢？在这篇文章中老蒋整理几个常见的方法，一种是直接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扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

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

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