EP043. “套用自定义图片尺寸与手动裁切”
🔒 登录后可标记已读上一讲注册好的 professorLandscape（400×260）和 professorPortrait（480×650）这两个自定义图片尺寸， 这一讲才真正在前端用起来：professor 详情页用竖版（portrait），program 详情页的教授卡片网格用横版 （landscape）。改完之后顺带讲图片裁切：add_image_size() 默认永远是从正中心裁，如果某张照片主体不在 正中间（比如偏一侧），可以给 add_image_size() 第四个参数传一个数组（如 array('left', 'top')）来指定 裁切的水平/垂直基准点，但讲师说自己实际项目里不用这个方式，更推荐装 Manual Image Crop 这个插件手动 在后台逐张图调整裁切区域，因为「不同照片没有一套万能的裁切策略」。
涉及文件
wp-content/themes/fictional-university-theme/single-professor.php（修改，the_post_thumbnail()指定尺寸昵称）wp-content/themes/fictional-university-theme/single-program.php（修改，the_post_thumbnail_url()指定尺寸昵称）
代码实现
single-professor.php（修改）
the_post_thumbnail() 加上尺寸昵称参数，从默认的原图改成竖版裁切：
<?php the_post_thumbnail('professorPortrait'); ?>single-program.php（修改）
教授卡片网格里的 the_post_thumbnail_url() 同样加上尺寸昵称，改成横版：
<img class="professor-card__image" src="<?php the_post_thumbnail_url('professorLandscape') ?>">[截图：Manual Image Crop 插件在后台媒体库里手动调整某张教授照片裁切区域的界面]
Hook / Function 速查
| 名称 | 类型 | 用途 |
|---|---|---|
the_post_thumbnail($size) | WP 内建 function | 传入尺寸昵称字符串，输出对应裁切版本的 <img> |
the_post_thumbnail_url($size) | WP 内建 function | 传入尺寸昵称字符串，输出对应裁切版本的图片 URL |
常见坑
- 前面几讲调用
the_post_thumbnail()/the_post_thumbnail_url()时不传尺寸昵称，默认拿到的是full
原图（教授照片原图接近 5000×3000 像素），不指定尺寸就等于白注册了add_image_size()。 - WordPress 默认裁切永远是从图片正中心裁，如果照片主体偏一侧，中心裁切效果会不理想。
- 用 Manual Image Crop 插件手动裁切后，直接刷新浏览器看不到新裁切结果——因为新生成的图片文件用的
是跟旧版本完全相同的文件名，浏览器会读缓存。必须做一次强制刷新（按住 Shift 点刷新按钮）才能看到
新裁切的版本。这不是 WordPress 或插件的 bug，纯粹是浏览器缓存行为。
延伸 / 后续讲座会用到
下一讲 EP044 会继续处理图片相关功能：把页面顶部的 page banner 背景图和副标题也做成动态的， 而且这次不能再用特色图片字段（professor 的特色图片已经被头像占用了），需要用 ACF 新建专门的 图片字段来承载 banner 背景图。
Sources
Udemy：
- Become a WordPress Developer: Unlocking Power With Code — Section 9, EP043