WordPress 4.4新功能之图像自适性

最近WordPress 4.4发布了,这是2015年Wordpress最后一次大版本更新了。这次更新为我们带来了一个默认的新主题和一些其它的特色。下面的文字和图片,我们将介绍WordPress 4.4给我们带来的新的变化。

wp4.4

图像的自适性功能说明

现在网站构建越来越多基于移动设备,自动适应各种设备的网站。对于图像来说,自适性也显得很重要了。之前我们可以通过css的方式让图像自适于各种设备,现在wordpress 4.4后,我们可以开发主题让图像自动适应网站,也就是说不必另外加CSS既可以使用图像自适性功能了。

要使用这个功能,只需在html标签img中加入srcset这个属性,这个属性允许客户的浏览器基于不同设备显示不同大小的图片,由于这个工作于css外,所以添加这个属性后,就不必另写CSS了。

这个功能在编辑器中插入图片会自动添加srcset属性的。所以不必手动添加。

这次通过过滤器wp_calculate_image_sizes添加了好多过滤:

wp_get_attachment_image_srcset() – 获取图像附件 srcset属性。
wp_calculate_image_srcset() –在 srcset属性中计算图像源。
wp_get_attachment_image_sizes() – 创建尺寸。
wp_calculate_image_sizes() – 计算图像尺寸。
wp_make_content_images_responsive() –文章内容中筛选图像元素,添加srcset。
wp_image_add_srcset_and_sizes() – 添加srcset和尺寸到存在的img元素中。

下面我们看看wordpress 4.4后图像内容变化:


<img class="aligncenter size-large wp-image-7789" src="http://localhost/dianjin123/wp-content/uploads/2015/12/2-1024x512.jpg" alt="2" width="840" height="420" srcset="http://localhost/dianjin123/wp-content/uploads/2015/12/2-300x150.jpg 300w, http://localhost/dianjin123/wp-content/uploads/2015/12/2-768x384.jpg 768w, http://localhost/dianjin123/wp-content/uploads/2015/12/2-1024x512.jpg 1024w, http://localhost/dianjin123/wp-content/uploads/2015/12/2-1200x600.jpg 1200w" sizes="(max-width: 840px) 100vw, 840px">

看到上面的变化吗,就是添加了srcset这个。

2条评论

  • 评论者 周诗雅 - 回复

    努力~~各位。。。

  • 评论者 逆海而行 - 回复

    怎么用?

留下回复

您的电邮不会被公布 必填字段标记为*