WordPress站点编辑器导航菜单前台不显示问题求助

使用Twenty Twenty Four主题搭建网站（https://aframjavea.com/），此前已有3个网站切换至该主题均正常，但当前网站导航菜单在站点编辑器及预览中显示正常，前台却无法加载。

已尝试以下操作但未解决：

• 调整Header内导航块位置
• 修改导航设置
• 禁用所有插件

Header模板代码 #

<!-- wp:group {"align":"full","className":"wc-blocks-pattern-header-large wc-blocks-header-pattern","style":{"spacing":{"padding":{"right":"40px","left":"40px","top":"24px","bottom":"24px"}}},"layout":{"type":"default"}} -->
<div class="wc-blocks-pattern-header-large wc-blocks-header-pattern wp-block-group alignfull" style="padding-top:24px;padding-right:40px;padding-bottom:24px;padding-left:40px"><!-- wp:group {"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false,"align":"full"} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"center","width":"70%","layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:70%"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"shouldSyncIcon":true} /-->

<!-- wp:site-title /--></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":""} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconStyle":"line","iconClass":"wc-block-customer-account__account-icon"} /-->

<!-- wp:woocommerce/mini-cart /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull"><!-- wp:navigation {"ref":126} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"0","left":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:0;padding-left:0"><!-- wp:search {"label":"","showLabel":false,"placeholder":"Search","buttonText":"Search","buttonUseIcon":true,"query":{"post_type":"product"},"style":{"border":{"radius":"0px"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

站点编辑器显示效果 #

• 确认导航菜单的发布状态：进入后台「外观」→「菜单」，找到ID为126的导航菜单，检查其状态是否为「已发布」。若菜单处于草稿或未发布状态，前台将无法加载。
• 验证导航块的引用ID：代码中导航块使用"ref":126关联菜单，需确认后台菜单的实际ID是否为126。可在站点编辑器中删除现有导航块，重新添加并手动选择目标菜单，避免ID不匹配问题。
• 检查模板可见性设置：在站点编辑器中打开Header模板，查看模板的「可见性」设置，确认未添加针对特定页面、用户角色的隐藏规则。
• 排查CSS隐藏问题：使用浏览器开发者工具（F12）定位前台页面的导航元素，检查是否存在display: none、visibility: hidden等CSS属性导致导航被隐藏，或被其他元素覆盖。可临时添加自定义CSS强制显示：

  .wp-block-navigation {
    display: flex !important;
    visibility: visible !important;
  }
  

• 重新生成导航块代码：删除Header模板中的现有导航块，重新添加导航组件并绑定正确菜单，保存模板后刷新前台测试。
• 更新主题与核心版本：确保Twenty Twenty Four主题及WordPress核心为最新版本，修复可能存在的版本兼容BUG。

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