如何通过WordPress Query获取当前活跃页面子菜单项并输出

我懂你现在的困境——用WP_Query搞自定义文章类型溜得很，但一碰到获取当前活跃页面的子菜单项就卡壳了。看你贴的代码，把wp_nav_menu和WP_Query混在一起用，这其实走错路了，菜单和文章类型是完全不同的两套数据体系，得换个思路来处理。

下面给你两种实用的解决方案，适配你想要的HTML结构：

方法一：直接筛选菜单项（简单直观） #

这种方式用wp_get_nav_menu_items拿到整个菜单的所有项，再筛选出当前页面的子项，逻辑清晰，容易调试。

替换你原来的代码块即可：

<div class="container">
  <div class="grid mb-10 mt-10 w-full text-white sm:grid-cols-3 gap-4">
    <?php
    // 获取当前活跃页面的ID
    $current_page_id = get_queried_object_id();
    // 替换成你实际的菜单名称/ID/Slug
    $target_menu = 'Menu Name';
    // 获取指定菜单的所有菜单项
    $all_menu_items = wp_get_nav_menu_items($target_menu);

    // 筛选出当前页面的子菜单项（父ID匹配当前页面，且状态为发布）
    $child_items = array_filter($all_menu_items, function($item) use ($current_page_id) {
      return $item->menu_item_parent == $current_page_id && $item->post_status === 'publish';
    });

    if (!empty($child_items)) {
      foreach ($child_items as $item) {
    ?>
        <div class="p-5 bg-gray-300">
          <h3 class="pt-5 pb-0 mb-0 capitalize">
            <a href="<?php echo esc_url($item->url); ?>"><?php echo esc_html($item->title); ?></a>
          </h3>
          <button class="btn btn-blue mt-5 mb-5">
            <a href="<?php echo esc_url($item->url); ?>">read more</a>
          </button>
        </div>
    <?php
      }
    } else {
      // 没有子菜单时的提示，可按需修改或删除
      echo '<p class="col-span-full text-center">No submenu items found.</p>';
    }
    ?>
  </div>
</div>

关键细节说明： #

• get_queried_object_id()：精准获取当前浏览页面的ID，确保我们定位到的是活跃页面
• wp_get_nav_menu_items()：直接拉取指定菜单的所有原始数据，方便后续筛选
• array_filter()：只保留父ID匹配当前页面的菜单项，同时过滤掉未发布的项
• esc_url()/esc_html()：WordPress开发的安全标配，防止XSS攻击，一定要加

方法二：自定义Walker类（灵活定制） #

如果你想保留wp_nav_menu的调用逻辑，或者需要更复杂的菜单结构定制，可以写一个自定义Walker类，完全掌控输出：

<?php
// 先定义自定义Walker类
class Current_Page_Submenu_Walker extends Walker_Nav_Menu {
  // 跳过菜单层级的包裹标签（我们不需要默认的ul/ol）
  function start_lvl(&$output, $depth = 0, $args = null) {}
  function end_lvl(&$output, $depth = 0, $args = null) {}

  // 输出单个菜单项的HTML
  function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
    // 只处理当前页面的子项
    if ($item->menu_item_parent == get_queried_object_id()) {
      $output .= '<div class="p-5 bg-gray-300">';
      $output .= sprintf(
        '<h3 class="pt-5 pb-0 mb-0 capitalize"><a href="%s">%s</a></h3>',
        esc_url($item->url),
        esc_html($item->title)
      );
      $output .= sprintf(
        '<button class="btn btn-blue mt-5 mb-5"><a href="%s">read more</a></button>',
        esc_url($item->url)
      );
      $output .= '</div>';
    }
  }

  function end_el(&$output, $item, $depth = 0, $args = null) {}
}
?>

<!-- 调用wp_nav_menu使用自定义Walker -->
<div class="container">
  <div class="grid mb-10 mt-10 w-full text-white sm:grid-cols-3 gap-4">
    <?php
    wp_nav_menu(array(
      'menu' => 'Menu Name', // 替换成你的菜单名称
      'walker' => new Current_Page_Submenu_Walker(),
      'container' => false, // 禁用默认的div容器
      'items_wrap' => '%3$s' // 只输出菜单项，不包裹任何外层标签
    ));
    ?>
  </div>
</div>

注意事项： #

1. 确保你的菜单里，子项确实设置了正确的父页面（在WP后台菜单编辑界面拖拽设置层级）
2. 代码中的'Menu Name'要替换成你实际的菜单名称、ID或者Slug
3. 如果需要调整样式，直接修改HTML结构里的CSS类即可

内容的提问来源于stack exchange，提问作者redrightstudio