阐述 WordPress `add_image_size()` 函数的源码：如何注册新的图片尺寸，并解释其在 `functions.php` 中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

同学们，早上好！今天咱们来聊聊WordPress里一个非常重要，但又经常被忽略的小家伙——add_image_size()。它就像个魔术师，能变出各种尺寸的图片，让你的网站在不同设备上都显得那么完美。

`add_image_size()`：WordPress 图片尺寸的魔术师

想象一下，你的网站上传了一张1920×1080的大图，然后在文章列表中，你也用这张图，那是不是有点浪费？不仅加载慢，而且显示效果也不好。add_image_size()就是解决这个问题的。它可以让你定义不同的图片尺寸，WordPress会自动生成这些尺寸的图片，方便你在不同的场景下使用。

源码剖析：`add_image_size()` 的内心世界

我们先来看看 add_image_size() 的源码，了解它到底是怎么工作的。虽然我们不会逐行解读，但会抓住关键点。

/**
 * Adds a new image size.
 *
 * @since 2.9.0
 *
 * @global array $_wp_additional_image_sizes Holds all of the registered image sizes.
 *
 * @param string  $name   Image size identifier.
 * @param int     $width  Image width in pixels.
 * @param int     $height Image height in pixels.
 * @param bool    $crop   Optional. Whether to crop images to specified height and width or resize.
 *                        An array can be passed to enable cropping from different positions.
 *                        Default false.
 * @return bool True on success, false on failure.
 */
function add_image_size( $name, $width = 0, $height = 0, $crop = false ) {
    global $_wp_additional_image_sizes;

    $_wp_additional_image_sizes[ $name ] = array(
        'width'  => absint( $width ),
        'height' => absint( $height ),
        'crop'   => $crop,
    );

    return true;
}

简化一下，我们可以看到 add_image_size() 主要做了这么几件事：

接收参数： 接收图片尺寸的名字 ($name)、宽度 ($width)、高度 ($height) 和是否裁剪 ($crop)。
存储尺寸信息： 将这些信息存储在一个全局变量 $_wp_additional_image_sizes 中。这个变量是一个数组，用来保存所有注册的图片尺寸。

就这样？是的，就这么简单。它并没有直接生成图片，只是告诉 WordPress，嘿，我需要这些尺寸的图片，你准备一下。

参数详解：像点菜一样定制图片尺寸

add_image_size() 接受四个参数，我们来详细看看：

$name (string, required): 图片尺寸的名称。这个名字要唯一，方便你在代码中调用。比如，'my-custom-thumbnail'、'featured-image' 等等。起名字的时候尽量有意义，方便以后维护。
$width (int, optional): 图片的宽度，单位是像素。默认值是 0。如果设置为0，表示不限制宽度。
$height (int, optional): 图片的高度，单位是像素。默认值是 0。如果设置为0，表示不限制高度。
$crop (bool|array, optional): 是否裁剪图片。默认值是 false。
- false：不裁剪，按照比例缩放图片。
- true：裁剪图片，确保图片的宽高都符合指定的尺寸。裁剪的中心点默认是图片的中心。
- array：允许你指定裁剪的位置。数组的格式是 array( 'x_crop_position', 'y_crop_position' )，其中 'x_crop_position' 可以是 'left'、'center'、'right'，'y_crop_position' 可以是 'top'、'center'、'bottom'。

我们用一个表格来总结一下：

参数	类型	是否必须	描述
`$name`	string	是	图片尺寸的名称，必须唯一。
`$width`	int	否	图片的宽度，单位是像素。默认值是 0，表示不限制宽度。
`$height`	int	否	图片的高度，单位是像素。默认值是 0，表示不限制高度。
`$crop`	bool/array	否	是否裁剪图片。`false` 表示不裁剪，`true` 表示裁剪，`array` 表示指定裁剪位置。

实战演练：在 `functions.php` 中注册图片尺寸

现在，我们来实际操作一下，在 functions.php 文件中注册一些新的图片尺寸。

<?php
/**
 * functions.php
 */

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
  add_image_size( 'my-custom-thumbnail', 200, 150, true ); // 裁剪
  add_image_size( 'my-full-width', 1200, 0, false ); // 不裁剪，宽度 1200px，高度不限
  add_image_size( 'my-square', 300, 300, true, array( 'left', 'top' ) ); // 裁剪，左上角对齐
}

这段代码做了什么？

add_action( 'after_setup_theme', 'my_theme_setup' );：这行代码的意思是，在主题设置完成之后，执行 my_theme_setup() 函数。 after_setup_theme 是一个 WordPress 的 action hook，它在主题初始化之后被触发。
my_theme_setup() 函数： 这个函数是我们自定义的，用来注册图片尺寸。
add_image_size()： 我们使用了三次 add_image_size() 函数，分别注册了三个不同的图片尺寸：
- 'my-custom-thumbnail'：宽度 200px，高度 150px，裁剪。
- 'my-full-width'：宽度 1200px，高度不限，不裁剪。
- 'my-square'：宽度 300px，高度 300px，裁剪，左上角对齐。

重要提示： 注册完新的图片尺寸后，你需要重新生成缩略图。WordPress 不会自动为已经上传的图片生成新的尺寸。你可以使用一些插件，比如 "Regenerate Thumbnails"，来批量重新生成缩略图。

在模板中使用自定义图片尺寸

注册了图片尺寸之后，我们就可以在模板中使用它们了。WordPress 提供了 wp_get_attachment_image_src() 和 the_post_thumbnail() 函数来获取指定尺寸的图片。

`wp_get_attachment_image_src()`

这个函数可以获取图片的 URL、宽度和高度。

<?php
$image_id = get_post_thumbnail_id(); // 获取文章的特色图像 ID
$image_data = wp_get_attachment_image_src( $image_id, 'my-custom-thumbnail' );

if ( $image_data ) {
  $image_url = $image_data[0];
  $image_width = $image_data[1];
  $image_height = $image_data[2];

  echo '<img src="' . esc_url( $image_url ) . '" width="' . esc_attr( $image_width ) . '" height="' . esc_attr( $image_height ) . '" alt="" />';
}
?>

这段代码做了什么？

get_post_thumbnail_id()： 获取当前文章的特色图像 ID。
wp_get_attachment_image_src()： 根据图片 ID 和尺寸名称，获取图片的信息。
判断 $image_data： 检查是否成功获取了图片信息。
获取图片信息： 从 $image_data 数组中获取图片的 URL、宽度和高度。
输出 <img> 标签： 使用获取到的信息，输出 <img> 标签。

`the_post_thumbnail()`

这个函数可以直接输出 <img> 标签。

<?php
if ( has_post_thumbnail() ) {
  the_post_thumbnail( 'my-custom-thumbnail' );
}
?>

这段代码更加简洁：

has_post_thumbnail()： 检查当前文章是否有特色图像。
the_post_thumbnail()： 如果文章有特色图像，就输出指定尺寸的 <img> 标签。

the_post_thumbnail() 函数还可以接受一些参数，用于设置 <img> 标签的属性。

<?php
if ( has_post_thumbnail() ) {
  the_post_thumbnail( 'my-custom-thumbnail', array( 'class' => 'my-thumbnail' ) );
}
?>

这段代码会给 <img> 标签添加一个 class 属性，值为 my-thumbnail。

裁剪模式详解：让图片更听话

add_image_size() 的 $crop 参数是控制图片裁剪的关键。我们来详细讲解一下不同的裁剪模式。

`crop = false`：不裁剪，等比例缩放

这是默认模式。WordPress 会按照图片的原始比例缩放图片，确保图片不会变形。但是，图片的宽高可能不会完全符合你指定的尺寸。

例如，你设置了 add_image_size( 'my-thumbnail', 200, 150, false );，然后上传了一张 400×300 的图片。WordPress 会将图片缩放到 200×150，刚好符合你的尺寸。

但是，如果你上传了一张 400×200 的图片，WordPress 会将图片缩放到 200×100，宽度符合你的要求，但是高度比你指定的要小。

`crop = true`：裁剪，确保宽高都符合

这种模式会裁剪图片，确保图片的宽高都符合你指定的尺寸。裁剪的中心点默认是图片的中心。

例如，你设置了 add_image_size( 'my-thumbnail', 200, 150, true );，然后上传了一张 400×300 的图片。WordPress 会先将图片缩放到宽度或高度符合你的要求，然后再裁剪掉多余的部分。

在这种情况下，WordPress 可能会先将图片缩放到 200×150，然后裁剪掉多余的部分，或者先将图片缩放到 400×300 的中间尺寸，再裁剪到 200×150。

`crop = array( 'x_crop_position', 'y_crop_position' )`：指定裁剪位置

这种模式允许你指定裁剪的位置。你可以使用 'left'、'center'、'right' 来指定水平方向的裁剪位置，使用 'top'、'center'、'bottom' 来指定垂直方向的裁剪位置。

例如，你设置了 add_image_size( 'my-thumbnail', 200, 150, true, array( 'left', 'top' ) );，然后上传了一张 400×300 的图片。WordPress 会从图片的左上角开始裁剪，确保裁剪后的图片是 200×150。

这种模式非常有用，可以让你更好地控制图片的裁剪效果，避免重要的内容被裁剪掉。

最佳实践：让你的图片尺寸更合理

在使用 add_image_size() 时，有一些最佳实践可以帮助你更好地管理图片尺寸：

选择合适的尺寸： 根据你的网站布局和设计，选择合适的图片尺寸。不要过度使用大尺寸的图片，以免影响网站的加载速度。
使用有意义的名称： 给图片尺寸起一个有意义的名称，方便你在代码中调用。
考虑裁剪模式： 根据图片的特点，选择合适的裁剪模式。如果图片的内容比较重要，尽量避免使用裁剪模式，或者使用指定裁剪位置的模式。
重新生成缩略图： 注册完新的图片尺寸后，一定要重新生成缩略图，否则新的尺寸不会生效。
优化图片： 在上传图片之前，可以使用一些图片优化工具，压缩图片的大小，减少加载时间。

常见问题解答：帮你扫清障碍

问：我注册了新的图片尺寸，但是没有生效？

答：请确保你已经重新生成了缩略图。WordPress 不会自动为已经上传的图片生成新的尺寸。
问：我的图片被裁剪得很难看，怎么办？

答：你可以尝试使用指定裁剪位置的模式，或者调整图片的原始尺寸，使其更符合你指定的尺寸。
问：我可以使用 add_image_size() 注册无限数量的图片尺寸吗？

答：理论上可以，但是不建议这样做。过多的图片尺寸会占用大量的存储空间，并且会影响网站的加载速度。
问：我可以在插件中使用 add_image_size() 吗？

答：可以。但是，请确保你的插件在主题加载之前注册图片尺寸，否则可能会出现问题。

总结：掌握图片尺寸的艺术

add_image_size() 是一个非常强大的函数，它可以让你更好地控制 WordPress 的图片尺寸，提高网站的性能和用户体验。希望通过今天的讲解，大家能够掌握 add_image_size() 的使用方法，让你的网站图片更加完美。

记住，图片是网站的重要组成部分，合理地管理图片尺寸，是优化网站的重要一步。

好了，今天的讲座就到这里，大家有什么问题可以提问。下课！

add_image_size()：WordPress 图片尺寸的魔术师

源码剖析：add_image_size() 的内心世界

参数详解：像点菜一样定制图片尺寸

实战演练：在 functions.php 中注册图片尺寸

在模板中使用自定义图片尺寸

wp_get_attachment_image_src()

the_post_thumbnail()