求助：如何针对iPad、平板及移动设备修改WordPress TopBar插件内容？

Hey there, let's work through why your media queries aren't modifying the TopBar plugin content as expected. I’ve run into similar issues with WordPress plugins before, so here’s a breakdown of the most likely fixes:

1. First, Check for Built-in Responsive Settings #

Before diving into code, head to your WordPress dashboard and poke around the TopBar plugin’s settings page. A lot of bar plugins come with built-in fields for mobile-specific text or even separate mobile bar configurations. If this exists, it’s the simplest fix—no custom code required!

2. CSS Can’t Directly Change Element Text (Here’s What to Use Instead) #

A common misconception: CSS’s content property only works for pseudo-elements (like :before or :after), not for replacing the actual text inside HTML elements. If you’re trying to swap the text in .tpbr_bx or .tpbr_calltoaction on mobile, JavaScript is the way to go.

Here’s a straightforward script you can add to your site:

// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', function() {
  // Grab the elements we need to modify
  const topBarElement = document.querySelector('.tpbr_bx');
  const ctaButton = document.querySelector('.tpbr_calltoaction');

  // Function to update text based on screen width
  function updateTopBarContent() {
    // Adjust the breakpoint (768px is a common iPad/tablet cutoff)
    if (window.innerWidth <= 768) {
      topBarElement.textContent = "Your mobile-friendly top bar message here";
      ctaButton.textContent = "Mobile CTA Button Text";
    } else {
      // Reset to original desktop text
      topBarElement.textContent = "Original desktop top bar text";
      ctaButton.textContent = "Desktop CTA Button Text";
    }
  }

  // Run the function on page load
  updateTopBarContent();

  // Re-run when the window is resized
  window.addEventListener('resize', updateTopBarContent);
});

You can add this script via:

• A custom JS plugin (like "Simple Custom CSS and JS")
• Your child theme’s functions.php (enqueue it properly)
• Your theme’s customizer (if it has a JS section)

3. If You’re Trying to Style (Not Change) Text: Fix CSS Specificity #

If your goal was to adjust styles (font size, color, etc.) instead of text content, the issue is likely CSS specificity. Plugin styles often have higher priority than your custom CSS, so your rules get overridden.

Try making your selectors more specific, like this:

/* Target screens up to 768px (iPad/tablet) */
@media screen and (max-width: 768px) {
  /* Add `body` to increase specificity over plugin styles */
  body .tpbr_bx {
    font-size: 14px;
    color: #2d2d2d;
  }

  body .tpbr_calltoaction {
    background-color: #0073aa;
    padding: 8px 16px;
  }
}

Pro tip: Use your browser’s dev tools (right-click → Inspect) to check if your styles are crossed out (meaning they’re overridden). If they are, add more specificity or use !important as a last resort.

4. Double-Check Your Custom Code is Loading #

• For CSS: Make sure you’re adding media queries in the right place—either your theme’s "Additional CSS" section (Appearance → Customize → Additional CSS) or a child theme’s style.css file.
• For JS: If you’re enqueuing via functions.php, use this structure to ensure it loads correctly:

function enqueue_custom_topbar_script() {
  wp_enqueue_script(
    'custom-topbar-script',
    get_stylesheet_directory_uri() . '/js/custom-topbar.js',
    array('jquery'),
    '1.0',
    true // Load in footer for better performance
  );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_topbar_script');

5. Clear Your Cache! #

Don’t skip this step—WordPress caching plugins (like WP Rocket, W3 Total Cache) and browser cache can prevent your new code from loading. Clear both after making changes to see if it works.

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