WordPress JS与CSS组合失效求助（Twenty Seventeen主题）

Hey there, let’s work through diagnosing why your toggle functionality isn’t playing nice with the Twenty Seventeen theme. Here’s a step-by-step breakdown to pinpoint and fix the issue:

1. Check JavaScript Event Binding & Element Targeting #

• First, confirm your JS is correctly targeting your toggle buttons (like button_colour_yellow or button_colour_red) and the elements you want to modify (e.g., the page body or content container).
• Always wrap your event listeners in a DOM-ready handler to avoid running code before elements load. For example:

  document.addEventListener('DOMContentLoaded', function() {
    const yellowBtn = document.getElementById('button_colour_yellow');
    if (yellowBtn) {
      yellowBtn.addEventListener('click', function() {
        document.body.style.backgroundColor = '#FFFFDB';
      });
    }
  });
  

• Pop open your browser’s console (F12 > Console tab) to look for errors like "Cannot read property 'addEventListener' of null" — this usually means a typo in an ID/class, or your JS is running before the element exists.

2. Resolve CSS Specificity Conflicts #

• Twenty Seventeen has built-in styles that might override your custom changes. Use DevTools (F12 > Elements tab) to inspect the element you’re modifying:
  • If inline styles from your JS show up but are crossed out, a higher-specificity theme style is winning. Fix this by boosting your custom CSS specificity (e.g., use body.page-id-123 instead of just body, where 123 is your page’s ID) or use !important sparingly:

    .custom-yellow-bg {
      background-color: #FFFFDB !important;
    }
    

3. Confirm Assets Are Loaded Properly #

• Make sure your custom JS and CSS are enqueued correctly in WordPress. Add this to your child theme’s functions.php (never edit the parent theme directly):

  function custom_toggle_assets() {
    wp_enqueue_script('custom-toggle-js', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery'), '1.0', true);
    wp_enqueue_style('custom-toggle-css', get_stylesheet_directory_uri() . '/css/toggle.css', array(), '1.0');
  }
  add_action('wp_enqueue_scripts', 'custom_toggle_assets');
  

• Check the "Network" tab in DevTools to ensure your assets load with a 200 status code. A 404 means your file path is wrong — double-check the locations of your JS/CSS files.

4. Rule Out Theme/Plugin Conflicts #

• Temporarily switch to a default theme like Twenty Twenty-Three. If the toggle works here, the issue is specific to Twenty Seventeen’s structure or styles.
• Disable all plugins one by one, testing the toggle after each disable. If it starts working, you’ve found a conflicting plugin.

5. Fix Malformed HTML #

• The snippet you shared has truncated table markup — make sure all tags are properly closed (e.g., </td>, </tr>, </table>). Broken HTML can break JS event binding.
• Also, fix typos in classes: you have aligncente instead of aligncenter — this might cause layout issues that interfere with button functionality.

If you can share your full JS/CSS code and complete toggle bar HTML, we can dig even deeper, but these steps should help you track down the root problem.

内容的提问来源于stack exchange，提问作者Yu-Jin Lim