EP017. “父子页面与动态面包屑（Post ID / wp_get_post_parent_id）”

上一讲面包屑（breadcrumb）区块还是硬编码「Our History / Back to About Us」。这一讲先在后台建了两个 About Us 的子页面（Our History、Our Goals），再把 page.php 里那块面包屑改成动态：只在「有父页面」（也就是子页面）时才显示，并且标题、链接都根据实际的父页面数据生成。核心靠的是 WordPress 里每个页面/文章都有的唯一数字 Post ID。

涉及文件

• wp-content/themes/fictional-university-theme/page.php （修改，只改面包屑那一块）

代码实现

page.php 里原本硬编码的面包屑：

<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>

改成动态版本（加在 container container--narrow page-section 内、page-links 注释块之前）：

<?php
  // 修改：面包屑改成动态，只有子页面才显示
  $theParent = wp_get_post_parent_id(get_the_ID());
  if ($theParent) { ?>
    <div class="metabox metabox--position-up metabox--with-home-link">
      <p><a class="metabox__blog-home-link" href="<?php echo get_permalink($theParent); ?>"><i class="fa fa-home" aria-hidden="true"></i> Back to <?php echo get_the_title($theParent); ?></a> <span class="metabox__main"><?php the_title(); ?></span></p>
    </div>
  <?php }
?>

说明：

• wp_get_post_parent_id(get_the_ID())：传入当前页面 ID，返回它的父页面 ID；如果当前页面没有父页面，返回 0。
• $theParent 这个变量存住这个 ID，后面用三次（if 条件、get_permalink()、get_the_title()），不用重复调用同一个函数。
• 0 在 PHP 的 if 判断里会被当成 false，所以 if ($theParent) 正好等于「如果当前页面有父页面」。
• 链接文字用 get_the_title($theParent) 拿父页面的标题（不是当前页面的），链接地址用 get_permalink($theParent) 拿父页面的永久链接。
• 当前页面自己的标题还是用 the_title()（因为这里就是要显示当前子页面的名字）。

[截图：前台 Our History 子页面顶部动态面包屑，显示"Back to About Us / Our History"的画面]

Hook / Function 速查

常见坑

• the_title() 和 get_the_title() 不是一回事：the_title() 只能输出当前循环里那一篇的标题，get_the_title($id) 可以指定任意一篇的 ID 去拿标题，但拿到的是返回值，要自己 echo 出来。
• 每个页面/文章的 Post ID 可以在后台编辑该页面时看地址栏最后的数字，不同网站装出来的 ID 可能不一样，不要照抄别人的数字。
• 因为 wp_get_post_parent_id() 没有父页面时返回 0，而 0 在 PHP 里等同 false，这个特性刚好可以直接拿来当 if 条件用，不用额外写 != 0 之类的判断。

延伸 / 后续讲座会用到

• 这一讲创建的 $theParent 变量，EP019 做动态子页面菜单时会继续复用（判断当前是父页面还是子页面，决定要抓谁的子页面列表）。
• EP022 高亮当前导航项时也会用到同样的 wp_get_post_parent_id() 思路。

Sources

Udemy：

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