如何使用WPML通过按钮而非下拉菜单切换两种语言？

如果只需要支持两种语言，用单个切换按钮确实比下拉菜单更简洁直观，下面是一套简单的实现方案：

1. HTML 结构 #

给需要切换语言的元素加上data-zh和data-en属性存储对应语言文本，再放置切换按钮：

<div class="content">
  <h1 data-zh="欢迎使用" data-en="Welcome">欢迎使用</h1>
  <p data-zh="这是一个双语言切换按钮示例" data-en="This is a dual-language toggle button demo"></p>
</div>

<button id="langToggle">English</button>

2. CSS 样式（可选） #

给按钮加基础样式提升观感：

#langToggle {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

#langToggle:hover {
  background-color: #1d4ed8;
}

3. JavaScript 核心逻辑 #

实现按钮点击切换语言的功能，包括更新按钮文本和页面内容：

const toggleBtn = document.getElementById('langToggle');
const contentElements = document.querySelectorAll('[data-zh]');

// 初始语言设为中文
let currentLang = 'zh';

toggleBtn.addEventListener('click', () => {
  // 切换语言标识
  currentLang = currentLang === 'zh' ? 'en' : 'zh';
  
  // 更新按钮显示文本
  toggleBtn.textContent = currentLang === 'zh' ? 'English' : '中文';
  
  // 批量更新页面所有可切换内容
  contentElements.forEach(el => {
    el.textContent = el.getAttribute(`data-${currentLang}`);
  });
});

进阶优化建议 #

• 若需切换的内容较多，可把语言文本存入单独JSON对象统一维护：

const langTexts = {
  zh: {
    welcome: '欢迎使用',
    demoText: '这是一个双语言切换按钮示例'
  },
  en: {
    welcome: 'Welcome',
    demoText: 'This is a dual-language toggle button demo'
  }
};

切换时直接从对象取值更新元素即可。

• 要记住用户上次选择的语言，可通过localStorage存储语言标识，页面加载时读取并设置。

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