如何在基于区块的WordPress导航菜单中动态替换子菜单项并生成产品分类链接？

看起来你已经为这个问题折腾了好一阵了——区块主题的导航逻辑确实和传统WordPress菜单不太一样，尤其是Twenty Twenty-Five这种完全基于区块的主题，没法用旧的菜单管理界面来调整。咱们一步步把问题解决掉：

先搞清楚你之前的代码为什么没生效 #

你之前尝试直接遍历导航的第一层inner_blocks，但Product Details是Products父菜单项的子区块，它藏在Products对应的core/page-list-item区块的innerBlocks里，外层遍历根本碰不到它。另外，你也没限制替换的范围，导致所有导航块（包括footer的）都被修改了。

完整解决方案 #

下面是一套可以精准替换目标子菜单项、只影响指定导航块，还能按产品size属性分组的代码：

1. 注册自定义动态区块（用来替换Product Details）

// 注册自定义区块，用来渲染动态产品链接
function theme_register_products_nav_block() {
    if ( function_exists( 'register_block_type' ) ) {
        register_block_type( 'theme/dynamic-products-nav', array(
            'title' => '动态产品导航',
            'icon' => 'products',
            'render_callback' => 'theme_render_dynamic_products_nav',
            'category' => 'widgets',
        ) );
    }
}
add_action( 'init', 'theme_register_products_nav_block' );

2. 写递归函数，精准查找并替换目标菜单项

这个函数会遍历所有层级的区块，找到标注为"Product Details"的页面列表项，然后替换成我们的自定义区块：

// 递归查找并替换指定菜单项
function theme_replace_target_menu_item( $blocks, $target_label = 'Product Details' ) {
    foreach ( $blocks as $index => $block ) {
        // 检查当前区块是否是页面列表项
        if ( $block->block_name === 'core/page-list-item' ) {
            // 匹配目标标签
            if ( isset( $block->parsed_block['attrs']['label'] ) && $block->parsed_block['attrs']['label'] === $target_label ) {
                // 创建自定义区块替换它
                $replacement_block = new WP_Block( array(
                    'blockName' => 'theme/dynamic-products-nav',
                ) );
                $blocks[ $index ] = $replacement_block;
                continue;
            }
        }

        // 如果当前区块有子区块，递归处理
        if ( isset( $block->inner_blocks ) && ! empty( $block->inner_blocks ) ) {
            $blocks[ $index ]->inner_blocks = theme_replace_target_menu_item( $block->inner_blocks, $target_label );
        }
    }
    return $blocks;
}

3. 过滤导航区块，只在指定导航中执行替换

这里我们可以通过导航区块的anchor属性（你在编辑器里给导航块设置的锚点）来限制范围，比如只修改头部的导航：

// 过滤导航区块的内部子块，执行替换
add_filter( 'block_core_navigation_render_inner_blocks', function( $inner_blocks, $block ) {
    // 只处理头部导航（假设你给头部导航块设置了anchor为"header-nav"）
    if ( isset( $block->parsed_block['attrs']['anchor'] ) && $block->parsed_block['attrs']['anchor'] === 'header-nav' ) {
        $inner_blocks = theme_replace_target_menu_item( $inner_blocks );
    }
    return $inner_blocks;
}, 10, 2 );

4. 渲染自定义区块：生成按size分组的产品链接

最后在渲染回调里，从你的product_list表中读取数据，按size分组并生成导航链接：

// 渲染动态产品导航的回调函数
function theme_render_dynamic_products_nav() {
    global $wpdb;
    $output = '<ul class="wp-block-page-list__item has-child">';

    // 从自定义表中获取产品，按size分组
    $products = $wpdb->get_results( "SELECT id, title, size FROM {$wpdb->prefix}product_list ORDER BY size, title" );
    
    $current_size = '';
    foreach ( $products as $product ) {
        // 如果当前产品的size和上一个不同，生成分组标题
        if ( $product->size !== $current_size ) {
            if ( $current_size !== '' ) {
                $output .= '</ul></li>';
            }
            $current_size = $product->size;
            $output .= sprintf( '<li class="wp-block-page-list__item has-child"><span class="wp-block-navigation-item__label">%s</span><ul class="wp-block-page-list">', esc_html( $product->size ) );
        }

        // 生成单个产品的链接
        $product_url = add_query_arg( 'product_id', $product->id, get_permalink( get_page_by_path( 'product-details' ) ) );
        $output .= sprintf( '<li class="wp-block-page-list__item"><a href="%s" class="wp-block-navigation-item__content"><span class="wp-block-navigation-item__label">%s</span></a></li>', esc_url( $product_url ), esc_html( $product->title ) );
    }

    // 闭合最后一个分组的标签
    if ( $current_size !== '' ) {
        $output .= '</ul></li>';
    }

    $output .= '</ul>';
    return $output;
}

操作步骤补充 #

1. 进入WordPress编辑器，找到头部的导航块，给它设置一个**锚点（Anchor）**为header-nav（和代码里的对应），这样就不会影响footer的导航了。
2. 确保你的product_list表结构和代码里的字段匹配（id、title、size），如果字段名不一样，记得修改SQL查询和循环里的变量。
3. 刷新前台页面，你会看到Products下拉菜单里的Product Details被替换成了按size分组的产品列表。

为什么这么做？ #

• 递归遍历区块：确保能找到嵌套在父菜单项里的子菜单项
• 按锚点限制范围：避免误修改其他导航块
• 自定义区块渲染：直接生成符合导航样式的HTML，和原生导航的样式保持一致

内容来源于stack exchange