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

各位乡亲父老，兄弟姐妹们，大家好！我是老码农，今天咱们聊聊WordPress里那个神奇的 add_image_size() 函数，看看它如何帮咱们定制图片尺寸，以及它在图片裁剪这事儿上扮演的角色。保证让大家听得明白，学得会，用得溜！

一、开胃小菜：add_image_size() 是个啥？

先别急着啃源码，咱们得先搞清楚这 add_image_size() 到底是干嘛的。简单来说，它就是个图片尺寸注册器。你用它来告诉 WordPress： "嘿，老兄，以后给我多生成几种尺寸的图片，我用得着！"

举个例子，你想在你的网站上显示缩略图，但 WordPress 默认的缩略图尺寸太小，或者比例不合你意，这时候 add_image_size() 就派上用场了。

二、源码解读：一层层扒开它的神秘面纱

好，现在咱们开始进入正题，扒一扒 add_image_size() 的源码。别怕，我尽量用最通俗的语言解释，保证你听得懂。

add_image_size() 函数定义在 wp-includes/media.php 文件里。它的基本结构如下：

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'   => (bool) $crop,
    );

    return true;
}

哇，看起来是不是很简单？别被吓跑，我来给你慢慢解释：

function add_image_size(...): 这就是函数定义了，告诉我们这是个函数，名叫 add_image_size。
$name: 这是你给这个尺寸起的名字，比如 ‘my-custom-thumbnail’。这名字很重要，以后你在模板里要靠它来调用这个尺寸的图片。
$width: 图片的宽度，单位是像素。
$height: 图片的高度，单位也是像素。
$crop: 一个布尔值（true 或 false），决定是否对图片进行裁剪。true 表示裁剪，false 表示不裁剪。
global $_wp_additional_image_sizes: 这行代码声明了一个全局变量 $_wp_additional_image_sizes。 WordPress 用这个变量来存储你注册的所有自定义图片尺寸。
$_wp_additional_image_sizes[ $name ] = array(...): 这行代码才是真正干活的。它把你的尺寸信息（宽度、高度、是否裁剪）放到了 $_wp_additional_image_sizes 这个数组里，以你提供的 $name 作为键。
absint( $width ) 和 absint( $height ): 这两个函数的作用是确保宽度和高度都是整数。
(bool) $crop: 这个强制把 $crop 转换成布尔类型。
return true: 告诉我们函数执行成功了。

用人话说就是：

add_image_size() 接收你提供的尺寸信息，然后把这些信息存到一个全局的数组里，方便 WordPress 以后使用。

三、实战演练：手把手教你注册自定义尺寸

理论讲完了，咱们来点实际的。假设你想注册一个宽度为 300 像素，高度为 200 像素，并且裁剪的图片尺寸。你可以这样写代码：

add_action( 'after_setup_theme', 'my_custom_image_sizes' );
function my_custom_image_sizes() {
    add_image_size( 'my-custom-thumbnail', 300, 200, true );
}

这段代码做了什么？

add_action( 'after_setup_theme', 'my_custom_image_sizes' ): 这行代码告诉 WordPress，在主题设置完成后（after_setup_theme），执行 my_custom_image_sizes 这个函数。
function my_custom_image_sizes() { ... }: 这就是我们自定义的函数，用来注册图片尺寸。
add_image_size( 'my-custom-thumbnail', 300, 200, true ): 这行代码调用了 add_image_size() 函数，注册了一个名为 ‘my-custom-thumbnail’ 的图片尺寸，宽度 300 像素，高度 200 像素，并且开启了裁剪。

重点：

这段代码必须放在你的主题的 functions.php 文件里，或者放在一个自定义的插件里。

四、裁剪的奥秘：$crop 参数的乾坤

$crop 参数是 add_image_size() 函数里最关键的一个参数，它决定了图片是否进行裁剪。

$crop = true: 开启裁剪模式。这意味着 WordPress 会尽可能地将图片裁剪到你指定的宽度和高度。如果图片的原始比例和目标比例不一致，WordPress 会裁剪掉多余的部分，以保证图片符合目标尺寸。
$crop = false: 关闭裁剪模式。这意味着 WordPress 会尽可能地保持图片的原始比例。如果图片的原始比例和目标比例不一致，WordPress 会缩放图片，直到图片的宽度或高度达到目标尺寸为止。这意味着最终生成的图片的另一个尺寸可能会小于你指定的尺寸。

举个例子：

假设你注册了一个尺寸：add_image_size( 'my-custom-thumbnail', 300, 200, true );，并且上传了一张原始尺寸为 600×450 像素的图片。

如果 $crop = true: WordPress 会裁剪图片，最终生成的图片尺寸为 300×200 像素。可能会裁剪掉图片顶部或底部的一些内容。
如果 $crop = false: WordPress 会缩放图片，最终生成的图片尺寸为 300×225 像素。宽度达到了 300 像素，但高度只有 225 像素，小于你指定的 200 像素。

裁剪的位置：

默认情况下，WordPress 会从图片的中心位置进行裁剪。但你可以通过插件或者代码来修改裁剪的位置，比如裁剪图片的顶部、底部、左侧或右侧。

五、图片生成：wp_generate_attachment_metadata() 的幕后工作

当你上传一张图片到 WordPress 时，WordPress 会调用 wp_generate_attachment_metadata() 函数来生成各种尺寸的图片。这个函数会读取 $_wp_additional_image_sizes 数组里的信息，然后根据你注册的尺寸，生成对应的图片。

wp_generate_attachment_metadata() 函数定义在 wp-includes/media.php 文件里。它的代码比较复杂，咱们就不深入研究了。你只需要知道，它会读取你通过 add_image_size() 注册的尺寸信息，然后使用 PHP 的 GD 库或 ImageMagick 扩展来生成图片。

六、模板调用：让自定义尺寸发挥作用

注册了自定义尺寸，生成了对应的图片，接下来就是在你的模板里调用这些图片了。你可以使用 wp_get_attachment_image() 函数来获取指定尺寸的图片。

<?php
$image_id = get_post_thumbnail_id(); // 获取特色图像的 ID
$image_url = wp_get_attachment_image_src( $image_id, 'my-custom-thumbnail' ); // 获取 'my-custom-thumbnail' 尺寸的图片 URL

if ( $image_url ) {
    echo '<img src="' . esc_url( $image_url[0] ) . '" width="' . esc_attr( $image_url[1] ) . '" height="' . esc_attr( $image_url[2] ) . '" alt="' . get_the_title() . '">';
}
?>

这段代码做了什么？

get_post_thumbnail_id(): 获取当前文章的特色图像（Featured Image）的 ID。
wp_get_attachment_image_src( $image_id, 'my-custom-thumbnail' ): 获取 ID 为 $image_id 的图片，并且指定尺寸为 ‘my-custom-thumbnail’。这个函数会返回一个数组，包含图片的 URL、宽度和高度。
echo '<img src="' . esc_url( $image_url[0] ) . '" ...>: 输出 HTML 的 <img> 标签，显示图片。 esc_url() 和 esc_attr() 函数用于对 URL 和属性进行安全转义，防止 XSS 攻击。

七、常见问题及解决方案

问题：注册了自定义尺寸，但图片没有生成。
- 原因： 你可能在上传图片之前注册了自定义尺寸。WordPress 只会为新上传的图片生成自定义尺寸。
- 解决方案： 重新生成缩略图。你可以使用 Regenerate Thumbnails 这样的插件来批量重新生成缩略图。
问题：生成的图片比例不对，或者裁剪的位置不理想。
- 原因： 图片的原始比例和目标比例不一致，或者裁剪的位置不符合你的要求。
- 解决方案： 调整 $crop 参数，或者使用插件或代码来修改裁剪的位置。
问题：我想删除某个自定义尺寸。
- 解决方案： 你可以使用 remove_image_size() 函数来删除自定义尺寸。但要注意，这个函数只能删除你通过 add_image_size() 添加的尺寸，不能删除 WordPress 默认的尺寸。
```
function remove_my_custom_image_size() {
    remove_image_size( 'my-custom-thumbnail' );
}
add_action( 'after_setup_theme', 'remove_my_custom_image_size' );
```
注意： 删除尺寸后，已经生成的图片文件不会自动删除，你需要手动删除或者使用插件来清理。

八、进阶技巧：更多玩法等你探索

条件判断： 你可以根据不同的情况，注册不同的图片尺寸。比如，你可以根据文章的类型，注册不同的缩略图尺寸。

function my_conditional_image_sizes() {
    if ( is_singular( 'post' ) ) {
        add_image_size( 'post-thumbnail', 600, 400, true );
    } elseif ( is_singular( 'page' ) ) {
        add_image_size( 'page-thumbnail', 800, 600, false );
    }
}
add_action( 'after_setup_theme', 'my_conditional_image_sizes' );

自定义裁剪位置： 你可以使用 image_resize_dimensions 过滤器来修改裁剪的位置。这个比较高级，需要有一定的 PHP 基础。

add_filter( 'image_resize_dimensions', 'my_custom_crop_position', 10, 6 );
function my_custom_crop_position( $default, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
    // 你的自定义裁剪逻辑
    return $default;
}

使用 WebP： WebP 是一种更先进的图片格式，可以提供更好的压缩率和图像质量。你可以使用插件或者代码来生成 WebP 格式的图片。

九、总结

add_image_size() 函数是 WordPress 里一个非常强大和灵活的工具，它可以让你轻松地定制图片尺寸，满足各种不同的需求。掌握了 add_image_size() 函数，你就可以更好地控制你的网站的图片显示效果，提升用户体验。

表格总结:

参数	类型	描述
`$name`	string	图片尺寸的名称。这个名称必须是唯一的，并且只能包含小写字母、数字和连字符。
`$width`	integer	图片的宽度，单位是像素。
`$height`	integer	图片的高度，单位也是像素。
`$crop`	boolean	是否对图片进行裁剪。 `true` 表示裁剪，`false` 表示不裁剪。如果设置为 `true`，WordPress 会尽可能地将图片裁剪到你指定的宽度和高度。如果设置为 `false`，WordPress 会尽可能地保持图片的原始比例。

好了，今天的讲座就到这里。希望大家有所收获！记住，实践才是检验真理的唯一标准。赶紧动手试试吧！如果有什么问题，欢迎随时提问。下课！

发表回复 取消回复

发表回复取消回复