WordPress去除img标签的高度与宽度让图片自适应屏幕

网络教程2个月前22

在移动设备端,因为屏幕都比较小,如果要让图片自适应屏幕,我们应当把width和height属性去除,不然图片可能会比屏幕大,有此需求的朋友可以参考下本文

要求

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

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

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

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

方法一,

将下面代码复制到当前主题的 functions.php 文件中:

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;
}

方法二

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

相关文章

关闭wordpress新用户注册邮件通知的教程

wordpress博客每次有新用户注册都会给我们管理邮箱发一邮件告诉你有新用户注册了,那么如果我们不想接受要如何取消呢,这里我们就来介绍一下关闭wordpress新用户注册邮件通知具体方法.关闭wor...

WordPress禁止评论内容全英文的方法

WordPress评论中第一要过滤的是全英文的垃圾内容了,这个简单我们只要检查包括汉字就可以了,还有时我们希望有些敏感字不让提交,只要一个简单的过滤函数即可.有很多朋友可能会发现有大量的英文垃圾论内容...

WordPress统计当前页面数据库查询次数及消耗时间

在WordPress中可统计当前页面数据库查询次数及消耗时间我们可直接使用两个函数get_num_queries与timer_stop函数,这里我们举例说明如下:1.网页加载时查询数据库的次数:<...

Windows IIS 7.5伪静态中文链接404错误解决办法Windows IIS 7.5伪静态中文链接404错误解决办法

Windows IIS 7.5伪静态中文链接404错误解决办法

对于WordPress建站,虽然我们一直推荐用户使用linux系统,但是无可避免的依然会有很多用户由于种种原因选择了windows系统,并且也会经常有用户遇到中文链接404错误的问题,现在针对Wind...

WordPress代码实现相关文章的几种方法

WordPress有很多实现相关文章功能的插件,插件的优点是配置简 单,但是可能会对网站的速度造成一些小的影响,所以很多人还是比较喜欢用代码实现需要的功能,但是话又说回来了,代码实现也有缺点,就是配置...

WordPress自定义函数控制文章标题长度

WordPress显示文章标题的时候,当文章标题过长而且文章的标题又在主页显示时,如果发生换行的现象就显得不美观了,这时候除了利用CSS来控制文章标题长度外,还可以通过一个简单的php函数来控制。在w...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。