本文档介绍了WordPress中图像的处理方法，包括从媒体库获取图像代码、URL、对齐方式、标题以及WebP支持。重点面向开发者，提供了核心函数和钩子的使用指南。
// 获取缩略图图像代码
echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );
// 获取自定义尺寸图像代码
echo wp_get_attachment_image( $attachment->ID, array(640, 480) );
// 获取图像URL并输出
<?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; ?>
// 使用过滤器将JPG子尺寸输出为WebP
<?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' );
?><img alt="" src="" />
To display the image in the Media Library, use <a href="https://developer.wordpress.org/reference/functions/wp_get_attachment_image/">wp_get_attachment_image()</a> function.
echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );You will get the following HTML output with the selected thumbnail size
<img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... />You can specify other size such as ‘full’ for original image or ‘medium’ and ‘large’ for the sizes set at Settings > Media in the Administration Screen, or any pair of width and height as array. You’re also free to set custom size strings with add_image_size() ;
echo wp_get_attachment_image( $attachment->ID, array(640, 480) );If you want to get the URL of the image, use <a href="https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/">wp_get_attachment_image_src()</a>. It returns an array (URL, width, height, is_intermediate), or false, if no image is available.
<?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; ?>When adding the image in your site, you can specify the image alignment as right, left, center or none. WordPress core automatically adds CSS classes to align the image:
This is the sample output when center align si chosen
<img class="aligncenter size-full wp-image-131" src= ... />In order to take advantage of these CSS classes for alignment and text wrapping, your theme must include the styles in a stylesheet such as the main stylesheet file. You can use the style.css bundled with official themes such as Twenty Seventeen for reference.
If a Caption was specified to image in the Media Library, HTML img element was enclosed by the shortcode and .
<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>And, it will be rendered as in HTML as the figure tag:
<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>Similar to alignments, your theme must include following styles.
wp-captionwp-caption-textWordPress 5.8 introduces support for WebP image format which provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth. WebP is supported in all modern browsers according to caniuse.
When images are uploaded, WordPress generates smaller sub sizes as defined using add_image_size(). By default, WordPress will generate these sub sizes in the same format as the original. Because of the performance benefits of the WebP format, it may be desirable for sub sizes to be generated in WebP instead of the original format.
image_editor_output_format filter hook can be used to change the file format used for image sub sizes. This can be used to switch all sub sizes to WebP, or any other desired format (JPEG, etc.).
The following example shows how to generate all sub sizes for JPG images using WebP:
<?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' );Note: both the GD and ImageMagick libraries support the WebP format in both lossy and lossless. However, only ImageMagick supports animated images.
Setting the output format to WebP will verify if the web server supports it, and if not it will not change the format, i.e. won’t work.
<a href="https://developer.wordpress.org/reference/functions/wp_get_attachment_image/">wp_get_attachment_image()</a><a href="https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/">wp_get_attachment_image_src()</a>