图片

图片

<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" ... />

您可以指定其他尺寸，例如原始图像的“完整”或“中等”和“大型”，以设置为 设置>媒体 在里面 管理屏幕，或任何一对宽度和高度作为数组。您还可以免费设置自定义尺寸字符串 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 Core自动添加CSS类以对齐图像：

• Alignright
• 对齐
• 居中对齐
• Alignnone

当中心对齐SI时，这是样本输出

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

为了利用这些CSS课程进行对齐和文本包装，您的主题必须在样式表中包含样式，例如 主样式表文件。您可以使用style.css与官方主题捆绑在一起，例如二十十七个供参考。

标题

如果在媒体库中指定了标题为图像，则HTMLimg元素被短代码[标题]和[/catchion]包围。

<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 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 图像格式为网络上的图像提供了改进的无损和有损压缩。WebP图像平均比其JPEG或PNG等效物小约30％，这导致在更快且使用较少带宽的站点中。所有现代浏览器都支持WebP 根据Caniuse。

上传图像时，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将验证Web服务器是否支持它，如果没有，则不会更改格式，即行不通。

参考

• wp_get_attachment_image()
• wp_get_attachment_image_src()
• 帖子和页面中的造型图像
• CSS（法典）