求助：为WordPress自定义移动端菜单激活链接添加Active类

一、修正CSS用法（最快捷方案） #

你之前用的:active伪类仅在点击元素的瞬间生效，页面跳转后就会失效，这不是你需要的「当前页面链接持续高亮」效果。WordPress默认会给当前页面的导航菜单项添加current-menu-item类，直接针对这个类编写样式即可：

/* 设置当前激活的移动端导航文本颜色 */
.icon_mobile_menu_item.current-menu-item a {
    color: #006d6f;
}
/* 如果图标是独立元素（比如<i>标签），单独设置图标颜色 */
.icon_mobile_menu_item.current-menu-item i {
    color: #006d6f;
}

如果插件生成的移动端导航没有自动继承这个类，按以下步骤排查：

1. 打开浏览器开发者工具（按F12），切换到移动端视图
2. 点击当前页面的导航项，查看它的HTML结构，确认是否有其他标识当前页的类（比如active、current）
3. 将上述代码中的current-menu-item替换为实际找到的类名即可

二、用PHP手动添加激活类（适配特殊插件场景） #

如果插件完全未处理激活状态的类标识，可通过WordPress钩子手动给当前页的导航项添加自定义类：

1. 在主题的functions.php文件中添加以下代码：

function add_mobile_menu_active_class($classes, $item) {
    // 检查当前页面是否与菜单项匹配
    if (is_page($item->object_id)) {
        // 仅给移动端导航项添加类（根据你的菜单特征调整判断条件）
        if (in_array('icon_mobile_menu_item', $classes)) {
            $classes[] = 'mobile-nav-active';
        }
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_mobile_menu_active_class', 10, 2);

2. 针对自定义类编写CSS：

.icon_mobile_menu_item.mobile-nav-active a,
.icon_mobile_menu_item.mobile-nav-active i {
    color: #006d6f;
}

三、额外排查点 #

• 检查CSS优先级：如果样式不生效，用开发者工具查看元素的样式覆盖情况，必要时可临时添加!important（不推荐长期使用，优先调整选择器优先级）：

.icon_mobile_menu_item.current-menu-item a {
    color: #006d6f !important;
}

• 查看插件设置：部分移动端导航插件在后台面板自带「当前项高亮」的可视化设置，优先检查插件配置，可能无需编写代码就能解决问题

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