在 WordPress 中使用响应式图像

直到最近，在 WordPress 中使用响应式图像还是一个真正的挑战。 除非用户愿意自己编写功能，否则他们就不走运了。 另一种选择是购买插件或寻找其他解决方法，但没有可供开发人员利用的核心功能。 在不支持响应式图像的情况下创建的主题通常执行缓慢，并且在不同的屏幕尺寸下可用性有时不稳定。 这些并不完全是客户和用户与良好功能相关联的属性。

幸运的是，随着 WordPress 4.4 的发布，这一切都改变了。 现在，响应式图像的功能直接包含在 WordPress 中，允许开发人员在主题中使用它。 这是通过采用响应式图像插件并使其成为 WordPress 核心的一部分来实现的。

这一切是如何运作的

显然，除非您已经这样做了，否则您的第一步是更新到 WordPress 4.4。 完成更新后，如果您查看站点的源代码，您会注意到站点上的图像现在具有两个新属性： sizes和srcset 。 这些属性被过滤，这意味着所有可用的图像尺寸都存在，但尺寸与原始图像保持一致。 在纵横比与图像原始版本不同的情况下，srcset 属性将不允许自定义裁剪。 这是为了确保图像质量在用户屏幕上显示时不会受到影响。

深入了解并做出改变

WordPress 添加了响应式图像作为背景功能，这意味着该过程会自动发生。 当您使用媒体上传器上传图像时，这些属性将应用于这些图像，而无需您进行任何干预。 这对于图像优化也很有用。

因为它是一个背景功能，响应式图像不带有用户界面——它们只是发生。 作为开发人员，您可以修改每个主题中的functions.php文件，以确保为您的图像提供准确的sizes属性。 请记住：当您要引用响应式图像时，这意味着srcset sizes图像标记属性。

默认属性

当您开始使用此功能时，您会注意到 WordPress 非常擅长查找所有可能的大小并将它们添加到srcset属性中。 不幸的是，当涉及到sizes属性的可预测性时，问题可能会出现。 这是用于将图像宽度传达给浏览器的属性，以便图像在任何显示屏上都可用和可见。

将此属性设置为默认值有多种方式。 第一个是它强制将sizes属性应用于每个图像。 考虑到它现在是强制性要求，这很有帮助。 第二个是它不允许浏览器使用比图像原始大小更宽的图像源。 不幸的是，用于根据显示屏幕宽度（例如媒体查询）调整图像大小的 CSS 代码会使这个默认值变得不那么有用。

主题开发人员的过滤器挂钩

由于此默认属性仅适用于未经 CSS 代码修改的图像，因此 WordPress 创建了过滤器挂钩供主题开发人员使用。 您只需使用此钩子调整所有图像的sizes属性。 因此，您可以确定所提供的sizes属性在任何情况下都是理想的。

一个警告

在继续之前，让我们花一点时间说明默认属性选项并不是提供良好响应式图像功能的最佳方式。 事实上，您应该努力避免创建依赖此默认值的主题。 这样做的原因是默认属性会阻止浏览器在显示区域没有原始图像大小的情况下修改图像源。 如果源代码经过 CSS 调整并且需要更大的图像，浏览器也无法修改源代码。

图像过滤

作为主题开发人员，您可以在图像中使用过滤，以获取准确的sizes属性。 这可以通过使用 WordPress 函数的钩子wp_calculate_image_sizes来完成。 您可以使用此功能，使其适用于您当前的主题。 您可以进行更改，将不同的sizes属性应用于不同类型的图像。

此版本附带的新功能现在可以将sizes和srcset属性应用于您使用 WordPress 媒体上传器添加的所有图像。 它还允许您将属性添加到帖子中的图像。 看看wp_get_attachment_image_sizes 。 这将返回一个sizes属性，您可以通过functions.php文件中的过滤器为您的主题捕获和更改该属性。 同样， wp_get_attachment_image_srcset做同样的事情，只针对srcset属性。

响应式图像和您的自定义主题

此最新版本附带的新功能伴随着许多挂钩，您可以使用这些挂钩为主题中的响应式图像提供有效支持。 这些钩子包括以下内容：

Wp_calculate_image_sizes – 主题开发人员可以用来调整sizes属性以处理主题中存在的断点的钩子。

Max_srcset_image_width – 主题开发人员可以用来根据srcset属性中图像的最大宽度进行过滤的钩子。

W_calculate_image_srcset – 一个钩子，使开发人员能够根据srcset属性进行过滤。

了解有关响应式图像支持的更多信息

在有效使用这些钩子时，WordPress 开发人员手册可以提供更多指导。 您需要做的研究将根据您在进行此类幕后调整时的舒适程度而有所不同。 如果你是一个将这个作为严格爱好的主题开发者，你可能会选择做一些实验。 另一方面，如果您是职业主题开发人员，您可能希望投入真正掌握此更新所需的时间和资源。

更新的好处

如果您尚未更新 WordPress（或者您的托管 WordPress 主机尚未为您更新），您的用户将在您更新时受益于一些巨大的好处。 响应式图像支持可以提高页面性能，因为他们的页面不会浪费时间拉下太大的图像。 用户还将注意到图像质量的显着提高。 他们不会看到融入一切的“香肠制作”。 相反，他们只会看到它运行良好。

作为开发人员，您必须为所有主题调整每个functions.php文件中的sizes属性。 但是，一旦您做出了初步努力，事情就会变得容易得多。 在您解决了学习曲线之后，您会发现使用这个新功能非常自然。

可能需要一些研究和实践才能掌握这一新功能，并获得响应式图像支持以适用于您的自定义主题。 但是，如果您愿意深入研究开发人员手册并找出答案，您的客户将真正欣赏性能和功能的改进。 这已经是很长一段时间了，经验丰富的主题开发人员和负责维护自定义主题的人员对此更新感到非常兴奋。