衢州高端网站开发：如何在WordPress中集成Pictureill 2.0并使您的图像具有响应性

WordPress非常适合接受响应性图像的挑战。它的默认媒体上传程序是复杂的，并支持图像大小调整、缩略图裁剪和对ALT文本和标题的精细控制。在插件的帮助下，图像优化也是小菜一碟。现在是开始利用这些特性的时候了。有反应的图像已经进入了HTML标准规范有了PictuRefill的填充，我们衢州高端网站开发今天就可以开始使用响应性的图像了。

反应意象的简史

响应图像是适应屏幕大小和显示密度的图像。例如，手机不应该下载192 px宽的图像，比屏幕本身宽6倍。我们需要一种方法来为所有设备提供适当的图像大小，同时仍然对带宽和质量负责。

在移动设备、各种尺寸的平板电脑和巨大的智能电视普及之前，关于响应性图像的讨论几乎没有意义。然而，在伊森·马尔科特(Ethan Marcotte)的标志性著作“响应式Web设计”(ResponsiveWebDesign)之后，开发者开始认真考虑如何确保设备只下载他们需要的字节。因为图片平均来说是你页面中最重要的部分，所以它们是一个很好的起点。

谈话发生了。成立了工作组。开发人员似乎更喜欢图片，照片,新创建的元素，基于视频元素，该元素使用媒体查询指定应该下载哪个图像。另一方面，浏览器开发人员更喜欢现有浏览器的扩展。IMG标记的形式是srcset，这是一种语法，让开发人员列出可用的映像，由浏览器来决定下载哪个。

这件事持续了很长一段时间。与此同时，FilityGroup的开发人员开始组装一个名为“PictuRefill”的填充，包含了前一种语法。

但你瞧，已经找到了解决办法。或者说是妥协。HTML规范现在有了两个语法的稍微修改的版本，它们已经在浏览器中实现了。就在最近，PictuRefill 2.0发布以反映规范中的变化。

衢州高端网站开发在本文中，我们将介绍如何根据HTML规范实现响应性图像的两个版本，使用PictuRefill2.0来确保完全的浏览器支持和WordPress内置的媒体特性。我们还将介绍一个插件，它可以帮助您完成此任务。

下面有很多代码。我把它都汇编成了供日后参考的要点.

开始

首先，只有在使用响应主题。来自优雅主题的大多数主题在默认情况下都是响应性的。我将在整个教程中使用Divi主题，但是对于任何响应性的主题，只要做一些修改，这段代码都可以工作。

您要做的第一件事是找出您的响应断点当前存在的位置。这些是布局将更改的屏幕大小，并在主题的CSS样式表中指定。对于Divi，这些主要断点存在于：

1405 px，981 px，768 px，479 px

如果您不知道主题的断点，请尝试在“style.css”文件中搜索@媒体。以上断点在优雅的主题上应该能很好地工作。

下一步是确保正在创建这些不同大小的图像。当您上传图片到WordPress时，将自动创建多个大小。我们可以利用这个功能来创建为Pictureill做好准备的图像。

改变这些媒体大小的最简单的方法是设置->媒体。在这里，你会看到三个图像大小：缩略图，中号和大号。缩略图经常在不同的上下文中使用，所以保持原样。但中型和大型可以用来开始。

在“大尺寸”框中，我们将在“最大宽度”文本字段中指定最大断点：1405。对于最大高度，输入“9999”。这让WordPress知道，您希望高度与宽度成比例，而不是裁剪宽度。我们可以为我们的下一个断点981 px使用中等大小，再次将最大高度设置为“9999”。

编辑媒体设置

我们遇到了第一个问题。WordPress中没有足够的默认大小来容纳所有断点。我们得自己创造几个。

创建图像大小

是时候进入一些实际的代码了。这段代码应该添加到主题的Functions.php文件的底部。当然，以下所有代码也可以在自定义插件中指定，并将同样工作。

我们将使用add_Image_size WordPress函数为其余断点创建图像大小。当新图像上传到WordPress时，这些大小将自动创建。

衢州高端网站开发在这里，我创建了三个新的图像大小来反映剩下的较小的断点。对于每个名称，我都指定了一个名称，后面跟着一个宽度和高度(我在9999中保留了这个宽度和高度)。您会注意到，我指定的“最大”大小不对应于任何断点。这是一种捕获所有大小的图像大于1405像素。

这也是安装再生指甲插件，它将根据添加的大小重新创建现有图像的缩略图。

排队PictuRefill

PictuRefill是一种能确保响应性的图像在任何地方都能工作的多边形填充，即使是在不执行新标准的旧浏览器中。它使用Javascript来实现它的魔力，因此我们必须确保将脚本文件排入主题中。首先，到图片更新下载页面，并下载库的压缩版本。然后，将该文件添加到主题的“js”文件夹中。

之后，转到主题的函数s.php文件并对脚本进行排队。在优雅主题的主题中，只需将这一行代码添加到现有的脚本和样式加载函数中即可。在Divi主题中，将其添加到Functions.php的第153行。

如果使用的是不同的主题，则需要创建一个新函数并添加wp_enQueue_script操作来注册它。

这只是将Pictureill库添加到页面的页脚，这样您就可以开始使用它了。

获取图像Alt标签

在修改媒体输出时，我们希望确保检索分配给图像的ALT文本，并将其放在代码中。我们将通过设置一个函数来实现这一点，该函数检索ALT文本并为我们返回它。

我们在这里所做的就是使用get_post_meta WordPress函数来获取图像的alt文本并对其进行格式化。在任何时候，我们都可以简单地使用get_Image_alt($Image_ID)，并输出指定的图像的ALT文本。我们很快就会用到这个。

使用图片，照片元素

好了，现在是开始使用Pictureill的时候了。我们将首先使用图片，照片元素语法稍后，我们将介绍如何使用IMG语法。

当将图片元素与PictuRefill一起使用时，HTML应该如下所示。

基本上，对于每个图像，我们引入一个来源元素，其中指定图像和相应的媒体查询。当屏幕大小与指定的媒体查询匹配时，该图像将被提取和使用。在本例中，“Large.jpg”将在800像素以上的屏幕上提供，“medium.jpg”将在400到799像素之间的屏幕上提供。这，这个，那，那个IMG标记用于所有其他情况，通常是最小的图像。

如果你想知道为什么有一个奇怪的视频标记中的标记，这是InternetExplorer 9中一个bug的修复。它不会影响任何其他浏览器，但确保代码在那里工作。

构建我们的源阵列

我们将通过构建一个源srcset标签基于WordPress创建的图像大小。让我们创建一个函数，在传递图像ID时，构建一个包含所有图像大小和媒体查询的字符串。

对于每个图像大小，我们使用内置的WordPress函数wp_get_附件_Image_src检索图像的源URL，并将其存储在变量中。然后，我们创建一个新的字符串$srcset，它包含来自wp_get_附件_Image_src的每个图像URL和相应的媒体查询。您会注意到，我没有得到“最小”图像大小的URL。那是故意的。稍后再谈。

对于每个图像大小的媒体查询，我使用它下面的大小作为最小宽度。您还记得，“小”图像大小会创建一个768像素的图像。对于与$img_size关联的媒体查询，我使用的是“Min-Width：468px”。因此，一旦屏幕大小达到468像素，768 px图像就会被加载，依此类推。这将确保始终加载下一个大小。

可以随意调整这些值以匹配您的站点，或者从不需要的字符串中删除图像大小。

构建响应图像短代码

衢州高端网站开发下一步是使用我们创建的函数来实际实现图片元素。最有效的方法是创建一个短代码，给定图像ID和标题，为图片，照片元素。原因我们使用一个短代码是为了确保HTML输出不会被WordPress自动修改，并且是相对未来的证明。

我们最终希望我们的短代码看起来像这样：

为此，我们创建一个函数，将短代码属性传递给函数，然后构建所需的HTML并为其创建一个短代码。总而言之，它看起来是这样的：

这里的add_hostcode操作接受一个属性变量。使用该变量，我们提取短代码属性，为两者提供默认值，然后将id属性转换为变量$id，并将标题转换为$caption。

然后，我们传递这个ID，以添加_图片_源，这是我们在最后一步中创建的函数，并在语法本身中输出字符串。接下来，我们添加一个IMG标记，再次使用wp_get_附件_Image_src检索最小的映像，以便将其用于所有无关的情况。之后，我们在标记中输出标题，并使用get_img_alt函数从EALLER输出ALT文本。

我们都准备好了。考虑到[resp_Image]的缩写，带有一个ID和可选的标题，我们将能够输出一个完整的结构和工作的图片实现。

修改后编辑器输出

最后一步是在POST编辑器中插入新图像时使用此短代码。我们将使用Image_Send_to_Editor过滤器来修改MediaUploader的输出。

这个函数只做一件事。它从上传的图像中获取$id和$caption，并填充我们在最后一步中创建的短代码。

保存此代码后，您可以创建一个新的帖子，并使用媒体上传器像任何其他文件一样上传图像。而不是正常的图像输出，您将看到您的短代码插入。当你发布或预览这篇文章时，你会在你的网站上看到相应的图片。将页面缩放到不同大小，以查看媒体查询对加载哪个图像的影响。

使用IMG句法

当然了!,图片，照片不是在页面中包含响应性图像的唯一方法。还有一个实现使用IMG srcset标记提供一系列图像及其相应的大小。这允许浏览器选择要下载的图像。PictuRefill的输出HTML如下所示。

这似乎有点陌生，但实际上相对简单。第一个属性是“大小”。在这里，我们告诉浏览器我们的图像占用了多少空间。单元“VW”描述视口的百分比。在上面的例子中，我是说当屏幕大小超过1405像素时，图像占我们布局中视图的大约50%(因为边栏和填充占据了其余的50%)。在稍小的屏幕上，在981 px和1405 px之间，图像占屏幕的75%，最后在屏幕尺寸最低的时候，它们占90%。

在.。srcset我们只是提供了一个图像的清单，他们的宽度在他们旁边。根据这些信息，浏览器根据屏幕的大小和像素密度来决定要使用的图像。因此，您不是作为开发人员指定要使用哪个映像，而是向浏览器提供尽可能多的有关图像的信息，并由它来决定。

这种语法实际上更适合WordPress，除非您需要细粒度的控制，否则这可能是可行的方法。它允许浏览器对视网膜显示器、低带宽情况和不寻常的环境做出智能决策。

构建我们的Srcset阵列

与前面的示例非常相似，我们将构建一个可以用于“srcset”属性的图像数组。我们需要做的是列出每一个图像的宽度旁边的图像，并输出为一个列表。

就像图片元素一样，我们正在创建一个函数，并向它传递一个图像ID。从那以后，情况就有点不一样了。我们首先列出我们想要在一个简单数组中使用的大小，从最小的开始移动到最大的。从这里，我们使用wp_get_附件_元数据来获取与映像关联的元数据信息。

然后，使用foreach循环，我们检查键以确保给定图像的大小存在，然后从wp_get_附件_Image_src提取图像源(使用wp_get_附件_Image_src)和图像的宽度。最后一步是构建一个新的图像数组，一个接一个，指定图像URL和宽度，然后返回数组，我们将在我们的短代码函数中使用该数组。

最后，我们的函数输出如下：

构建短代码

下一步是创建一个短代码，它将输出正确的HTML我们将使用与前面相同的短代码语法：

我们还将使用类似的函数来创建我们的短代码，但是返回不同的HTML。

再次，我们将提取必要的短代码参数作为变量。然后，我们将图像ID传递给我们在最后一步中创建的add_srcset_Element函数，以获取图像列表和相关宽度。

从这里开始，我们将创建实际的HTML，从SIZES属性开始，您应该根据自己的断点和大小来修改它。在使用方便的get_img_alt函数输出srcset属性中的图像列表和ALT文本之后，我们将标题添加到图形说明元素。最后，我们使用add_action创建短代码本身。

修改后编辑器输出

由于我们的短代码语法与以前完全相同，所以我们现有的函数没有什么可更改的。

我们只需过滤出媒体编辑器的输出来插入我们创建的短代码。现在，您可以转到POST编辑器，插入一个新图像，并查看IMGsrcset语法。

不同尺寸的图像

使用Pictureill.WP插件

响应图像仍然是相当新的，所以我们还没有看到广泛的应用。但是，如果您正在寻找一个具有PictuRefill良好实现的插件，那么我只看到一个插件：PictuRefill.WP。

这个插件的版本在WordPress.org上仍然使用Pictureill的旧实现，但是有一个GitHub实验硕士它使用PictuRefill2.0。bug仍在被解决，但我没有遇到任何重大问题。

要使用它，请从GitHub下载该文件，然后将其作为一个新插件上传到您的站点上。WP使用上面第二个示例中的IMGsrcset语法。为了使一切正常工作，您需要正确地注册大小和srcset属性，使用插件提供给您访问的pictuRefill_wp_册_srcset函数。只需将此代码片段添加到Functions.php文件中即可：

这将注册我们希望在插件中使用的图像大小数组，包括我们创建的自定义图像大小。它还将修改输出HTML的size属性。每个文件中的最后一个参数是“Full”，这表示应该将这些参数赋值给作为“完整”附加到POST的任何图像。

PictuRefill.WP最重要的一点是，它可以追溯地处理帖子中现有的图像，并使用一些智能缓存来确保页面仍然快速加载。

如果您对使用beta版本有些犹豫，那么当前稳定的插件版本仍然工作得很好，并且很可能在不久的将来看到更新。