如何为Divi主题菜单添加关闭按钮及对应HTML位置查询

嘿，我来帮你搞定这个问题！其实完全不用直接修改主题核心HTML文件（毕竟主题更新会直接覆盖你的改动，太折腾），给你两个靠谱的方案，从简单易维护到进阶自定义：

方案一：用自定义代码添加（推荐，无需修改主题文件） #

这个方法不用碰主题的核心文件，通过Divi自带的自定义功能就能实现：

1. 添加触发按钮的JS代码
   打开Divi主题选项，找到「集成」标签，在「结束代码」输入框里粘贴这段代码：

   jQuery(document).ready(function($) {
     // 在全屏菜单容器顶部插入关闭按钮
     $('.et_pb_fullscreen_menu').prepend('<div class="fullscreen-close-btn">×</div>');
     
     // 点击关闭按钮时，模拟点击菜单触发按钮来关闭菜单
     $('.fullscreen-close-btn').on('click', function() {
       $('.et_pb_fullscreen_menu_opener').trigger('click');
     });
   });
   

2. 添加按钮的样式
   进入「主题选项」→「自定义CSS」，粘贴以下样式代码（可以根据你的菜单配色调整数值）：

   .fullscreen-close-btn {
     position: absolute;
     top: 30px;
     right: 30px;
     font-size: 40px;
     color: #ffffff; /* 改成你菜单背景对应的文字颜色 */
     cursor: pointer;
     z-index: 9999;
     transition: opacity 0.3s ease;
     user-select: none; /* 防止点击时选中文字 */
   }
   
   .fullscreen-close-btn:hover {
     opacity: 0.8;
   }
   
   /* 菜单未打开时隐藏按钮 */
   .et_pb_fullscreen_menu:not(.et_pb_fullscreen_menu--open) .fullscreen-close-btn {
     display: none;
   }
   

   保存后刷新页面，打开全屏菜单就能看到右上角的关闭按钮了，点击它就能关闭菜单。

方案二：修改模板文件（不推荐，需用子主题） #

如果你一定要通过修改HTML文件实现，必须使用子主题（直接改Divi核心文件会被更新覆盖）：

1. 首先在你的子主题目录下创建对应路径：includes/builder/module/
2. 把Divi主题目录里的wp-content/themes/Divi/includes/builder/module/FullscreenMenu.php文件复制到刚才创建的子主题路径里
3. 打开复制后的FullscreenMenu.php文件，找到render()方法里的这段代码：

   $output .= '<div class="et_pb_fullscreen_menu_container">';
   

   在这行代码的下方添加关闭按钮的HTML：

   $output .= '<div class="fullscreen-close-btn">×</div>';
   

4. 最后同样添加方案一里的CSS样式和JS代码（如果需要的话），完成后保存文件刷新页面即可。

注意：修改模板文件有风险，后续Divi主题更新如果调整了FullscreenMenu模块的结构，你可能需要同步更新子主题里的文件，所以优先推荐方案一。

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