如何在WordPress站点中排除表单元素的CSS类并移除按钮中的wp-dark-mode-ignore类？

Hey there! Let's break down solutions for your two WordPress customization needs step by step:

How you approach this depends on where your form is coming from (theme-built, plugin like Contact Form 7, etc.), but here are two reliable methods:

• Method 1: Use PHP Filters (Recommended for Plugin/Theme-Generated Forms)
  If your form is generated by a plugin (e.g., Contact Form 7) or your theme, you can hook into dedicated filters to strip unwanted classes. For example, with Contact Form 7, use the wpcf7_form_element_class filter:

add_filter('wpcf7_form_element_class', 'exclude_unwanted_form_class', 10, 3);
function exclude_unwanted_form_class($classes, $tag, $args) {
    // Replace 'unwanted-css-class' with the class you want to remove
    $classes = array_diff($classes, array('unwanted-css-class'));
    return $classes;
}

Drop this code into your child theme's functions.php file or a custom plugin to avoid losing changes when updating your theme.

• Method 2: Dynamic Removal with JavaScript
  If you can't track down the right PHP filter, use JavaScript to strip the class after the page loads:

document.addEventListener('DOMContentLoaded', function() {
    // Target all form elements (adjust the selector to match your specific form)
    const formElements = document.querySelectorAll('#your-form-id input, #your-form-id textarea, #your-form-id select');
    formElements.forEach(element => {
        element.classList.remove('unwanted-css-class');
    });
});

Add this to your theme's custom JavaScript section (usually found in Appearance > Customize > Additional JS) or enqueue it properly via PHP.

Your target button has the class bookingbutton2 wp-dark-mode-ignore — here are two ways to remove that dark mode exclusion class:

• Method 1: PHP Filter to Modify Content Output
  If the button is rendered via your theme or a plugin, use the the_content filter to find and replace the button's HTML:

add_filter('the_content', 'remove_dark_mode_ignore_class', 20);
function remove_dark_mode_ignore_class($content) {
    // Match the exact button HTML and remove the unwanted class
    $search = '<button type="button" class="bookingbutton2 wp-dark-mode-ignore" style=""> <span>Reserve Now</span> </button>';
    $replace = '<button type="button" class="bookingbutton2" style=""> <span>Reserve Now</span> </button>';
    return str_replace($search, $replace, $content);
}

Note: This works best if the button's HTML is consistent across your site.

• Method 2: Quick JavaScript Fix
  For a simpler, minimal-code approach, use JavaScript to dynamically remove the class:

document.addEventListener('DOMContentLoaded', function() {
    const reserveButton = document.querySelector('button.bookingbutton2.wp-dark-mode-ignore');
    if (reserveButton) {
        reserveButton.classList.remove('wp-dark-mode-ignore');
    }
});

Add this to your theme's Additional JS section, and it will run as soon as the page finishes loading.

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