如何阻止Google翻译WordPress页面的页头与页脚内容

下面提供两种适配WordPress环境的实现方案，均仅对页头、页脚生效：

方法1：通过自定义JS实现（无需修改主题源码，新手推荐） #

该方案不会因为主题更新导致配置失效：

• 登录WordPress后台，依次进入 外观 → 自定义 → 自定义代码/额外JS 板块（不同主题命名略有差异）
• 粘贴以下JS代码，自动为全站页头、页脚根元素添加notranslate类：

document.addEventListener('DOMContentLoaded', function() {
  // 适配主流主题默认的页头、页脚选择器，可根据自己站点实际类名/id调整
  const siteHeader = document.querySelector('header, .header, #header');
  const siteFooter = document.querySelector('footer, .footer, #footer');
  if(siteHeader) siteHeader.classList.add('notranslate');
  if(siteFooter) siteFooter.classList.add('notranslate');
});

• 保存设置后清除站点缓存即可生效，Google翻译会自动跳过带notranslate类的元素及其所有子元素。

方法2：修改主题模板文件（适合有代码基础的用户） #

该方案性能更高、更稳定：

• 登录WordPress后台，进入 外观 → 主题文件编辑器，或通过FTP进入站点根目录的wp-content/themes/当前使用主题文件夹
• 打开header.php文件，给最外层的页头容器标签添加class="notranslate"，比如原有代码为<header id="site-header">，修改后为<header id="site-header" class="notranslate">
• 打开footer.php文件，同理给最外层的页脚容器标签添加class="notranslate"
• 保存文件后清除缓存即可生效。

注意：使用官方公开主题的用户建议先创建子主题再修改模板，避免主题更新后自定义配置被覆盖。

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