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

2016-04-04cms教程
41

  这段日子一直折腾博客的自适应功能,让使用手机、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 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。 

The End

相关推荐

网站图片丢失或者获取失败时显示默认图片的办法
当我们的网站时间久了难免会出现图片丢失或者误删,这样文章的图片就无法显示了,会让页面变的很难看。那么当网站图片丢失或者获取失败时如何显示我们设置的默认图片呢,或者默认多张图片随机显示呢。 方法一:当图片调用失败后,会用图片后面设置的默认图片...
2022-10-24 cms教程
71

WordPress上一篇、下一篇文章链接添加title属性的方法
上一篇、下一篇文章代码: ?php previous_post_link(%link,) ??php next_post_link(%link,) ? 该代码解析出来的代码大概如下: a href= rel=external nofollow rel=external nofollow /aa href= rel=external nofollow rel=external nofollow /a 通过 get_pr...
2017-08-03 cms教程
358

WordPress去除链接添加 Noopener Noreferrer 的教程
WordPress目前在最近的版本中为所有需要新窗口打开的链接都自动添加了新的 noopener noreferrer 属性。noopener noreferrer 属性并不是新发布的标准,但 WordPress 4.7.4 版开始的编辑器默认都会添加该属性。新窗口打开超链接的属性 target=_blank 增加 rel=...
2017-07-31 cms教程
232

dicuz搭建的论坛如何修改改后台地址?
用discuz搭建的论坛,后台默认地址是 域名加 admin.php,很多站长怕网站被黑客攻击,一般黑客会扫描admin文件,然后破解管理员账户登录后台,所以想修改后台的地址。直接修改 admin.php 名并放到其他文件夹里,访问后台用修改过的路径虽然能访问,但是会出错...
2017-07-08 cms教程
364

phpcms筛选功能(经典无错)---汇总网上各种版本!
phpcms的筛选功能,网上有各种版本,但是多多少少都会有点问题,不是很完美,下面我总结网上各种版本,加上自己的研究,得出一个算是比较全的一个资料,既可以分页,也可以分栏目! 第一步:后台添加字段 添加字段: 后台--内容--内容相关设置--模型管理--文...
2017-06-26 cms教程
436

WordPress内外网访问问题,图片地址问题解决方法
NAS已经把玩差不多半个月了,基本的download,DLNA,都已搞定。因为一直都是博客的忠实支持者,所以必须把自己的博客也搬到NAS上,老是跟大家都混在新浪上岂不是很没面子。于是开始购入域名,研究DDNS,找博客平台。很快锁定wordpress,看了别人建站效果,感...
2017-05-05 cms教程
350