EP042. “特色图片（Featured Image）与自定义图片尺寸”

给每位教授关联一张照片。WordPress 的「特色图片」（featured image，也叫 post thumbnail）默认对自定义 文章类型是关闭的，这一讲分两步启用它：主题层面 add_theme_support('post-thumbnails')，加上 professor 这个文章类型本身的 supports 数组里加 thumbnail。启用后在 professor 详情页和 program 详情页的教授列表里分别输出这张图。同时讲了 WordPress 默认会给每张上传的图自动生成 4 种尺寸副本， 而我们可以用 add_image_size() 再注册自己需要的尺寸（比如教授头像用的横版、竖版裁切），但这个规则 只对以后新上传的图生效，已经传上去的旧图不会被追溯生成新尺寸——这就是为什么需要装 Regenerate Thumbnails 这个插件来补跑一次。

涉及文件

• wp-content/themes/fictional-university-theme/functions.php （修改，启用 post-thumbnails + 注册两个自定义图片尺寸）
• wp-content/mu-plugins/university-post-types.php （修改，professor 的 supports 数组加 thumbnail）
• wp-content/themes/fictional-university-theme/single-professor.php （修改，改成两栏布局并输出特色图）
• wp-content/themes/fictional-university-theme/single-program.php （修改，教授列表改成带图片的卡片网格）

代码实现

functions.php（修改）

加在 university_features() 函数里，add_theme_support('title-tag') 后面：

function university_features() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  add_image_size('professorLandscape', 400, 260, true);
  add_image_size('professorPortrait', 480, 650, true);
}

add_image_size($name, $width, $height, $crop) 四个参数：尺寸昵称（自己起名，以后前端引用就靠这个名字）、 宽度、高度、是否裁切。$crop 传 true 会强制裁切成刚好这个宽高比（默认从图片正中心裁），传 false （默认值）只会等比缩放限制在这个最大宽高内，不会精确等于这个尺寸。

[截图：wp-admin 后台编辑某位 professor 时，右侧出现的"设置特色图片"面板]

university-post-types.php（修改）

professor 的 supports 数组加一项 thumbnail（不是 post-thumbnail，就是单纯 thumbnail）：

'supports' => array('title', 'editor', 'thumbnail'),

single-professor.php（修改）

把原本单栏的「特色图 + 正文」拆成两栏布局，图占三分之一宽，正文占三分之二宽：

      <div class="generic-content">
        <div class="row group">

          <div class="one-third">
            <?php the_post_thumbnail(); ?>
          </div>

          <div class="two-thirds">
            <?php the_content(); ?>
          </div>

        </div>
      </div>

（这里还没指定图片尺寸昵称，the_post_thumbnail() 不带参数默认用 WordPress 内建的 full 尺寸， 也就是原图——这一讲先跑通功能，指定具体尺寸留到下一讲 EP043。）

[截图：前台某位教授详情页，左侧三分之一栏显示教授照片、右侧三分之二栏显示正文的两栏布局画面]

single-program.php（修改）

上一讲 related professors 查询的 while 循环，从纯文字列表改成带图片的卡片网格，外层套一个 <ul class="professor-cards">：

        echo '<ul class="professor-cards">';
        while($relatedProfessors->have_posts()) {
          $relatedProfessors->the_post(); ?>
          <li class="professor-card__list-item">
            <a class="professor-card" href="<?php the_permalink(); ?>">
              <img class="professor-card__image" src="<?php the_post_thumbnail_url() ?>">
              <span class="professor-card__name"><?php the_title(); ?></span>
            </a>
          </li>
        <?php }
        echo '</ul>';

<span class="professor-card__name"> 用 CSS 叠在图片上面显示教授姓名。这里同样先没指定尺寸昵称， the_post_thumbnail_url() 默认拿到的也是原图（实测将近 5000×3000 像素，太大，下一讲会改成用 professorLandscape 这个自定义尺寸）。

[截图：前台某个 program 详情页底部相关教授卡片网格，每张卡片带照片和叠字姓名的画面]

Hook / Function 速查

常见坑

• 只在 functions.php 加 add_theme_support('post-thumbnails') 还不够——那只对普通博客文章生效，
  自定义文章类型（比如 professor）还必须额外在 register_post_type() 的 supports 数组里加 thumbnail，
  否则编辑页根本不会出现「设置特色图片」这个功能框。
• add_image_size() 注册的新尺寸只对之后新上传的图片生效，不会追溯处理已经上传过的旧图——旧图
  的 uploads 文件夹里还是只有原图加默认的 4 个尺寸，没有新尺寸的副本。
• 想让旧图也补生成新尺寸，需要装 Regenerate Thumbnails 这个插件（认准安装量超过一百万的那个），
  在后台 Tools → Regenerate Thumbnails 点一下按钮，等它跑完。

延伸 / 后续讲座会用到

下一讲 EP043 会把 the_post_thumbnail() / the_post_thumbnail_url() 换成实际带尺寸昵称的调用 （professorPortrait / professorLandscape），并介绍 Manual Image Crop 这个插件来手动控制每张图 不同尺寸的裁切位置。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 9, EP042