小程序优化:禁止WordPress图片自动添加width和height属性

不禁会有人想问,禁止WordPress图片自动添加width和height属性小程序有什么关系,这里技术宅啰嗦下,有很大的关系,因为如果您文章中的图片带有width和height属性,那么小程序中的图片也会有,并且会直接影响文章页面!也许是作者没有写好,但是技术宅在实际使用中的问题上方视频!

在文章中会发生错位,经测试,如果禁止WordPress图片自动添加width和height属性能解决这种尴尬!

方法一

在后台WordPress主题编辑模板函数(functions.php)文件,在文件最后面添加如下代码:

//移除img标签自动高度和宽度。
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
  $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
  return $html;
}

方法二

这种方法就是首先判断是否为移动设备,如果是移动设备就删除img标签的width和height属性,从而实现自适性的目的。

// 自适应图片删除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);

以上就是禁止禁止WordPress图片自动添加width和height属性的两种方法,有需要的可以参考!

方法三

通过 jQuery 删除widthheight属性

对于已经添加到文章的图像,必须手动删除widthheight属性,或者也可以使用一些jQuery代码来解决问题,以下代码添加到主题 js 文件中:

    /*直接删除图像上的大小属性*/
    jQuery(document).ready(function($) {
        $('img').removeAttr('width').removeAttr('height');
    });

使用 jQuery 代码删除图像大小属性更加方便,对于已经添加或者将来要添加的图片都适用。

使用 CSS 使图像大小属性失效

对于响应式图片或者延迟加载时的默认图片都是较好的解决方法,将以下代码添加到主题 CSS 样式文件中:

  img {
        width: initial !important;
        max-width: 100% !important;
    }

重要提示

以上的方法是需要在图片响应式做好的前提下,即我们在主题实际使用过程中对 img 设置 max-width: 100%; height: auto; 这两条属性,才可以保证成比例拉伸。

技术分享

AdSense有不合适的广告出现在网站上要如何处理?

2019-7-3 20:52:06

技术分享

WordPress网站如何被黑客入侵

2019-7-4 22:57:29

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索

关于我们

技术宅,专注分享,专注技术!分享互联网科技新闻轶事,分享生活小常识,各种数码使用小技巧!互联网的精神本就是分享,我们坚信分享会带来更多的进步!

Copyright © 2020 技术宅 苏ICP备17056378号 苏公网安备32010202010371号 - 查询 32 次,耗时 0.1453 秒 南京市玄武区酷芯壳网络科技中心 提供技术支持 安全联盟认证