WordPress自动删除图片的宽度和高度

时间:2016-04-04
  这段日子一直折腾博客的自适应功能,让使用手机、iPad等移动设备的访客也能顺畅的浏览露兜博客的内容。这里分享一下自适应主题需要用到的一个功能:当访客使用手机访问时,自动删除文章内容中图片的width和height属性,以达到自适应的效果。
WordPress自动删除图片的宽度和高度

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

  <删 img src="abc.png" // 自适应图片删除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,不是更方便?这是因为为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。所以请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。 

上一条:WORDPRESS缩略图失真变形模糊的解决方法 下一条:WordPress主题常用函数大全

相关文章

最新文章