EP022. “用 is_page() 让当前菜单项高亮”
🔒 登录后可标记已读EP021 最后决定不用后台动态菜单，改回写死在 header.php 里的静态导航 HTML。但静态菜单有个缺点：不会像动态菜单那样自动帮当前所在页面的菜单项加上高亮 class。这一讲用 is_page() 搭配 EP017 学过的 wp_get_post_parent_id()，手动给 About Us 菜单项加上「当前页面」的高亮效果，并且子页面也要能让父层的菜单项一起高亮。
涉及文件
wp-content/themes/fictional-university-theme/header.php（修改，About Us 的<li>加上条件 class）
📌 对照代码资料夹发现，本讲快照里 footer.php 的 nav/ul 上的 nav-list class 位置跟上一讲（EP020）相比有细微调整（从 <ul class="nav-list min-list"> 变成 <nav class="nav-list"> + 无 class 的 <ul>）。这个改动 transcript 完全没有提到，纯粹是代码快照对比发现的，可能是 EP021 讲课过程中顺手整理的，跟本讲内容无关，这里只记录不展开。
代码实现
header.php 里 About Us 的 <li> 原本是：
<li><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>改成：
<li <?php if (is_page('about-us') or wp_get_post_parent_id(0) == 16) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>说明：
is_page('about-us')：判断当前是不是 slug 为about-us的页面（About Us 页面本身）。wp_get_post_parent_id(0)：传0代表「查当前正在访问的这个页面」的父页面 ID，不用再写wp_get_post_parent_id(get_the_ID())。== 16：16是 About Us 页面在这个网站上的实际 Post ID（每个人 WordPress 装出来的 ID 可能不同，需要自己到后台确认）。整个条件的意思是「当前就是 About Us 页面，或者当前页面的父页面是 About Us」，只要有一个成立就高亮。- 因为这个
if写在单行、没有用大括号包起来，所以只能接一句语句（这里是echo 'class="current-menu-item"'）。 current-menu-item这个 class 名沿用 EP021 提到的、WordPress 动态菜单本来就会自动生成的那个 class，配套的 CSS 已经写好了，所以直接复用同一个 class 名就能让链接变黄高亮。
[截图：前台访问 About Us 或其子页面时，header 导航里 About Us 菜单项变黄高亮的画面]
Hook / Function 速查
| 名称 | 类型 | 用途 |
|---|---|---|
is_page( $slug ) | WP 内建 function | 判断当前是否为指定 slug/ID/标题对应的页面，返回 true/false |
wp_get_post_parent_id( $id ) | WP 内建 function | 传 0 可直接查「当前页面」的父页面 ID，不用再套 get_the_ID() |
常见坑
is_page()判断的是页面的 slug（地址栏 URL 最后那段，比如about-us），不是页面标题，slug 和标题不一定完全一样。- 只判断
is_page('about-us')只会让 About Us 本身高亮，子页面（比如 Our History）不会跟着亮——要额外用or wp_get_post_parent_id(0) == 16这种条件，让子页面也能带动父层菜单项高亮。 - 硬编码的页面 ID（这里的
16）因人而异，必须自己到后台点开对应页面确认真实 ID，不能照抄课程里的数字。
延伸 / 后续讲座会用到
Section 5 到这里告一段落，下一讲开始进入 Blog 部分的开发（对应 S06-BLOG）。
Sources
Udemy：
- Become a WordPress Developer: Unlocking Power With Code — Section 5, EP022