图片

本节介绍媒体库中图片的处理方法。如果您想在主题目录内显示图像文件，只需使用 img 标签指定位置，并使用 CSS 进行样式设置。
<img alt="" src="" />

获取 img 代码

要在媒体库中显示图片，请使用 wp_get_attachment_image() 函数。

echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );

您将获得以下 HTML 输出，包含所选缩略图尺寸

<img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... />

您可以指定其他尺寸，例如原始图像的 'full' 或“设置 > 媒体”中设置的'medium'和'large'尺寸的 管理屏幕中的任何宽度和高度对。您也可以使用 add_image_size() 自由设置自定义尺寸字符串；

echo wp_get_attachment_image( $attachment->ID, array(640, 480) );

获取图片 URL

如果您想获取图片的 URL，请使用 wp_get_attachment_image_src()。如果不可用，它返回一个数组（URL、宽度、高度、is_intermediate），或 false。

<?php 
$image_attributes = wp_get_attachment_image_src( $attachment->ID );
if ( $image_attributes ) : ?>
    <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
<?php endif; ?>

对齐方式

在您的站点中添加图片时，您可以指定图片的对齐方式为右、左、居中或无。WordPress 核心会自动添加 CSS 类以对齐图片：

  • alignright
  • alignleft
  • aligncenter
  • alignnone

这是选择居中对齐时的示例输出

<img class="aligncenter size-full wp-image-131" src= ... />

为了利用这些 CSS 类进行对齐和文本换行，您的主题必须在样式表中包含样式，例如 主样式表文件。您可以使用官方主题（如 Twenty Seventeen）附带的style.css作为参考。

说明文字

如果在媒体库中为图片指定了说明文字，HTML img 元素将被 [caption]和 [/caption]短代码包围。

<div class="mceTemp">
  <dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px">
    <dt class="wp-caption-dt">
      <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" />
    </dt>
    <dd class="wp-caption-dd">Sun set over the sea</dd>
  </dl>
</div>

并且，它将作为 HTML 中的 figure 标签进行渲染：

<figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter">
  <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... />
  <figcaption class="wp-caption-text">Sun set over the sea</figcaption>
</figure>

与对齐方式类似，您的主题必须包含以下样式。

  • wp-caption
  • wp-caption-text

WebP 支持和子尺寸图像输出的默认 MIME 类型

WordPress 5.8引入了对 WebP图像格式的支持，该格式可为网络上的图片提供更好的无损和有损压缩。与 JPEG 或 PNG 等效文件相比，WebP 图像平均小约 30%，从而产生速度更快且使用更少带宽的站点。根据 caniuse，所有现代浏览器都支持 WebP。

上传图片时，WordPress 会根据add_image_size()定义生成较小的子尺寸。默认情况下，WordPress 将使用与原始文件相同的格式生成这些子尺寸。由于 WebP 格式的性能优势，可能希望以 WebP 而不是原始格式生成子尺寸。

可以使用 image_editor_output_format过滤器钩子来更改用于图像子尺寸的文件格式。这可用于将所有子尺寸切换为 WebP 或任何其他所需格式（JPEG 等）。

以下示例展示了如何使用 WebP 生成所有 JPG 图像的次级大小：

<?php
function wporg_image_editor_output_format( $formats ) {
    $formats['image/jpg'] = 'image/webp';
 
    return $formats;
}
add_filter( 'image_editor_output_format', 'wporg_image_editor_output_format' );

注意：GD 和 ImageMagick 库均支持 WebP 格式的有损和无损模式。但是，只有 ImageMagick 支持动画图像。

将输出格式设置为 WebP 将验证网络服务器是否支持它，如果不支持则不会更改格式，即不起作用。

参考资料