WordPress：如何基于JavaScript变量切换加载不同菜单

核心问题在于：PHP是服务器端语言，页面渲染阶段就已执行完毕；JavaScript是客户端语言，在浏览器加载页面后才运行，所以无法直接将JS变量传递给PHP用于初始页面渲染。下面给你几个可行的解决方案：

方案一：纯前端切换（最简便，推荐） #

直接用PHP渲染出两个菜单，再通过JS+CSS控制显示/隐藏，不需要服务器端判断。

步骤1：修改PHP代码，给两个菜单添加标识类 #

<div class="row">
    <?php
    // 渲染桌面菜单，添加desktop-only类
    wp_nav_menu( array( 
        'theme_location' => 'desktop-custom-menu', 
        'container_class' => 'custom-menu-class desktop-only' ) ); 
    ?>
    <?php
    // 渲染移动端菜单，添加mobile-only类
    wp_nav_menu( array( 
        'theme_location' => 'mobile-custom-menu', 
        'container_class' => 'custom-menu-class mobile-only' ) ); 
    ?>
</div>

步骤2：添加CSS默认隐藏逻辑 #

/* 默认隐藏移动端菜单 */
.mobile-only {
    display: none;
}

/* 屏幕宽度小于992px时，显示移动端菜单，隐藏桌面菜单 */
@media (max-width: 991px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}

步骤3：优化JS代码（可选，处理窗口 resize 场景） #

如果需要在窗口尺寸变化时实时切换，补充JS监听：

function toggleMenuDisplay() {
    const desktopMenu = document.querySelector('.desktop-only');
    const mobileMenu = document.querySelector('.mobile-only');
    if (window.innerWidth < 992) {
        desktopMenu.style.display = 'none';
        mobileMenu.style.display = 'block';
    } else {
        desktopMenu.style.display = 'block';
        mobileMenu.style.display = 'none';
    }
}

// 页面加载时执行一次
toggleMenuDisplay();
// 监听窗口尺寸变化
window.addEventListener('resize', toggleMenuDisplay);

方案二：通过Cookie传递JS变量给PHP（适合需要服务器端渲染单菜单的场景） #

如果必须让PHP只渲染对应菜单，可以通过Cookie将JS的屏幕尺寸标识传递给服务器，页面刷新时PHP读取Cookie值。

步骤1：修改JS代码，将displaySize存入Cookie #

function setDisplaySizeCookie() {
    let displaySize = window.innerWidth < 992 ? 'mobile' : 'desktop';
    // 设置Cookie，有效期1天
    document.cookie = `displaySize=${displaySize}; path=/; max-age=86400`;
}

// 页面加载时设置Cookie
setDisplaySizeCookie();
// 窗口变化时更新Cookie
window.addEventListener('resize', setDisplaySizeCookie);

步骤2：修改PHP代码，读取Cookie值并渲染对应菜单 #

<div class="row">
    <?php
    // 从Cookie获取displaySize，默认设为desktop
    $displaySize = isset($_COOKIE['displaySize']) ? $_COOKIE['displaySize'] : 'desktop';
    
    if ($displaySize === 'desktop') {
        wp_nav_menu( array( 
            'theme_location' => 'desktop-custom-menu', 
            'container_class' => 'custom-menu-class' ) ); 
    } else {
        wp_nav_menu( array( 
            'theme_location' => 'mobile-custom-menu', 
            'container_class' => 'custom-menu-class' ) ); 
    }
    ?>
</div>

注意：首次加载页面时，Cookie还未设置，PHP会默认渲染桌面菜单，JS执行后会设置Cookie，刷新页面后才会匹配正确的菜单。

方案三：利用WordPress内置功能（进阶） #

如果你的主题支持，也可以直接使用WordPress的wp_nav_menu配合响应式CSS实现，无需单独写两个菜单。但如果业务需求必须用两个不同的菜单，方案一或二更合适。

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