如何在Shoptimizer主题WordPress导航菜单中添加自定义HTML

一、核心思路：自定义Walker类注入HTML #

WordPress的Walker_Nav_Menu类是控制导航菜单渲染的核心，我们通过继承并重写它的方法，在指定菜单项中插入你的自定义折叠菜单代码。

二、具体步骤 #

1. 添加自定义Walker类到主题functions.php

class Custom_Nav_Walker extends Walker_Nav_Menu {
    // 在菜单项渲染后插入自定义HTML
    function end_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        // 识别目标菜单项：给后台菜单里的对应项加CSS类「custom-fold-menu」
        $is_target_item = in_array('custom-fold-menu', $item->classes);
        
        // 先执行默认菜单项渲染逻辑
        parent::end_el($output, $item, $depth, $args, $id);
        
        // 仅在顶级主导航菜单项中插入自定义菜单
        if ($is_target_item && $depth === 0) {
            // 替换成你自己的侧边栏菜单HTML代码
            $custom_menu_html = '
                <button class="fold-menu-toggle">展开分类</button>
                <div class="fold-menu-content">
                    <ul class="custom-menu-list">
                        <li><a href="/category/electronics/">数码产品</a></li>
                        <li><a href="/category/apparel/">服饰鞋包</a></li>
                        <li><a href="/category/home/">家居生活</a></li>
                        <!-- 这里放你原来的侧边栏菜单所有内容 -->
                    </ul>
                </div>
            ';
            $output .= $custom_menu_html;
        }
    }
}

2. 修改主导航调用代码（通常在header.php）

找到主题中调用主导航的wp_nav_menu函数，添加walker参数指定我们的自定义类：

wp_nav_menu(array(
    'theme_location' => 'primary', // Shoptimizer主导航默认位置为primary
    'container' => 'nav',
    'container_class' => 'main-navigation',
    'walker' => new Custom_Nav_Walker(), // 新增这一行
    // 保留主题原有其他参数
));

3. 配置后台菜单项

• 进入WordPress后台「外观 > 菜单」，找到你要绑定自定义菜单的主导航项（可以新增一个空菜单项，标题写「全部分类」）
• 点击屏幕右上角「屏幕选项」，勾选「CSS类」
• 在目标菜单项的「CSS类」输入框中填写custom-fold-menu

4. 迁移并适配JS/CSS代码

把你原来的展开折叠JS逻辑调整选择器，适配新的DOM结构：

document.addEventListener('DOMContentLoaded', function() {
    const toggleBtns = document.querySelectorAll('.fold-menu-toggle');
    toggleBtns.forEach(btn => {
        const menuContent = btn.nextElementSibling;
        btn.addEventListener('click', () => {
            menuContent.classList.toggle('active');
            btn.textContent = menuContent.classList.contains('active') ? '收起分类' : '展开分类';
        });
    });
});

调整CSS样式，确保菜单在主导航中正常显示（适配Shoptimizer主题风格）：

/* 自定义菜单容器默认隐藏 */
.fold-menu-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px 20px;
    z-index: 9999;
    min-width: 250px;
}

/* 展开状态显示 */
.fold-menu-content.active {
    display: block;
}

/* 触发按钮样式适配 */
.fold-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    margin-left: 8px;
    color: inherit;
}

/* 主导航项相对定位，确保下拉菜单位置正确 */
.main-navigation .custom-fold-menu {
    position: relative;
}

/* 自定义菜单列表样式 */
.custom-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.custom-menu-list li {
    margin: 8px 0;
}
.custom-menu-list li a {
    color: #333;
    text-decoration: none;
}
.custom-menu-list li a:hover {
    color: #0073aa;
}

三、注意事项 #

• 建议使用子主题修改代码，避免主题更新导致代码丢失
• 若Shoptimizer主题有自定义导航设置，需确保theme_location参数与后台设置的主导航位置一致
• 可根据主题原有导航样式，微调CSS中的颜色、间距等属性，保证视觉统一

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