如何在我的网站上有 2 个 Google 翻译小部件？答案

【问题标题】：How can I have 2 Google Translate widgets on my website?如何在我的网站上有 2 个 Google 翻译小部件？
【发布时间】：2018-02-27 08:07:45
【问题描述】：

我目前正在开发一个 WordPress 网站，我希望在该网站上有两个 Google 翻译小部件。我希望创建的场景如下：

台式机/笔记本电脑/平板电脑：

我希望 Google 翻译小部件出现在最顶部的栏中。

移动设备：

我希望 Google 翻译小部件从顶部栏中隐藏并显示在页脚中。

到目前为止我做了什么......

在header.php中，我在适当的地方输入了以下代码：

<div id="google_translate">
    <div id="google_translate_element"></div>
        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: false, gaTrack: true, gaId: 'UA-xxxxxxxx-x'}, 'google_translate_element');
            }
        </script>
        <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </div>

CSS：

@media screen and (max-width: 991px) {
  #google_translate {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

以上 PHP/CSS 等，成功将 Google Translate Widget 添加到大屏幕的 Top Bar，同时在移动设备上隐藏 Widget。

出现问题的地方...

然后，我将相同的 Google 翻译小部件代码粘贴到 footer.php 文件中。在我能够处理 CSS 之前，Google 翻译小部件不会出现在页脚中，而是出现在标题顶部栏中的 Google 翻译小部件旁边。

这是怎么回事？我该如何解决这个问题，以便我能够处理 CSS 以在更大的屏幕上隐藏 Widget？

【问题讨论】：

您是否粘贴了具有相同“id”属性的相同代码？可能是这个问题...
我猜这与定位 ID google_translate 有关。 HTML 标准规定所有 id 都应该是唯一的。你能分享谷歌翻译代码吗？也许你可以调整它来寻找google_translate_2。此外，您可以编写一些 javascript 来在某些屏幕尺寸上移动元素。
感谢您的洞察力。我尝试了“类”替代方法并更改了“id”属性。不幸的是，当我这样做时，小部件完全消失了。

标签： javascript php html css

【解决方案1】：

问题在于您的 Google 小部件在其标记中包含 ID，以及 ID must be unique throughout the page。复制小部件也会复制 ID。没有唯一 ID 会导致 JavaScript 选择器只能使用第一个 ID。

因此，考虑到您只想在移动视图上移动小部件，解决此问题的最佳方法是使用 media queries。您需要为 absolute 解决方案共享整个标记，但一般前提是简单地将小部件移动到屏幕底部的某个断点处，例如：

@media screen and (max-width: 786px) {
  .widget {
    position: absolute;
    bottom: 0;
  }
}

<div class="widget">Widget</div>
<div class="container">
  <p>Content</p>
</div>

默认情况下，小部件会在内容上方，但对于移动设备，它会出现在页面底部。

【讨论】：

【解决方案2】：

这是一个 JavaScript 解决方案，您可以尝试将其插入您的页面。您需要为您的 header 和 footer 整理 ID，但我认为这可以帮助您入门。

<script type="text/javascript">
function placeTranslateWidget() {
    var w = window.innerWidth;
    // if the screen is small move the html element to the footer.
    if(w < 991){ // 991 would be the width of the mobile break point.
      document.getElementById('google_translate').appendChild( document. getElementById('footer') )
    }else{
      document.getElementById('google_translate').appendChild( document. getElementById('header') )
    }
}
// run this function after page loads;
placeTranslateWidget();
// runs the function any time the body is resized.
document.getElementsByTagName("BODY")[0].onresize = function() {placeTranslateWidget()};
</script>

【讨论】：