EP039. “Program 页面样式收尾与导航链接”

这一讲是收尾性质的小修改，没有新概念。主要做两件事：一是给 single-program.php 里 EP038 加的反向查询结果套上动态标题「Upcoming Biology Events」（Biology 是当前 program 的标题，会随页面变化），并且把标题、分隔线和查询结果整段包进 if ($homepageEvents->have_posts()) 判断里，修掉 EP038 遗留的问题——没有关联 event 的 program 页面之前会显示多余的空标题和分隔线。二是把之前一直是占位符 # 的头部导航 Programs 链接、首页 "Find Your Major" 按钮的 href 补上，并让 Programs 链接跟 About Us / Events 一样，在对应页面高亮显示。

涉及文件

• wp-content/themes/fictional-university-theme/single-program.php （修改）
• wp-content/themes/fictional-university-theme/header.php （修改）
• wp-content/themes/fictional-university-theme/front-page.php （修改）

代码实现

wp-content/themes/fictional-university-theme/single-program.php （修改）

EP038 写的查询语句本身不变，改动的是查询之后紧接着的输出部分：原本是直接 while 循环输出，现在整段（标题 + 分隔线 + while 循环）包进 if ($homepageEvents->have_posts()) 判断里，并且在判断里、循环开始之前，多了两行动态标题的 echo：

$homepageEvents = new WP_Query(array(
  // ...EP038 已经写好的查询参数，包括两个 meta_query filter，不变...
));

// 新增：整段包进 if 判断，并且加动态标题
if ($homepageEvents->have_posts()) {
  echo '<hr class="section-break">';
  echo '<h2 class="headline headline--medium">Upcoming ' . get_the_title() . ' Events</h2>';

  while($homepageEvents->have_posts()) {
    $homepageEvents->the_post(); ?>
    <div class="event-summary">
      <!-- ...event-summary 卡片内容不变，同 EP038... -->
    </div>
  <?php }
}

要点：

• get_the_title() 这里不传参数，取的是当前主查询（single-program.php 外层 while(have_posts())）里"当前这篇 program"的标题，拼接进字符串变成 "Upcoming Biology Events"、"Upcoming Math Events" 这种动态文字。因为在字符串里不能直接插入函数调用，得先把引号闭合、用 . 拼接函数返回值，再重新开引号接上后面的文字（注意 "Upcoming " 和 " Events" 前后都要留空格，get_the_title() 不会自动帮你加空格）。
• if ($homepageEvents->have_posts()) 判断要紧跟在 new WP_Query() 后面判断，用的是 EP038 那个查询对象的 have_posts() 方法（不是裸调用），后面 while 循环里再调一次 have_posts() 是正常的（第一次调用不会消耗数据，只是探测有没有结果）。
• 这样一来，没有关联 event 的 program（比如 English）页面上，if 判断为 false，标题、分隔线、查询结果都不会出现，恢复正常。

[截图：前台某个 program 详情页（如 Biology）底部"Upcoming Biology Events"动态标题及关联活动列表的画面]

wp-content/themes/fictional-university-theme/header.php （修改）

Programs 这个导航项之前是占位符，这一讲补上链接并加高亮判断，写法跟已有的 Events 导航项一致：

<!-- 原本： -->
<li><a href="#">Programs</a></li>

<!-- 改成： -->
<li <?php if (get_post_type() == 'program') echo 'class="current-menu-item"' ?>><a href="<?php echo get_post_type_archive_link('program') ?>">Programs</a></li>

get_post_type_archive_link('program') 生成 program 归档页的链接；get_post_type() == 'program' 判断当前页面是不是 program 相关（单篇 program 或 program 归档页都算），是的话给 <li> 加上 current-menu-item 这个 class，做成跟 Events 导航项一样的高亮效果。

wp-content/themes/fictional-university-theme/front-page.php （修改）

首页顶部大按钮 "Find Your Major" 的链接也是占位符，补上：

<!-- 原本： -->
<a href="#" class="btn btn--large btn--blue">Find Your Major</a>

<!-- 改成： -->
<a href="<?php echo get_post_type_archive_link('program'); ?>" class="btn btn--large btn--blue">Find Your Major</a>

Hook / Function 速查

常见坑

• 如果不把 "Upcoming X Events" 标题和分隔线包进 if ($homepageEvents->have_posts()) 判断里，没有关联任何 event 的 program 页面（比如 English）也会显示这个标题和分隔线，看起来很奇怪、内容却是空的（transcript 里点开 English program 页演示了这个问题）。
• 字符串拼接动态标题时忘记在 "Upcoming" 和 "Events" 前后留空格，会变成 "UpcomingBiology Events" 这种粘在一起的文字。

延伸 / 后续讲座会用到

Section 8 到这里，program 相关的功能（CPT、归档页、双向关联显示）都收尾完成。下一讲（Section 9）开始做 professor 文章类型，会涉及 WordPress 原生的 Featured Image 功能，以及用 ACF 建自定义图片字段、让 WordPress 自动生成多种尺寸/比例的图片。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 8, EP039