没有所谓的捷径
一切都是时间最平凡的累积

纯代码实现WordPress图片自动添加alt和title属性

本文最后更新:2019年1月31日,已超过2079天未更新,如果文章内容失效,请留言反馈本站。

我们的博客网站中的每一篇文章或多或少都会有一些图片,而对于图片的 alt 和 title 属性,我想大部分博主站长应该都不会陌生。大家都知道图片的 alt 和 title 属性非常重要,但是在添加图片的时候总是不能坚持,或偶尔漏掉 alt 或 title,或 alt 和 title 属性都漏掉,这个对于图片的优化应该是非常不利的。所以,今天就跟大家说一说如何让 WordPress 站点的图片自动添加上漏掉的 alt 和 title 属性。

纯代码实现 WordPress 图片自动添加 alt 和 title 属性 WordPress 豫章小站

在这里,跟大家普及一下图片的alttitle属性:

title 属性:主要针对用户,当用户的鼠标放在图片上的时候,显示的文字就是 title 属性。

alt 属性:主要针对搜索引擎,也针对用户,在图片加载失败的时候,会显示 alt 属性中的内容,另外,alt 属性是搜索引擎爬虫识别我们的图片的唯一方式。

一个完整的优化过的图片应该同时具有 title 属性和 alt 属性,而且 alt 属性中最好带有文章的关键字。

回归正题,仔细分析我们站点图片的 alt 和 title 属性,不外乎以下四种情况:

  • 没有 alt 和 title 属性;
  • 有 title 属性但没有 alt 属性;
  • 有 alt 属性但没有 title 属性;
  • 同时拥有 alt 和 title 属性。

现在我们重点是要为前面三种情况的图片补齐 alt 和 title 属性,但是如果人工补齐的话,这个可是一个浩大的工程,很多人都会放弃的,包括我在内。

幸好,WordPress 是强大的,而且网络上的资源也挺多的,经过本站修改测试,发现只需要将以下代码添加到我们所使用主题的 functions.php 文件最后一个?>即可实现自动为 WordPress 站点图片添加 alt 和 title 属性。

/*自动添加图片 alt 和 title 属性*/
function image_alttitle( $imgalttitle ){
        global $post;
        $category = get_the_category();
        $flname=$category[0]->cat_name;
        $btitle = get_bloginfo();
        $imgtitle = $post->post_title;
        $imgUrl = “<img\s[^>]*src=(\”??)([^\” >]*?)\\1[^>]*>”;
        if(preg_match_all(“/$imgUrl/siU”,$imgalttitle,$matches,PREG_SET_ORDER)){
                if( !empty($matches) ){
                        for ($i=0; $i < count($matches); $i++){
                                $tag = $url = $matches[$i][0];
                                $j=$i+1;
                                $judge = ‘/title=/’;
                                preg_match($judge,$tag,$match,PREG_OFFSET_CAPTURE);
                                if( count($match) < 1 )
                                $altURL = ‘ alt=“‘.$imgtitle.’ ‘.$flname.’ 第’.$j.’张” title=“‘.$imgtitle.’ ‘.$flname.’ 第’.$j.’张-‘.$btitle.'” ‘;
                                $url = rtrim($url,’>’);
                                $url .= $altURL.’>’;
                                $imgalttitle = str_replace($tag,$url,$imgalttitle);
                        }
                }
        }
        return $imgalttitle;
}
add_filter( ‘the_content’,’image_alttitle’);

 

以上代码默认的 alt 属性为“文章标题 分类名称 第几张”,title 属性为“文章标题 分类名称 第几张-站点名称”。

以上代码已经成功在 云速博客 运行 大家可以随意打开某篇含有图片的文章测试看看。

特别说明:

1、以上代码只针对没有 alt 或 title 属性的图片,如果该图片已经有 alt 或 title 属性,那么它们的值为空也是无效的。比如某张图片的 alt=””,那么对这个 alt 属性也是失效的。

2、以上代码会智能判断,如果都没有 alt 和 title 属性,那么就会自动给该图片添加上 alt 和 title 属性;如果都没有 alt 属性,那么就会自动给该图片添加上 alt 属性;如果都没有 title 属性,那么就会自动给该图片添加上 title 属性。大家慢慢体会吧。

3、本想在 alt 属性中加上文章的关键字(Tag 标签)的,可惜折腾了很久都没有成功,后来改为文章分类了。期待高手出现把以上代码完善。

转载自:超哥博客

» 站长码字辛苦,有用点个赞吧,也可以打个
» 若转载请保留本文转自:豫章小站 » 《纯代码实现WordPress图片自动添加alt和title属性》
» 本文链接地址:https://blog.mydns.vip/1469.html
» 如果喜欢可以: 点此订阅本站 有需要帮助,可以联系小站
赞(8) 打赏
声明:本站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,若涉及侵权请及时告知,将会在第一时间删除,联系邮箱:contact@mydns.vip。文章观点不代表本站立场。本站原创内容未经允许不得转载,或转载时需注明出处:豫章小站 » 纯代码实现WordPress图片自动添加alt和title属性
分享到: 更多 (0)

评论 抢沙发


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

智慧源于勤奋,伟大出自平凡

没有所谓的捷径,一切都是时间最平凡的累积,今天所做的努力都是在为明天积蓄力量

联系我们赞助我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏