EP016. “通用内页模板 page.php”

之前 page.php 只是占位内容（This is a page not a post + 硬编码标题/内容），这一讲把静态 HTML 模板 interior-page.html 里的头部横幅（page-banner）区块整合进 page.php，让 About Us、Privacy Policy 这类普通页面用上正式设计稿的样式。同时顺手把标题标签（<title>）交给 WordPress 自动生成，并把 header/footer 里几个还是 # 的链接接上真实页面地址。

涉及文件

• wp-content/themes/fictional-university-theme/page.php （修改，整份重写内容）
• wp-content/themes/fictional-university-theme/functions.php （修改，新增 university_features）
• wp-content/themes/fictional-university-theme/header.php （修改，几个链接接上真实地址）
• wp-content/themes/fictional-university-theme/footer.php （修改，几个链接接上真实地址）

代码实现

page.php 从三行占位内容整份重写成下面这样（page-banner + breadcrumb 区块暂时注释掉 + generic-content）：

<?php
// wp-content/themes/fictional-university-theme/page.php

  get_header();

  while(have_posts()) {
    the_post(); ?>

    <div class="page-banner">
    <div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>);"></div>
    <div class="page-banner__content container container--narrow">
      <h1 class="page-banner__title"><?php the_title(); ?></h1>
      <div class="page-banner__intro">
        <p>DONT FORGET TO REPLACE ME LATER</p>
      </div>
    </div>
  </div>

  <div class="container container--narrow page-section">

    <div class="metabox metabox--position-up metabox--with-home-link">
      <p><a class="metabox__blog-home-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Back to About Us</a> <span class="metabox__main">Our History</span></p>
    </div>

    <!--
    <div class="page-links">
      <h2 class="page-links__title"><a href="#">About Us</a></h2>
      <ul class="min-list">
        <li class="current_page_item"><a href="#">Our History</a></li>
        <li><a href="#">Our Goals</a></li>
      </ul>
    </div>
    -->

    <div class="generic-content">
      <?php the_content(); ?>
    </div>

  </div>

  <?php }

  get_footer();

?>

说明：

• H1 大标题用 the_title() 直接输出当前页面标题，不再硬编码。
• 正文用 the_content() 输出当前页面内容。
• 背景图 ocean.jpg 实际放在主题的 images/ 文件夹里，网站根目录并没有 images 文件夹，所以不能直接写 url(images/ocean.jpg)，要用 get_theme_file_uri('/images/ocean.jpg') 拼出正确路径。
• 面包屑（metabox）暂时还是硬编码「Our History / Back to About Us」，下一讲（EP017）才会做成动态。
• 侧边栏子页面菜单（page-links 那个 div）这一讲先用 HTML 注释包起来，代码还留着但前台先不显示，EP019 才会启用并做成动态。
• 副标题暂时用 DONT FORGET TO REPLACE ME LATER 占位，提醒自己以后（自定义字段章节）再补。

[截图：前台 About Us 页面套用 page.php 后的效果，含 page-banner 头部横幅和下方 generic-content 正文]

functions.php 最后新增（让 WordPress 自动生成 <title> 标签）：

// wp-content/themes/fictional-university-theme/functions.php

// 新增：让 WordPress 自动处理 <title> 标签
function university_features() {
  add_theme_support('title-tag');
}

add_action('after_setup_theme', 'university_features');

header.php 里把 logo 和 About Us 链接从 # 换成真实地址：

<h1 class="school-logo-text float-left"><a href="<?php echo site_url() ?>"><strong>Fictional</strong> University</a></h1>
...
<li><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>

footer.php 同样把 logo、About Us、Privacy Policy 三个链接接上真实地址（其余 Programs / Events / Campuses / Legal / Careers 还是先留 #，因为对应页面还没建）：

<h1 class="school-logo-text school-logo-text--alt-color"><a href="<?php echo site_url() ?>"><strong>Fictional</strong> University</a></h1>
...
<li><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>
...
<li><a href="<?php echo site_url('/privacy-policy') ?>">Privacy</a></li>

Hook / Function 速查

常见坑

• 不要直接在 header.php 手写 <title>我的标题</title>：这样所有页面标题都一样，不会跟着页面变化。正确做法是用 add_theme_support('title-tag') 交给 WordPress 处理。
• 图片路径不能直接写相对路径 images/ocean.jpg，因为网站根目录没有 images 文件夹，图片实际在主题文件夹里，要用 get_theme_file_uri() 拼出正确路径。
• 本地开发如果没用像 fictional-university.dev 这种独立域名（比如用 MAMP/XAMPP 那种在同一个 localhost 下跑多个网站的环境），链接不能直接写死 /about-us，要用 site_url('/about-us')，避免链接跑到别的本地网站上。

延伸 / 后续讲座会用到

• 面包屑区块的「Our History / Back to About Us」硬编码文字，EP017 会改成根据父子页面关系动态生成。
• 侧边栏子页面菜单（现在用 HTML 注释隐藏的那块）会在 EP019 变成动态菜单。
• 副标题占位文字会在自定义字段（Custom Fields）章节被替换成真正可编辑的内容。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 5, EP016