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

 2016-04-03 06:48:54  1,256 人阅读  33 条评论

投放广告联系   诚邀合作伙伴   赞助我们   本站公告   轻松一刻

我们的博客网站中的每一篇文章或多或少都会有一些图片,而对于图片的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属性。

  1. /**
  2.     *自动添加图片alt和title属性|boke112导航
  3.     *https://boke112.com/2912.html
  4. */
  5. function image_alttitle( $imgalttitle ){
  6.         global $post;
  7.         $category = get_the_category();
  8.         $flname=$category[0]->cat_name;
  9.         $btitle = get_bloginfo();
  10.         $imgtitle = $post->post_title;
  11.         $imgUrl = "<img\s[^>]*src=(\"??)([^\" >]*?)\\1[^>]*>";
  12.         if(preg_match_all("/$imgUrl/siU",$imgalttitle,$matches,PREG_SET_ORDER)){
  13.                 if( !emptyempty($matches) ){
  14.                         for ($i=0; $i < count($matches); $i++){
  15.                                 $tag = $url = $matches[$i][0];
  16.                                 $j=$i+1;
  17.                                 $judge = '/title=/';
  18.                                 preg_match($judge,$tag,$match,PREG_OFFSET_CAPTURE);
  19.                                 ifcount($match) < 1 )
  20.                                 $altURL = ' alt="'.$imgtitle.' '.$flname.' 第'.$j.'张" title="'.$imgtitle.' '.$flname.' 第'.$j.'张-'.$btitle.'" ';
  21.                                 $url = rtrim($url,'>');
  22.                                 $url .= $altURL.'>';
  23.                                 $imgalttitle = str_replace($tag,$url,$imgalttitle);
  24.                         }
  25.                 }
  26.         }
  27.         return $imgalttitle;
  28. }
  29. add_filter( 'the_content','image_alttitle');

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

以上代码已经成功在boke112导航和懿古今博客运行,大家可以随意打开某篇含有图片的文章测试看看。

特别说明:

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

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

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

如果文章对你有帮助,请赞赏支持boke112导航发展!

历史上的今天:

本文地址:https://boke112.com/2912.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
WordPress虚拟主机和VPS服务器推荐

 发表评论


  1. 龙笑天
    龙笑天 【状元】 @回复

    非常给力,找了好久,终于找到了,已用上并转载。
    http://www.ilxtx.com/how-to-add-attribute-alt-and-title-to-image-automatically.html

    • boke112导航
      boke112导航【村长】2016-04-13 14:08  回复

      @龙笑天[强] 方法还是挺多的,关键是要找到适合自己的那种方法,不错

  2. 微历史
    微历史 【丞相】 @回复

    挺好的功能,忘记加时有用

    • boke112导航
      boke112导航【村长】2016-04-04 21:45  回复

      @微历史我一般都记得加alt,但是title经常忘记,因为通过URL添加图片好像不能直接添加title,要切换到文本模式才行

  3. 橘子书
    橘子书 【丞相】 @回复

    导航兄这段代码,“代码默认的alt属性为“文章标题 分类名称 第几张”,title属性为“文章标题 分类名称 第几张-站点名称”。”具体是哪段代码?能否剥离点出,这样我觉得比较好。一来如果这段代码导致在其他主题不兼容,其他人依旧能采用部分有用的代码。从而达到预期效果!

    • boke112导航
      boke112导航【村长】2016-04-04 21:49  回复

      @橘子书 [疑问] 还有这样的情况,我用在Unite和Three两个主题上都没有任何问题。好像代码就那么几句,你认真看一下就能发现的,不想要的样式直接删除即可。

      • 橘子书
        橘子书 【丞相】2016-04-04 22:21  回复

        @boke112导航回头再好好研究,反正一般我图片放的不多。个人文字博客对百度的亲近并不是十分看重。

  4. 橘子书
    橘子书 【丞相】 @回复

    [可怜] 昨晚折腾了一下,发现导航兄的这个代码不是兼容全部主题,会导致有些主题的首页崩了、溢出或不显示、或变形。部分分类目录下的展示也是如此!
    后来,我在乐趣主题的GIt中扒下了它里面关于自动图片alt、title属性、以文章名属性。才兼容了个人文字博客站,唯独遗憾的是不能按照第几张这样的命名,然后我们之前弄的图片如果原先有alt属性,这种自动图片添加属性都会再加alt属性,导致一张图两个alt。

    • boke112导航
      boke112导航【村长】2016-04-04 21:50  回复

      @橘子书 [流汗] 这种情况我还真不太懂,可能某些主题存在函数冲突之类的吧,我这边用了两个站点都没有任何问题,而且有了alt属性,它确实不会再次添加

      • 橘子书
        橘子书 【丞相】2016-04-04 22:22  回复

        @boke112导航好像你的也有两个alt,只不过两个alt之间有个/分开。(昨晚我随机查看了下你的旧博文,发现有两个中间由/隔开,不知是偶然还是啥。)

        • boke112导航
          boke112导航【村长】2016-04-04 22:50  回复

          @橘子书 [疑问] 我刚才看了很多14年的文章,里面的图片都是只有一个alt和一个title属性,没发现你所说的有两个alt属性的,下次发现麻烦告知网址,好让我查看,谢谢。

  5. 奋斗之路
    奋斗之路 【书童】 @回复

    我习惯了手动。。话说手动可以让一些搜索引擎固定抓取某一张。。。

    • boke112导航
      boke112导航【村长】2016-04-04 07:14  回复

      @奋斗之路[强] 手动这个习惯还是挺好的,比起这些自动的更好

  6. 阅读纵横
    阅读纵横 【进士】 @回复

    唉,我就是典型的经常懒得加alt和title属性的人。

    • boke112导航
      boke112导航【村长】2016-04-04 07:16  回复

      @阅读纵横[呲牙] 我倒是经常加上alt属性,经常漏加title属性,所以就加上这个代码了,以后就不用担心那么多了

      • 橘子书
        橘子书 【丞相】2016-04-04 09:43  回复

        @boke112导航alt因为在写代码的时候本身就自动写好了,唯独tilte会忘。

  7. 明月登楼
    明月登楼 【王爷】 @回复

    不错,这个代码很值得收藏的!不过,我基本上都养成习惯了,发布文章时就加上图片说明!目前主题也带这个功能,所以变得是越来越懒了!

    • boke112导航
      boke112导航【村长】2016-04-04 07:16  回复

      @明月登楼其实能够手动添加这个习惯真的挺好的

  8. 淘汇站
    淘汇站 【秀才】 @回复

    每天来学习

  9. 玉满斋
    玉满斋 【尚书】 @回复

    不错,期待发布优化完美版!

    • boke112导航
      boke112导航【村长】2016-04-04 07:17  回复

      @玉满斋等有空再折腾试试,据说把tag标签也添加上会更完美

  10. 网际电脑
    网际电脑 【状元】 @回复

    放个固定广告位

  11. 橘子书
    橘子书 【丞相】 @回复

    我一直在纠结要不要给博客加这个属性。。不知道它到底有何作用!

    • boke112导航
      boke112导航【村长】2016-04-03 14:16  回复

      @橘子书 对于图片优化而言,这两个属性还是挺重要的

      • 橘子书
        橘子书 【丞相】2016-04-03 23:43  回复

        @boke112导航那我回头给个人博客加上这个。现在逐渐比较关注优化了。以前都不懂。个人博客https后因为不懂很多seo跟其他的方面的优化,导致百度不亲近。汗死了!

  12. 阅读一站
    阅读一站 【状元】 @回复

    不错哦。采纳

  13. 追梦博客
    追梦博客 【秀才】 @回复

    您这个赞 打赏 还有点表情的这个可以分享吗?

    • boke112导航
      boke112导航【村长】2016-04-03 14:17  回复

      @追梦博客那个评论表情本站早已分享,点赞和打赏也分享过,不过这个是针对Unite和Three主题的,剩下的就是样式调试了

  14. 追梦博客
    追梦博客 【秀才】 @回复

    有没有alt可以有样式的。

  15. 小C博客
    小C博客 【进士】 @回复

    菜鸟路过,想问下,添加alt和title的作用是什么?也就是好处!!

    • boke112导航
      boke112导航【村长】2016-04-03 10:36  回复

      @小C博客这个问题在文章中也有简单描述,或者直接网上搜索百科来看看比较好

  16. Koolight
    Koolight 【尚书】 @回复

    板凳搬来。

  17. E书之家
    E书之家 【进士】 @回复

    前排就座