当前位置:首页>WordPress>WordPress教程>WordPress网站内容图片移动端自适应屏幕大小替换方法

WordPress网站内容图片移动端自适应屏幕大小替换方法

今天晚上西柚在帮一个朋友公司的网站调整移动端的时候出现打开企业网站图片有些变形,并不是自适显示的。其朋友的网站PC端和移动端是两套模板且用判断自动切换手机还是PC电脑的,不过在电脑端打开的网站是正常的,但是有些问题是在移动端打开产品页面的时候图片是变形的。

根据一些办法准备替换CSS样式图片宽带AUTO自动宽度,但是高度也有问题。所以这种并不是一个好办法,于是找呀找,找到一个直接定义正则的方法是可以解决问题的。这里西柚也一并记录下来,以后说不定也有需要。

// 自适应图片大小原创来自www.ciyol.cn整理
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);
}

将代码添加到当前主题的Functions.php文件中,比如老蒋只需要将这个代码添加到移动端模板的Functions.php文件中。

©版权声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

给TA打赏
共{{data.count}}人
人已打赏
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索