WordPress 4.9插件中jQuery Datepicker圆圈样式来源排查求助

Hey there! Let's figure out why those odd circle patterns are popping up in your Datepicker's day view—especially since other plugins using Datepicker on the same site work fine. Here are the most likely causes and how to fix them:

1. CSS Style Conflicts (The #1 Culprit) #

This is almost always the issue. Your custom plugin or active theme probably has global CSS rules overriding the default jQuery UI Datepicker styles. For example:

• A theme might have a rule like a { border-radius: 50%; background: #ddd; } that targets all anchor tags, including the <a> elements inside Datepicker's day cells.
• Your plugin's CSS might use overly broad selectors that accidentally apply to Datepicker elements.

To track this down:

• Open your browser's DevTools (F12), click the element picker, and select one of the circled date cells.
• Look in the Styles panel to see which CSS rules are adding border-radius, circular backgrounds, or other shape-altering properties. Note the source file and selector causing it.

2. Missing/Incorrect jQuery UI Datepicker Styles #

WordPress 4.9 comes with a bundled version of jQuery UI (1.11.4), but if your plugin isn't properly enqueuing the official Datepicker styles, it might fall back to generic or conflicting styles.

Double-check your plugin's enqueue code—make sure you're loading core WordPress styles and scripts instead of custom external versions:

add_action( 'wp_enqueue_scripts', 'my_plugin_load_datepicker' );
function my_plugin_load_datepicker() {
    // Load WordPress's bundled jQuery UI Datepicker script
    wp_enqueue_script( 'jquery-ui-datepicker' );
    // Load the matching Datepicker stylesheet
    wp_enqueue_style( 'jquery-ui-datepicker' );
}

3. Style Priority Issues #

Even if you're loading the correct styles, your theme or plugin's CSS might have higher specificity that overrides Datepicker's default styles. For example, a theme rule like body .ui-datepicker td a will take precedence over the core Datepicker selector .ui-datepicker td a.

Fix this by:

• Using more specific selectors in your plugin's CSS (e.g., .my-plugin-datepicker-wrapper .ui-datepicker td a) to target only your Datepicker instance.
• As a last resort, use !important sparingly to override conflicting rules (e.g., .ui-datepicker td a { border-radius: 0 !important; }).

Quick Test to Narrow It Down #

• Temporarily switch to a default WordPress theme like Twenty Seventeen. If the circles disappear, the problem is in your theme's CSS.
• Deactivate other plugins one by one (though you said others work, but it's worth ruling out edge cases) to confirm the conflict is isolated to your plugin or theme.

Once you've identified the conflicting CSS rule, adjusting it to exclude Datepicker elements or increasing your own selector's specificity should resolve the circle issue.

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