如何在父页面通过wp_nav_menu显示子页面？附现有实现代码

嘿，我懂你现在用wp_list_pages实现了子页面列表，但想换成更灵活的wp_nav_menu来做——毕竟后台可视化编辑菜单的体验确实更顺手！下面给你两种实用的实现思路，完全贴合你当前的逻辑：当在子页面时显示父页面的所有子页面，在父页面时显示自己的子页面。

方法一：自定义Walker类（精准控制菜单渲染） #

wp_nav_menu的核心是Walker类，我们可以自定义一个Walker，让它只渲染当前页面所属的子菜单项：

function wpb_child_pages_via_nav_menu() {
    global $post;
    if (!is_page()) return;

    // 获取当前页面的目标父ID（子页面取父页面ID，父页面取自身ID）
    $target_parent_id = $post->post_parent ? $post->post_parent : $post->ID;

    // 自定义Walker类，筛选对应父页面的子菜单
    class Child_Page_Walker extends Walker_Nav_Menu {
        public $target_parent_id;

        function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
            // 只显示目标父页面对应的子菜单项（菜单item的object_id关联对应页面ID）
            $item_page = get_post($item->object_id);
            if ($item_page->post_parent == $this->target_parent_id && $depth === 0) {
                parent::start_el($output, $item, $depth, $args, $id);
            }
        }
    }

    // 调用wp_nav_menu，使用自定义Walker
    $walker = new Child_Page_Walker();
    $walker->target_parent_id = $target_parent_id;
    
    wp_nav_menu(array(
        'menu' => '你的菜单名称/ID', // 替换成你后台创建的菜单名称/ID
        'walker' => $walker,
        'container' => false,
        'items_wrap' => '<ul>%3$s</ul>',
    ));
}

方法二：先筛选菜单项目再手动渲染 #

如果你不想写自定义Walker，也可以先获取菜单的所有项目，筛选出符合条件的子项后再渲染：

function wpb_child_pages_via_nav_menu() {
    global $post;
    if (!is_page()) return;

    // 获取目标父ID
    $target_parent_id = $post->post_parent ? $post->post_parent : $post->ID;

    // 获取后台菜单的所有项目（替换成你的菜单名称/ID）
    $menu_items = wp_get_nav_menu_items('你的菜单名称/ID');
    if (!$menu_items) return;

    // 筛选出对应父页面的子项
    $child_items = array_filter($menu_items, function($item) use ($target_parent_id) {
        $item_page = get_post($item->object_id);
        return $item_page->post_parent == $target_parent_id;
    });

    // 渲染筛选后的子项
    if (!empty($child_items)) {
        echo '<ul>';
        foreach ($child_items as $item) {
            echo '<li><a href="' . esc_url($item->url) . '">' . esc_html($item->title) . '</a></li>';
        }
        echo '</ul>';
    }
}

关键注意事项 #

• 你需要先在WordPress后台外观→菜单中创建一个包含父页面和子页面的菜单，确保所有需要显示的页面都添加到了菜单里。
• 记得把代码中的你的菜单名称/ID替换成你实际的菜单名称、ID或者slug。
• 两种方法都保留了你原来的逻辑：子页面显示父页面的子项，父页面显示自己的子页面。

把上面的函数放到主题的functions.php里，然后在需要显示子页面的地方调用wpb_child_pages_via_nav_menu()就可以啦！

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