如何通过WordPress Enqueue Array让子主题样式表最后加载？

首先，我们来拆解你的问题，先回答核心疑问，再给出具体修复方案：

关于依赖数组的作用 #

你提到的「把最后一个CSS ID加入数组」的思路是正确的，但有个前提：你得找对真正需要依赖的样式ID，并且这些样式是通过WordPress的wp_enqueue_style机制注册的。

WordPress的样式队列是基于依赖关系排序的：如果你的样式依赖某个样式ID，WordPress会确保你的样式一定在该依赖样式之后加载，不管它们的注册顺序或钩子优先级如何。但如果那个「最后加载的样式」是硬编码到模板里的（没有通过wp_enqueue_style注册），依赖数组就起不到作用——因为它不在WordPress的队列系统里。

你的代码存在的问题 #

看你提供的代码，有两个独立的wp_enqueue_scripts钩子函数，这可能导致样式加载顺序混乱：

• 第一个函数chld_thm_cfg_parent_css优先级10，加载了父主题的style.css
• 第二个函数my_theme_enqueue_styles优先级99999，加载了父主题的site-banner.css和你的子主题样式

另外，你可能没有把所有需要依赖的样式ID都加入数组，还存在重复加载父主题样式的情况（两个函数都加载了父主题基础样式）。

正确的修复方案 #

步骤1：合并并优化你的enqueue函数 #

把所有样式加载逻辑合并到一个函数里，避免冲突，同时明确依赖关系：

<?php
if ( !defined( 'ABSPATH' ) ) exit;

function my_theme_enqueue_styles() {
    // 1. 加载父主题主样式（基础依赖）
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    // 2. 加载父主题的site-banner.css，依赖父主题主样式
    wp_enqueue_style( 'tesseract-site-banner', get_template_directory_uri() . '/css/site-banner.css', array('parent-style') );
    
    // 3. 加载子主题的site-banner1.css，依赖所有需要在它之前加载的样式
    // 这里把你找到的所有后续加载的样式ID都加入数组
    $dependencies = array(
        'parent-style',
        'tesseract-site-banner',
        'tt-easy-google-font-styles'
        // 比如你在源码里看到最后加载的样式ID是'plugin-custom-css'，就把它加进来
    );
    wp_enqueue_style( 'child-site-banner', get_stylesheet_directory_uri() . '/site-banner1.css', $dependencies );
}
// 设置足够高的优先级，确保这个函数最后执行
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99999 );

步骤2：确认所有依赖的样式ID #

要找到所有需要依赖的样式ID：

1. 打开网站前端页面，查看HTML源码
2. 找到所有<link rel="stylesheet">标签，看每个标签的id属性（格式为xxxx-css，其中xxxx就是样式ID）
3. 把最后几个加载的样式ID都加入你的依赖数组，确保子主题样式排在它们之后

步骤3：清空缓存 #

很多时候样式顺序不对是缓存导致的，记得清空：

• WordPress后台的缓存插件（如果有的话）
• 浏览器缓存（按Ctrl+F5强制刷新）

极端情况的处理 #

如果上述方法都无效，可能是某个样式是硬编码到模板里的（没有通过wp_enqueue_style注册），这时候可以：

1. 把子主题样式移到wp_footer钩子加载（这样会在所有头部样式之后）：

function load_child_style_in_footer() {
    wp_enqueue_style( 'child-site-banner', get_stylesheet_directory_uri() . '/site-banner1.css' );
}
add_action( 'wp_footer', 'load_child_style_in_footer', 99999 );

2. 作为最后的手段，在样式规则里添加!important（不推荐，会增加样式维护难度）：

.your-custom-selector {
    color: #ff0000 !important;
}

总结 #

• 依赖数组是WordPress推荐的样式加载顺序控制方式，只要找对依赖的样式ID，就能确保你的样式在目标样式之后加载
• 合并enqueue函数、设置高优先级钩子、清空缓存是解决问题的关键
• 尽量避免使用!important，优先通过依赖和钩子优先级控制顺序

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