WordPress移动端菜单后台显示但前端不显示的问题求助

当前使用Bootscore主题，已完成移动端菜单的注册、JS加载、前端代码插入，但菜单仅在后台显示，前端无法正常展示，相关实现代码如下：

1. functions.php中注册移动端菜单的代码 #

function wdm_register_mobile_menu() {
    add_theme_support( 'nav-menus' );
    register_nav_menus( array('mobile-menu' => __( 'Mobile Menu', 'wdm' )) );
}
add_action( 'init', 'wdm_register_mobile_menu' );

2. functions.php中加载菜单切换JS的代码 #

// load the JS file
function wdm_mm_toggle_scripts() {
    wp_enqueue_script( 'wdm-mm-toggle', get_stylesheet_directory_uri() . '/js/mobile-menu-toggle.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'wdm_mm_toggle_scripts' );

3. mobile-menu-toggle.js中的切换逻辑代码 #

// hide or display the mobile menu

/* let's consider we want to toggle the menu displayed at 800 screen width, here's what we need to do (you can accordingly replace 800 with to a screen width you would need)..*/
function toggle() {
    if ( jQuery( window ).width() >= 800 ) {
      jQuery( '.nav.mobile-menu' ).hide();
      jQuery( '.nav.desktop-menu' ).show();
    } else {
      jQuery( '.nav.desktop-menu' ).hide();
      jQuery( '.nav.mobile-menu' ).show();
    }
}

// on page load set the menu display initially
toggle();

// toggle the menu display on browser resize
jQuery( window ).resize( function () {
    toggle();
} );

4. 子主题header-woocommerce.php中输出菜单的代码 #

<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
wp_nav_menu(array(
  'theme_location' => 'main-menu',
  'container' => false,
  'menu_class' => '',
  'fallback_cb' => '__return_false',
  'items_wrap' => '<ul id="bootscore-navbar" class="navbar-nav ms-auto %2$s">%3$s</ul>',
  'depth' => 2,
  'walker' => new bootstrap_5_wp_nav_menu_walker()
));

if ( function_exists('has_nav_menu') && has_nav_menu('mobile-menu') ) {
  wp_nav_menu( array(
    'depth' => 6,
    'sort_column' => 'menu_order',
    'container' => 'ul',
    'menu_id' => 'main-nav',
    'menu_class' => 'nav mobile-menu',
    'theme_location' => 'mobile-menu'
  ) );
  } else {
    echo "<ul class='nav mobile-menu'> <font style='color:red'>Mobile Menu has not been set</font> </ul>";
  }
?>

排查与修复建议 #

• 确认菜单是否已输出到DOM：
  打开浏览器开发者工具（F12），搜索.nav.mobile-menu，检查对应的HTML元素是否存在。如果不存在，临时在PHP代码中添加var_dump(has_nav_menu('mobile-menu'));，确认后台是否已为mobile-menu位置分配了菜单——如果返回false，需要在后台「外观-菜单」中把创建好的菜单分配到「Mobile Menu」位置。
• 修复菜单容器嵌套错误：
  当前wp_nav_menu的container设置为ul，会导致生成<ul class="nav mobile-menu"><ul>...</ul></ul>的错误嵌套结构，把container改为false即可：

  wp_nav_menu( array(
    'depth' => 6,
    'sort_column' => 'menu_order',
    'container' => false, // 修正为false，避免双重ul嵌套
    'menu_id' => 'main-nav',
    'menu_class' => 'nav mobile-menu',
    'theme_location' => 'mobile-menu'
  ) );
  

• 检查JS加载与执行情况：
  1. 在开发者工具「网络」标签中搜索mobile-menu-toggle.js，确认文件是否成功加载（无404错误），路径是否正确——子主题下get_stylesheet_directory_uri()是正确的，但要确保js文件夹存在且文件位置无误。
  2. 查看「控制台」标签是否有JS报错，比如jQuery is not defined，可以将JS代码用jQuery(document).ready(function($) { ... })包裹，确保DOM加载完成后执行：

     jQuery(document).ready(function($) {
       function toggle() {
           if ( $( window ).width() >= 800 ) {
             $( '.nav.mobile-menu' ).hide();
             $( '.nav.desktop-menu' ).show();
           } else {
             $( '.nav.desktop-menu' ).hide();
             $( '.nav.mobile-menu' ).show();
           }
       }
       toggle();
       $( window ).resize( toggle );
     });
     

• 排查CSS隐藏规则：
  如果DOM元素存在但看不到，检查元素的display属性，是否被主题CSS强制设置为none。可以在开发者工具中手动修改display: block或display: flex，看菜单是否能显示，若能则需要调整CSS优先级或修改主题样式。
• 测试屏幕宽度触发逻辑：
  手动缩小浏览器窗口到800px以下，或者临时修改JS中的宽度阈值为更大值（比如1200），确认是否能触发移动端菜单显示。也可以暂时注释掉resize监听，只保留页面加载时的toggle函数，排查是否是resize事件的问题。

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