如何在WordPress子菜单添加返回按钮与菜单标题？

你可以通过wp_nav_menu_items过滤器结合菜单上下文判断，精准给指定子菜单添加自定义内容，具体实现如下：

1. 添加自定义过滤器函数 #

将以下代码粘贴到主题的functions.php文件中：

add_filter('wp_nav_menu_items', 'add_back_button_and_title_to_submenu', 10, 2);
function add_back_button_and_title_to_submenu($items, $args) {
    // 替换成你的主菜单对应的主题位置，比如后台「外观-菜单」里设置的"primary"
    if ($args->theme_location == 'primary') {
        // 目标父菜单项的名称，这里对应你的"Resources"
        $target_parent_text = 'Resources';
        // 匹配子菜单的起始标签，根据你主题的实际类名调整，默认是sub-menu
        $target_start = strpos($items, '<ul class="sub-menu"');
        
        if ($target_start !== false) {
            // 构造返回按钮和标题的HTML结构
            $custom_content = '
                <li class="submenu-header">
                    <a href="#" class="back-button">&larr; 返回</a>
                    <span class="submenu-title">' . $target_parent_text . '</span>
                </li>
            ';
            
            // 将自定义内容插入到子菜单的最开头
            $items = substr_replace($items, $custom_content, $target_start + strlen('<ul class="sub-menu"'), 0);
        }
    }
    
    return $items;
}

2. 添加样式美化（可选） #

为了让自定义内容更贴合网站设计，将以下CSS添加到主题的style.css或后台「外观-自定义-额外CSS」面板：

.submenu-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
}

.back-button {
    text-decoration: none;
    color: #333;
    margin-right: 16px;
    font-size: 14px;
}

.back-button:hover {
    color: #0073aa;
}

.submenu-title {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

3. 优化返回按钮跳转逻辑（可选） #

如果需要返回按钮实现具体跳转功能，可做以下调整：

• 跳转到Resources页面：将代码中返回按钮的href="#"替换为该页面的实际链接，比如href="/resources"
• 实现浏览器后退：在主题的JS文件或自定义JS中添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.back-button').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            window.history.back();
        });
    });
});

注意事项 #

• 请根据你网站的实际菜单主题位置，替换代码中的primary，可在后台「外观-菜单-菜单设置」中查看
• 如果你的主题子菜单类名不是sub-menu，请同步替换代码中对应的类名
• 可根据需求修改HTML结构和CSS样式，匹配网站的视觉风格

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