EP049. “把 pageBanner() 套用到项目里剩下的所有模板”

首页 › WordPress 开发课程 › 自定义字段与 PHP WARNING · EP049

约 11 分钟· #EP049#自定义字段与 PHP WARNING

前面几讲只在 single-professor.php 和 page.php 上用了 pageBanner() 函数。这一讲把项目里剩下所有还在用写死 page-banner div 的模板过一遍，全部删掉重复代码，改成调用 pageBanner()：需要动态文字的模板（归档页、博客首页）通过 $args 数组传 title / subtitle；单篇文章类模板（event、program、blog post）不需要任何自定义文字，直接裸调 pageBanner()，走函数自带的智能默认值即可。

📌 我按 sources/Section 10/38-2021/38-end → 39-2021/39-end 逐个文件 diff 核实，实际改动的模板一共 8 个，比这一讲的口头介绍顺序多列出了 archive.php（作者/分类归档）和 index.php（博客首页）——transcript 原文其实也走到了这两个文件（"archive.org PHP"、"index PHP，这个文件控制我们博客的首页"），下面按 diff 结果如实列出。

涉及文件

wp-content/themes/fictional-university-theme/archive-event.php （修改）
wp-content/themes/fictional-university-theme/archive-program.php （修改）
wp-content/themes/fictional-university-theme/archive.php （修改，作者/分类归档页）
wp-content/themes/fictional-university-theme/index.php （修改，博客首页）
wp-content/themes/fictional-university-theme/page-past-events.php （修改）
wp-content/themes/fictional-university-theme/single-event.php （修改）
wp-content/themes/fictional-university-theme/single-program.php （修改）
wp-content/themes/fictional-university-theme/single.php （修改，单篇博客文章）

代码实现

每个文件都是同一个模式：删掉原本写死的 <div class="page-banner">...</div> 整块，换成 get_header() 后紧接着调用 pageBanner()。以下按文件列出调用方式（其余模板代码不变，不重复贴）：

// wp-content/themes/fictional-university-theme/archive-event.php
get_header();
pageBanner(array(
  'title' => 'All Events',
  'subtitle' => 'See what is going on in our world.'
));

// wp-content/themes/fictional-university-theme/archive-program.php
get_header();
pageBanner(array(
  'title' => 'All Programs',
  'subtitle' => 'There is something for everyone. Have a look around.'
));

// wp-content/themes/fictional-university-theme/archive.php
get_header();
pageBanner(array(
  'title' => get_the_archive_title(),
  'subtitle' => get_the_archive_description()
));

// wp-content/themes/fictional-university-theme/index.php
get_header();
pageBanner(array(
  'title' => 'Welcome to our blog!',
  'subtitle' => 'Keep up with our latest news.'
));

// wp-content/themes/fictional-university-theme/page-past-events.php
get_header();
pageBanner(array(
  'title' => 'Past Events',
  'subtitle' => 'A recap of our past events.'
));

// wp-content/themes/fictional-university-theme/single-event.php
// wp-content/themes/fictional-university-theme/single-program.php
// wp-content/themes/fictional-university-theme/single.php
  while(have_posts()) {
    the_post();
    pageBanner(); // 不需要自定义文字，直接用函数的智能默认值
     ?>

要点：

archive.php 是唯一一处要小心的：原本模板用的是 the_archive_title() / the_archive_description()（the_ 开头的函数会直接输出，不能塞进数组当值）。改成传参时必须换成 get_the_archive_title() / get_the_archive_description()（get_ 开头返回值，不直接输出）。transcript 强调这是 WordPress 里的通用规律：十有八九，只要看到 the_xxx() 直接输出的函数，都有一个对应的 get_the_xxx() 返回值版本可以用在需要拿到值而不是直接打印的场景。
归档页（archive.php）和博客首页（index.php）不需要传 photo，因为 EP048 加的 AND !is_archive() AND !is_home() 防护条件已经确保这两类页面一律 fallback 到默认海洋图。

Hook / Function 速查

名称	类型	用途
`get_the_archive_title()`	WP 内建 function（返回值，需要放进变量/数组，不能直接输出）	返回当前归档页标题文字（例如「Category: Awards」）
`get_the_archive_description()`	WP 内建 function（返回值）	返回当前归档页的描述文字

常见坑

想传 title/subtitle 给 pageBanner() 时如果直接抄 the_archive_title() / the_archive_description() 这类 the_ 开头的函数，会在数组赋值那一行直接把内容打印出来，而不是把值存进 $args 数组——必须换成对应的 get_the_xxx() 版本。

延伸 / 后续讲座会用到

下一讲 EP050 会发现这些模板（以及首页）里还各自重复了一份 event-summary 卡片的 HTML/PHP，进一步用 get_template_part() 把这段代码抽成独立的局部模板文件。

Sources

Udemy：

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