无法让WordPress子主题CSS在插件之后加载/入队的问题

核心问题分析 #

你遇到的问题核心是子主题CSS路径错误，以及优先级设置未匹配插件的加载顺序；另外插件的!important样式需要更高权重的选择器来覆盖。

针对你的两个疑问 #

1. 重复入队是否需要移除？
   WordPress中，wp_enqueue_style如果使用相同的handle（第一个参数），重复调用会被忽略；如果是不同handle则会重复加载。你不需要移除原有入队代码，但要确保新代码的handle唯一且路径正确。如果原有代码已经正确入队了子主题CSS，重复入队同handle的代码确实无效，此时只需调整原有代码的优先级和依赖即可。

2. 路径写法是否正确？
   完全错误！get_template_directory_uri()指向的是父主题的目录，子主题的目录必须用get_stylesheet_directory_uri()。你之前的代码实际加载的是父主题的style.css，而非子主题的，这是导致代码无效的核心原因。

代码修正方案 #

修正子主题CSS入队代码 #

替换你之前的无效代码为以下内容：

function my_theme_enqueue_child_styles() {
    // 加载子主题style.css，依赖父主题CSS的handle，确保加载顺序
    wp_enqueue_style( 
        'child-css', 
        get_stylesheet_directory_uri() . '/style.css', 
        array( 'chld_thm_cfg_parent' ), // 依赖父主题CSS的handle，确保在父主题之后加载
        wp_get_theme()->get('Version'), // 用主题版本号避免缓存问题
        'all' 
    );
}
// 设置优先级为100，确保在优先级99的插件之后加载
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_child_styles', 100 );

关于父主题入队代码的说明 #

你找到的那段父主题入队代码是正确的：

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'font-awesome-5-free','saasland-dark-support','bootstrap','themify-icon','saasland-elementor','saasland-remove-animation','magnific-popup','eleganticons','saasland-wpd','saasland-main','saasland-elements','saasland-comments','saasland-footer','saasland-gutenberg' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 99 );

get_template_directory_uri()用于加载父主题资源是正确的，你无需修改这段代码的优先级，只需确保子主题CSS依赖它即可。

插件!important样式覆盖方案 #

如果调整加载顺序后仍无法覆盖，可通过以下方法解决：

• 提升选择器权重：比如插件样式是.plugin-div { color: #000 !important; }，你可以用更具体的选择器，如body .container .plugin-div { color: #fff !important; }，更高权重的选择器会覆盖原有样式。
• 使用内联样式：针对特定元素，直接在HTML中添加style属性，但仅适合个别元素。
• 禁用插件CSS（谨慎操作）：如果插件允许，可在插件设置中关闭其CSS加载，然后在子主题中重新编写该部分样式。

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