我怎么能在我的网站上有2个谷歌翻译小部件？

Question

我目前正在一个WordPress网站工作，在那里我希望有两个谷歌翻译小部件在网站上。我想提出的设想如下：

Desktop/Laptop/Tablet:

我希望Google翻译Widget出现在最上面的栏中。

移动设备：

我希望谷歌翻译Widget被隐藏在顶部栏和显示在页脚。

我迄今所做的一切.

在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转换Widget添加到大屏幕的Top，同时将Widget隐藏在移动设备上。

发生问题的.

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

这是怎么可能的，我如何解决这个问题，以便我能够在CSS上工作，就像在大屏幕上隐藏Widget一样？

Answer 1

这里有一个javascript解决方案，您可以尝试插入您的页面。您需要为您的header和footer整理I，但我认为这可能会让您开始工作。

<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>

Answer 2

问题是您的Google小部件在标记中包含is，is包含必须在整个页面中是唯一的。复制小部件也会复制ID，如果没有唯一的ID，JavaScript选择器只能使用第一个ID。

因此，考虑到您只是想在移动视图上移动小部件，最好的解决方法是使用媒体查询。您需要共享整个标记以获得绝对解决方案，但一般的前提是将小部件移动到某个断点的屏幕底部，如下所示：

​

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

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

​

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