WordPress 自动去除img的width和height属性

日期： 标签：WordPress教程
如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：  点此联系我

年前折腾了一下博客的自适应功能，让使用手机、iPad等移动设备的访客也能顺畅的浏览露兜博客的内容。这里分享一下自适应主题需要用到的一个功能：当访客使用手机访问时，自动删除文章内容中图片的width和height属性，以达到自适应的效果。

如，在桌面设备上，图片使用的是以下的HTML代码：

<img src="abc.png" alt="abc" width="580" height="267" />

在移动设备端，因为屏幕都比较小，如果要让图片自适应屏幕，我们应当把width和height属性去除，不然图片可能会比屏幕大：

<img src="abc.png" alt="abc" />


为了达到此目的，在当前主题的functions.php中加入以下PHP代码即可：

// 自适应图片删除width和height，by Ludou
function ludou_remove_width_height_attribute($content){
  preg_match_all('/<[img|IMG].*?src=[\'|"](.*?(?:[\.gif|\.jpg|\.png\.bmp]))[\'|"].*?[\/]?>/', $content, $images);
  if(!empty($images)) {
    foreach($images[0] as $index => $value){
      $new_img = preg_replace('/(width|height)="\d*"\s/', "", $images[0][$index]);
      $content = str_replace($images[0][$index], $new_img, $content);
    }
  }
  return $content;
}

// 判断是否是移动设备浏览
if(wp_is_mobile()) {
   // 删除文章内容中img的width和height属性
   add_filter('the_content', 'ludou_remove_width_height_attribute', 99);
}

可能有些人会问，干脆发文章时，img不加width和height，不是更方便？要回答这个问题，我们可以看看HTML img 标签的使用说明：HTML <img> 标签的 height 和 width 属性

在目前的情况下，露兜博客的访客绝大部分使用的还是桌面设备，如果为了自适应而牺牲了这部分访客的浏览体验，就有点得不偿失了。

PS：于江水同学介绍了一种不用删除width和height，而使用CSS来达到图片自适应的方法，用法更简单，更科学，欢迎测试：于江水同学的方法

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/wordpress-remove-images-width-height-attribute.html
露兜
作者：露兜 » kaapass@outlook.com  QQ 825533758

业余编程爱好者。

32 条留言

点此留言
  1. lark lark

    你好，我是做设计的，也会些前端代码，最近才了解到wordpress，看到之前你博客里有“WordPress主题制作全过程”里提供的“tutsplus无偿提供的html模板Aurelius”，结果点的时候已经不能下了，原来你2010年就已经接触到wordpress了，果断大神级人物，我想学WordPress主题制作，能把“html模板Aurelius”文件共享一份给我么，谢谢大神

    回复
    • Ludou

      @lark https://www.ludou.org/create-wordpress-themes-html-template.html

      回复
  2. WordPress主题 WordPress主题

    这个有用，记得，大发那儿还看到一个批量添加alt标签的函数呢。。

    回复
  3. 十年灯 十年灯

    要照顾ipad什么的。。在css中给img定一个：img {max-width:100%}不就行了？这样定义后，img最大时都不会超过其父标签的宽度——当然要是你HTML元素超过了ipad的宽度，那这大img也会超过

    加了这句代码，对电脑屏幕访客毫无影响，而又兼顾移动平台，关键是：很简单

    回复
    • Ludou

      @十年灯 能用简单的方法解决问题那就最好，但是有时候，有些问题不能想得太简单。

      下面是一个自适应网页设计的经典范例，你可以在你的电脑上做个试验，将浏览器窗口最大化比较一下这两个页面的差别，然后将浏览器窗口缩小到iPad差不多的尺寸，再比较一下这两个页面的差别（ 两个网页都用了：img {max-width:100%} ）：
      http://jsbin.com/hehewova/1
      （六个人物头像img加了width和height，如<img src="f-holmes.jpg" alt="" width="260" height="272" />）

      http://jsbin.com/gerijasa/1
      （六个人物头像img没加width和height）

      你可能还会说，在css中给img定一个：img {max-width:100%;max-height:100%;}不就行了？好，看看范例：
      http://jsbin.com/hehewova/2
      （六个人物头像img加了width和height，同时定义了max-width和max-height都是100%）

      慢慢体会！

      回复
      • 十年灯 十年灯

        @Ludou 这么一搞问题就不简单了,其实要兼顾这么多情况当然没那么简单,不然我岂不是要失业了.良好的解决办法总是要综合很多方面才能得到对吧

        回复
      • 帅气小琦琦 帅气小琦琦

        @Ludou 我看了一下 确实存在这个问题 我在我的站点测试了一下 表示貌似主题已经考虑到这个问题 看来要学习的还有很多啊

        回复
    • lft59598

      @十年灯 你好，我也卡在自适应这里了，PC版的都搞定了，只是手机和平板一直解决不了，我想问的是，IPAD平板mini在竖屏的时候，应该设计最大的宽度是多少，

      回复
  4. 于江水

    这样做从前端的角度来说是不合理的。

    img 的 alt 属性是必须的，width 和 height 是推荐的。因为 img 在网页的加载是要比 div 这些结构慢的，所以往往是结构和文字先加载了，再加载的图片。这时候，由于浏览器预先不知道图片的尺寸大小，所以无法渲染图片在网页中的位置和尺寸。等图片加载进来之后，再进行渲染，这时候就产生重绘（就是浏览器重新计算相关元素的位置，具体表现就是图片出现了，图片下面的文字跑到下面了，淘宝的商品介绍页面，这里非常明显。）

    而带有 width 和 height 的 img，浏览器会计算出来，留空，然后等待图片加载，避免页面重绘，提高前端性能和用户体验，这里在知乎上多图的答案可以看出来。

    那么回到露兜大大在乎的响应式的图片处理。这里应该对 img 设置 max-width: 100%; height: auto; 这两条属性，才可以保证成比例拉伸。

    http://jsbin.com/hehewova/3 这是我对上面评论，第一个链接加上 height:auto; 的效果：D

    回复
    • Ludou

      @于江水 不错的方法，值得推荐！

      回复
    • kim zhou kim zhou

      @于江水 解释的很通透！

      回复
    • 深蓝 深蓝

      @于江水 Great！给赞！

      回复
    • mochen

      @于江水 表示 UC浏览器最新版无视，图片直接被撑到最大，并且浏览器增加了X轴的srcoll 那叫一个难看。其他浏览器只测试了一个百度，其他的没测试。

      回复
    • SS SS

      @于江水 这方法果然不错

      回复
  5. Kelvin

    我想给所有wordpress上传的图片class标签中都添加一个新的标签“.img-responsive”，这个应该怎么做？希望能指点下，谢谢

    回复
    • Ludou

      @Kelvin 第3段代码第6行改成：
      $new_img = str_replace('class="', 'class="img-responsive ', $images[0][$index]);

      回复
  6. xuexi

    $new_img = str_replace('class="', 'class="img-responsive ', $images[0][$index]);

    我也添加了一个class 自己还添加了一个data-src属性

    我想把高度 宽度不要去掉 怎么做哦？

    回复
  7. 般若沙迦

    我是外加元素来锁住图片尺寸的
    <i><img src="img/a3-1.png" alt=""></i>
    CSS定义I尺寸,然后img在CSS是width:100%
    这样在图片里面再加尺寸好像没作用了

    回复
  8. xuexi

    我不想删除width height 只要给img加个class 然后把路径给data-src=''

    上面怎么获取图片高度 宽度？

    回复
  9. 大肥羊 大肥羊

    我是发表文章的时候直接去除了，因为不去除的话那个lazyload的小图片会被放大，好难看的。

    回复
  10. 陌小雨 陌小雨

    这个有用！

    回复
  11. 痞子

    不知道tag标签的class能否去除或批量替换成其他的class值？

    回复
  12. 开开

    请问怎样将内容图片class里的 alignnone size-medium wp-image-96 这些删除呢？
    每个图片都有啊

    回复
  13. 高高

    请教一下啊，我现在想实现在评论中gif点击加载的效果，需要将gif图像的img标签中的src替换为data-gifffer，例如<img data-gifffer="01.gif" />,但是还要判断是gif图像，png和jpg不替换，如何做到呢？

    <code>
    add_action('comment_text', 'comments_img', 2);
    function comments_img($comment) {
    if 判断gif图像

    $comment = preg_replace('#(http://([^\s]*)\.(gif))#','<img src="$1" alt="" />',$comment);

    else
    $comment = preg_replace('#(http://([^\s]*)\.(jpg|png))#','<img data-gifffer="$1" alt="" />',$comment);
    end if;
    return $comment;
    }
    </code>

    回复
    • 露兜

      @高高 add_action('comment_text', 'comments_img', 2);

      function comments_img($comment) {

      preg_match_all("/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png\.bmp]))[\'|\"].*?[\/]?>/", $comment, $images);

      if(!empty($images)) {
      foreach($images[0] as $index => $value){
      if(strpos( $images[1][$index],'.gif') !== false) {
      $new_img = str_replace('<img ', '<img data-gifffer="'.$images[1][$index].'" ', $images[0][$index]);
      $comment = str_replace($images[0][$index], $new_img, $comment);
      }
      }
      }

      return $comment;
      }

      回复
  14. grace

    Hi, 弱弱地问一句，我想改img的宽度尺寸，请问下怎么弄，不好意思我刚接触wordpress。。。

    回复
  15. 刘荣焕 刘荣焕

    新版本不能用了，求楼主更新

    回复
  16. 凯凯

    博主代码失效了呀

    回复
  17. 福利次元 福利次元

    露兜，本文章内的代码已无效，请更新！

    回复
    • 露兜

      @福利次元 抱歉！
      查了一下，是代码高亮插件出了点问题，导致引号被转义导致代码没有生效。
      现在已经改过来了，可以使用。

      回复

发表留言