17713433920 info@mac163.com

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

WordPress在代码中img去掉width height属性值
WordPress在代码中img去掉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 mac163
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 标签的 height 和 width 属性

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


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部