EP050. “用 get_template_part() 拆出 content-event.php 局部模板”

首页「Upcoming Events」、All Events 归档、Past Events 归档、Program 详情页「Upcoming Events」这四个地方，都各自重复贴了一份一模一样的 event-summary 卡片 HTML/PHP。这一讲把这段代码抽到新建的 template-parts/content-event.php，四个地方改成调用 get_template_part() 来引入，进一步减少重复代码。顺带讲了 get_template_part() 的第二个参数（specialty name）用法，以及「什么时候该用自定义函数（比如上几讲的 pageBanner()），什么时候该用 get_template_part()」这个选择题。

涉及文件

• wp-content/themes/fictional-university-theme/template-parts/content-event.php （新建）
• wp-content/themes/fictional-university-theme/front-page.php （修改，只改「Upcoming Events」区块；「From Our Blogs」那个区块用的是博客文章卡片，不是 event，这一讲没动它）
• wp-content/themes/fictional-university-theme/archive-event.php （修改）
• wp-content/themes/fictional-university-theme/page-past-events.php （修改）
• wp-content/themes/fictional-university-theme/single-program.php （修改）

代码实现

新建的局部模板文件，内容就是从上面四处剪下来的那段 event-summary 卡片代码：

<!-- wp-content/themes/fictional-university-theme/template-parts/content-event.php -->
<div class="event-summary">
  <a class="event-summary__date t-center" href="#">
    <span class="event-summary__month"><?php
      $eventDate = new DateTime(get_field('event_date'));
      echo $eventDate->format('M')
    ?></span>
    <span class="event-summary__day"><?php echo $eventDate->format('d') ?></span>
  </a>
  <div class="event-summary__content">
    <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
    <p><?php if (has_excerpt()) {
        echo get_the_excerpt();
      } else {
        echo wp_trim_words(get_the_content(), 18);
        } ?> <a href="<?php the_permalink(); ?>" class="nu gray">Learn more</a></p>
  </div>
</div>

front-page.php 的「Upcoming Events」区块——while 循环里原本一整块 event-summary div 被删掉，改成 get_template_part() 调用，用的是两参数写法：

// wp-content/themes/fictional-university-theme/front-page.php

while($homepageEvents->have_posts()) {
  $homepageEvents->the_post();
  get_template_part('template-parts/content', 'event'); // 修改：原本是整块 event-summary div
}

archive-event.php、page-past-events.php、single-program.php 三处用的是单参数写法，直接指向完整 slug：

// wp-content/themes/fictional-university-theme/archive-event.php
while(have_posts()) {
  the_post();
  get_template_part('template-parts/content-event'); // 修改：原本是整块 event-summary div
}

// wp-content/themes/fictional-university-theme/page-past-events.php
while($pastEvents->have_posts()) {
  $pastEvents->the_post();
  get_template_part('template-parts/content-event'); // 修改
}

// wp-content/themes/fictional-university-theme/single-program.php（Upcoming Events 区块）
while($homepageEvents->have_posts()) {
  $homepageEvents->the_post();
  get_template_part('template-parts/content-event'); // 修改
}

要点：

• get_template_part() 第一个参数只需要文件的 slug（不带 .php），会去主题文件夹里找对应文件。
• 第二个参数是可选的「specialty name」：传了以后 WordPress 会去找 第一参数-第二参数.php 这个文件名。transcript 里演示过如果第二参数用 get_post_type() 这种函数动态生成，可以让同一行调用代码在不同 post type 下自动切换去加载 content-event.php / content-professor.php 等不同文件（比如搜索结果页很适合这样用），但这一讲首页这里因为固定就是 event，最终代码直接写死字符串 'event'，没有用 get_post_type() 动态生成。
• 「From Our Blogs」区块用的是博客文章卡片（date 徽章样式、链接都不一样），跟 event 卡片是两回事，这一讲没有改它。

Hook / Function 速查

常见坑

• get_template_part() 的参数不需要加 .php 副档名，只写 slug 名。
• 别把「From Our Blogs」和「Upcoming Events」这两个都带 event-summary 类名的区块搞混——外观像但内容和字段来源不一样，这一讲只重构了 event 那一份。

延伸 / 后续讲座会用到

transcript 结尾总结了这两讲的去重方法怎么选：需要传参数、让重复代码根据参数做不同事情的场景（比如上几讲的 page banner）用自定义函数；纯粹是一整块不会变化的 HTML/PHP 重复，就用 get_template_part()。往后章节会开始做 Campuses 自定义文章类型 + Google Map 互动地图（下个 Section），以及 Ajax 直播搜索、REST API、用户角色权限等内容。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 10, EP050