Hey Craig, let's get that responsive Google Translate setup working perfectly for your WordPress site. I've put together a complete, straightforward solution that hits all your requirements — desktop/laptop/tablet showing the widget in the top bar, mobile hiding that and showing it in the footer. Here's how to implement it:

1. Add Conditional Widget Placement #

First, we'll add two separate Google Translate containers: one in your header.php (for larger screens) and one in your footer.php (for mobile). This gives us full control over visibility via CSS.

In header.php (place this in your top bar section): #

<!-- Google Translate for Desktop/Tablet -->
<div class="google-translate google-translate--desktop">
  <div id="google_translate_element_desktop"></div>
</div>

In footer.php (place this where you want the mobile widget to appear): #

<!-- Google Translate for Mobile -->
<div class="google-translate google-translate--mobile">
  <div id="google_translate_element_mobile"></div>
</div>

2. Add Google Translate Initialization Script #

Next, we need to load the Google Translate script and initialize both widgets. Add this right before the closing </body> tag in your footer.php (or enqueue it properly via functions.php if you prefer best practices):

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  // Initialize desktop widget
  new google.translate.TranslateElement(
    {
      pageLanguage: 'en', // Replace with your site's default language
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    },
    'google_translate_element_desktop'
  );
  
  // Initialize mobile widget
  new google.translate.TranslateElement(
    {
      pageLanguage: 'en', // Match default language here too
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    },
    'google_translate_element_mobile'
  );
}
</script>

3. Add Responsive CSS #

Now we'll use media queries to toggle visibility based on screen size. Add this CSS to your theme's style.css file, or via the WordPress Customizer > Additional CSS:

/* Default state: show desktop widget, hide mobile */
.google-translate--desktop {
  display: block;
  /* Add your top bar styling here — example: */
  padding: 6px 18px;
  text-align: right;
}

.google-translate--mobile {
  display: none;
  /* Add your footer styling here — example: */
  padding: 12px 0;
  text-align: center;
  border-top: 1px solid #eee;
}

/* Mobile breakpoint (adjust 767px to match your theme's mobile cutoff) */
@media (max-width: 767px) {
  .google-translate--desktop {
    display: none;
  }
  
  .google-translate--mobile {
    display: block;
  }
}

/* Optional: Ensure tablets (768px-1024px) show desktop widget */
@media (min-width: 768px) and (max-width: 1024px) {
  .google-translate--desktop {
    display: block;
  }
  
  .google-translate--mobile {
    display: none;
  }
}

4. Optimization & Debugging Tips #

• Cache Clear: After making changes, clear your WordPress cache (if using a plugin like WP Rocket or WP Super Cache) and browser cache to see updates.
• Language Adjustment: Replace 'en' in the JS with your site's default language code (e.g., 'zh-CN' for Simplified Chinese).
• Style Conflict: If the widget doesn't look right, use your browser's dev tools (F12) to inspect the element and adjust the CSS selectors or add !important temporarily to test (avoid overusing !important long-term).
• Proper Script Enqueuing: For better WordPress practices, instead of adding the script directly to footer.php, enqueue it via functions.php:

  function enqueue_google_translate_script() {
    wp_enqueue_script( 'google-translate', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit', array(), null, true );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_google_translate_script' );
  

That should cover everything! Test it on different devices to make sure the widget switches locations correctly. If you run into any weird styling issues, just tweak the CSS to match your theme's design.

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