EP019. “动态子页面链接菜单（wp_list_pages / get_pages）”

EP016 里用 HTML 注释暂时隐藏的侧边栏子页面菜单（page-links 那块），这一讲正式启用并做成动态：菜单标题会显示当前区块的父页面名称并链接回去，下面列出所有兄弟/子页面的链接。同时如果当前页面既不是父页面也没有子页面（比如一个孤立页面），整个菜单区块就不显示。

涉及文件

• wp-content/themes/fictional-university-theme/page.php （修改，启用并改造 page-links 区块）

代码实现

先取消 EP016 里的 HTML 注释，把这段变成可以运作的代码：

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

改成动态版本（紧接在 EP017 写的 $theParent 面包屑代码之后）：

<?php
  // 新增：判断当前页面是否有子页面（不管自己是不是父页面）
  $testArray = get_pages(array(
    'child_of' => get_the_ID()
  ));

  // 新增：只有「当前是子页面」或「当前有自己的子页面」时才显示这个区块
  if ($theParent or $testArray) { ?>
  <div class="page-links">
    <h2 class="page-links__title"><a href="<?php echo get_permalink($theParent); ?>"><?php echo get_the_title($theParent); ?></a></h2>
    <ul class="min-list">
      <?php
        // 新增：判断要抓谁的子页面 —— 如果自己是子页面，就抓父页面的子页面（也就是兄弟页面）
        //       如果自己就是父页面，就直接抓自己的子页面
        if ($theParent) {
          $findChildrenOf = $theParent;
        } else {
          $findChildrenOf = get_the_ID();
        }

        wp_list_pages(array(
          'title_li' => NULL,
          'child_of' => $findChildrenOf,
          'sort_column' => 'menu_order'
        ));
      ?>
    </ul>
  </div>
  <?php } ?>

说明：

• wp_list_pages() 不传参数时会把网站所有页面全部列出来，还会自动加一个「Pages」标题，所以必须传参数收窄范围。
• title_li => NULL：去掉自动生成的标题。
• child_of => $findChildrenOf：只列出指定页面 ID 下的子页面。
• sort_column => 'menu_order'：按后台「页面属性」里手动设定的「顺序」数字排序，而不是默认的字母顺序（要在后台给每个子页面填对应的顺序数字才会生效）。
• $theParent 沿用 EP017 建立的变量：如果是 0（当前是父页面），直接用 get_the_ID() 找自己的子页面；如果不是 0（当前是子页面），用 $theParent 找兄弟页面（也就是父页面底下的所有子页面）。
• get_pages() 跟 wp_list_pages() 类似，但它不会自动输出内容，只会把结果返回成一个数组，所以拿来单纯做「有没有子页面」的判断（有子页面时数组非空，等同 true；没有子页面则为空，等同 false）。
• 顶部标题 h2 用 get_the_title($theParent) 和 get_permalink($theParent)，跟 EP017 面包屑用的是同一套逻辑；$theParent 为 0 时，get_the_title(0) 会被 WordPress 理解成「当前页面」。

[截图：前台 About Us 子页面侧边栏动态子页面菜单，列出 Our History / Our Goals 兄弟页面链接的画面]

课程中另外用一段临时演示代码解释「关联数组」（associative array）概念，讲完即删除，不留在主题文件里：

// 临时演示代码，仅用于讲解关联数组，讲完会删除
$animal_sounds = array(
  'cat' => 'meow',
  'dog' => 'bark',
  'pig' => 'oink',
);
echo $animal_sounds['dog']; // 输出 bark

wp_list_pages() 和 wp_nav_menu()（后面 EP021 会用到）之所以要传关联数组当参数，就是同样的 key => value 写法。

Hook / Function 速查

常见坑

• wp_list_pages() 不传参数会把全站所有页面都列出来，而且会带一个「Pages」标题，必须用 title_li => NULL 去掉标题、用 child_of 限定范围。
• 子页面上如果直接拿 get_the_ID() 当 child_of 用，会去找「这个子页面自己底下的子页面」，通常是空的，菜单就会消失——一定要先判断当前页面是父页面还是子页面，再决定该用谁的 ID 去查子页面列表。
• 默认排序是字母顺序，想要自定义顺序要传 sort_column => 'menu_order'，然后到后台每个页面的「页面属性」里手动填「顺序」数字。

延伸 / 后续讲座会用到

无特别提及，下一讲开始进入一批杂项调整和响应式设计（EP020）。

Sources

Udemy：

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