本文详解如何在 WordPress 主题中实现多语言菜单项的动态加粗：页面首次加载时默认高亮“DE”，点击“EN”后自动取消“DE”加粗并高亮“EN”，全程依赖 CSS 类 + sessionStorage + jQuery，无需插件且兼容主流主题。
本文详解如何在 wordpress 主题中实现多语言菜单项的动态加粗：页面首次加载时默认高亮“de”，点击“en”后自动取消“de”加粗并高亮“en”，全程依赖 css 类 + sessionstorage + javascript，无需插件且兼容主流主题。
要实现菜单语言项（如 DE / EN）在页面加载时默认加粗“DE”，并在用户点击切换时实时更新加粗状态，关键在于分离“初始状态控制”与“交互响应逻辑”，并确保 DOM 就绪时机正确。你当前代码的问题在于：sessionStorage.getItem("language") 在页面首次加载时为空（除非此前已点击过），且 jQuery 的 .css() 操作被包裹在 $(document).ready() 内——看似合理，但若菜单 DOM 渲染稍晚或脚本执行顺序有干扰，可能导致首次样式未生效；更严重的是，你将 sessionStorage.setItem() 和初始样式设置写在同一 ready 回调内，而 sessionStorage.getItem() 读取发生在事件绑定之后、但 DOM 可能尚未完成渲染，造成“需点击两次才生效”的假象。
以下是经过验证、稳定可靠的完整解决方案：
✅ 第一步：为菜单项添加语义化 CSS 类
进入 WordPress 后台 → 外观 → 菜单 → 右上角点击 屏幕选项 → 勾选 CSS 类。
需要创建、读取、编辑或处理 Word 文档（.docx / .dotx）时使用。触发词：'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合：小说大纲稿、投稿文档、合同、简历、工作总结。
- 为所有语言菜单项（DE 和 EN）统一添加类：menu-language
- 为 DE 菜单项额外添加类：lang-DE
- 为 EN 菜单项额外添加类：lang-EN
? 提示：类名需准确无空格、无大小写混淆（如 lang-de ≠ lang-DE），建议全大写保持一致性。
✅ 第二步：注入优化后的 JavaScript（推荐放入主题 footer.php 或使用 wp_enqueue_script）
jQuery(document).ready(function($) {
// 【1】绑定点击事件：记录用户选择的语言到 sessionStorage
$(document).on('click', '.menu-language', function(e) {
const lang = $(this).text().trim(); // .trim() 防止空格干扰
sessionStorage.setItem('preferred-language', lang);
// 可选：阻止默认跳转以实现无刷新切换（需配合 AJAX 加载内容）
// e.preventDefault();
});
// 【2】页面加载时立即应用高亮 —— 关键修复点！
const savedLang = sessionStorage.getItem('preferred-language');
const activeLang = savedLang || 'DE'; // 默认为 DE
// 移除所有语言项的加粗，再仅对目标项加粗（避免残留样式）
$('.lang-DE, .lang-EN').css('font-weight', 'normal');
$(`.lang-${activeLang}`).css('font-weight', 'bold');
});⚠️ 注意事项与增强建议
- 不要依赖 .current-menu-item：该类由 WordPress 根据当前页面 URL 自动添加，对语言切换无意义，且首页/非语言页无法触发。
- 避免重复加粗：代码中显式重置所有 .lang-* 元素字体权重，再精准设置目标项，杜绝“双加粗”或“不撤销”问题。
- 兼容性保障：sessionStorage 在 IE10+ 及所有现代浏览器中均支持；若需支持 IE9，可降级为 cookie 或 localStorage。
-
CSS 层叠优先级：若主题 CSS 中对菜单设置了 !important 字体权重，请在 JS 中同样使用 !important（需通过 .attr('style', ...) 设置）或改用更高优先级 CSS 类（推荐）：
.lang-active { font-weight: bold !important; }对应 JS 替换为：
$('.lang-DE, .lang-EN').removeClass('lang-active'); $(`.lang-${activeLang}`).addClass('lang-active');
✅ 最终效果验证
- 首次访问网站 → “DE” 菜单项自动加粗；
- 点击 “EN” → “DE” 恢复常规字体，“EN” 即刻加粗，且刷新页面后仍保持“EN”加粗；
- 点击 “DE” → 切换回默认状态，sessionStorage 同步更新。
此方案轻量、可靠、无侵入性，适用于任何基于原生 WordPress 菜单系统的多语言站点，是解决「首屏默认高亮 + 点击实时切换」需求的最佳实践。
