移动端的最讲究速度与体验,访问速度快了,百度算法有说明,可以提升网站关键词排名,那体验呢,光速打开,结果图片尺寸显示有问题。图片变形了,这就是一个糟糕的用户体验,下次用户再看到你的网站名称或是域名链接就会联想起这个网站的图片是变形的体验很差,我不想访问他的站点。我宁可多翻几页去找找体验好的、界面美观的站点。
那我们怎样对wordpress移动端的图片进行尺寸的优化呢,今天分享给大家就是当我们通过wordpress添加媒体上传图片发布后,wordpress程序会默认给图片添加宽度和高度,那我们使用移动端或手机设备浏览时就会把页面撑大,所以大挖推荐给大家以下代码可以有效优化移动端图片显示
将代码添加到当前wordpress主题Functions.php文件中。就可以在移动端取消宽度和高度限制。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 自适应图片删除width和height 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); } |