如何在自定义开发WordPress站点修改移动端汉堡菜单链接？

• 站点为自定义开发的WordPress站，使用了自定义字段
• 需要将移动端汉堡菜单中某一菜单项的链接从#section替换为PDF文件链接
• 后台「外观-菜单」可正常管理主菜单，但修改主菜单链接后，移动端菜单无任何变化，说明移动端菜单不受后台菜单控制
• 发现代码 <a href="javascript:showMenu();" id="mobile-menu"><span></span></a>，删除该代码后移动端菜单会消失，但无法找到菜单项链接的修改位置
• 附header.php部分代码：

<header id="masthead" class="site-header" role="banner">
<div class="inner">
    <div class="header-top">
        <ul class="socials">
            <?php if(get_option('mytheme_fb')): ?><li class="fb"><a href="<?php echo get_option('mytheme_fb'); ?>" target="_blank">Facebook</a><em></em></li><?php endif; ?>
            <?php if(get_option('mytheme_twt')): ?><li class="twt"><a href="<?php echo get_option('mytheme_twt'); ?>" target="_blank">Twitter</a><em></em></li><?php endif; ?>
            <?php if(get_option('mytheme_instagram')): ?><li class="instagram"><a href="<?php echo get_option('mytheme_instagram'); ?>" target="_blank">instagram</a><em></em></li><?php endif; ?>
        </ul>
        <div class="reservation-contact">For groups of 10+ please call <a href="tel:7807571114">780-757-1114</a></div>
        <div class="header-btns">
            <a href="<?php echo get_option('mytheme_reserv'); ?>" class="reservation" target="_blank">MAKE A RESERVATION</a>
            <a href="http://sabordivinorestaurantlounge.fbmta.com/members/UpdateProfile.aspx?Action=Subscribe" class="reservation join" target="_blank">JOIN OUR MAILING LIST</a>
        </div>
    </div>
    <div class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></div>
    <a href="javascript:showMenu();" id="mobile-menu"><span></span></a>
    <nav id="site-navi" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'Sabor' ); ?>">
        <?php
            wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu'     => 'Main menu',
             ) );
        ?>
    </nav><!-- .main-navigation -->

先说明：你找到的javascript:showMenu()只是移动端菜单的触发按钮，负责打开/收起菜单，和菜单项的链接无关，菜单内容是从其他地方生成的。

方法一：让移动端菜单和后台主菜单同步（推荐） #

1. 检查主题自定义设置 #

进入后台「外观-自定义」，找「菜单」或「移动端菜单」相关选项，看看是否单独设置了移动端菜单，把它改成和主菜单相同的选项（比如Primary Menu），保存后刷新移动端页面测试。

2. 检查主题的JS文件 #

如果移动端菜单是通过JS克隆主菜单生成的，但没同步更新，需要找主题的JS文件：

• 进入后台「外观-主题编辑器」，选择当前主题，找到js文件夹下的文件（比如main.js、mobile-menu.js）
• 搜索关键词clone、menu、#section，看看有没有固定链接的代码，把硬编码的#section改成动态读取主菜单的链接，或者删除固定链接的逻辑

3. 检查是否有单独的移动端菜单调用 #

在主题文件中搜索wp_nav_menu，看是否有第二个菜单调用（比如theme_location设为mobile）：

• 如果有，进入后台「外观-菜单」，找到对应的移动端菜单，直接修改目标菜单项的链接为PDF地址即可

方法二：直接修改移动端菜单的链接 #

如果移动端菜单是硬编码或通过自定义字段生成的：

1. 查找菜单代码位置 #

• 进入后台「外观-主题编辑器」，查看主题的header.php、menu-mobile.php等文件，找移动端菜单的HTML代码
• 或者用FTP工具打开主题文件夹，全局搜索#section，找到对应的代码行

2. 修改链接 #

找到目标菜单项的代码，把href="#section"替换为你的PDF链接，比如：

<a href="https://你的站点域名/你的PDF文件.pdf">目标菜单项名称</a>

3. 检查自定义字段设置 #

如果链接是存在主题自定义字段里的，进入后台「外观-自定义」或主题专属的设置页面，找到对应菜单项的链接字段，修改为PDF地址即可

注意事项 #

• 修改代码前，务必先备份当前主题文件，或者使用子主题进行修改，避免主题更新后丢失修改内容
• 如果操作时不确定，尽量先尝试方法一，减少直接修改代码的风险

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