WordPress主题自定义样式被Bootstrap覆盖，如何调整CSS加载顺序？

一、CSS加载顺序的控制逻辑 #

WordPress中CSS（及JS）的加载由wp_enqueue_style()函数管理，加载顺序主要由两个因素决定：

• 依赖关系：如果文件B依赖文件A，WordPress会确保A先于B加载
• 入队先后顺序：无依赖关系的文件，会按照调用wp_enqueue_style()的先后顺序加载

你遇到的问题，是因为主题先入队了mysite.css，之后又入队了bootstrap.css且未设置依赖，导致后者的样式覆盖了前者。

二、调整加载顺序的具体操作 #

找到主题目录下的functions.php文件（路径：wp-content/themes/mysite-acf/functions.php），定位到注册这两个CSS的代码段，通过修改依赖关系调整顺序：

1. 定位原代码 #

主题中通常会有类似这样的入队代码：

// 入队主题自定义CSS
wp_enqueue_style( 'mysite-style-css', get_template_directory_uri() . '/assets/css/mysite.css', array(), '1674048874' );

// 入队Bootstrap CSS
wp_enqueue_style( 'bootstrap-style-css', get_template_directory_uri() . '/assets/css/bootstrap.css', array(), '1643275784' );

2. 修改依赖与入队顺序 #

将主题CSS的依赖参数设置为Bootstrap的样式ID，同时调整入队顺序，确保Bootstrap先加载：

// 先入队Bootstrap CSS（无依赖）
wp_enqueue_style( 'bootstrap-style-css', get_template_directory_uri() . '/assets/css/bootstrap.css', array(), '1643275784' );

// 入队主题自定义CSS，依赖Bootstrap
wp_enqueue_style( 'mysite-style-css', get_template_directory_uri() . '/assets/css/mysite.css', array( 'bootstrap-style-css' ), '1674048874' );

• 第三个参数array( 'bootstrap-style-css' )表示mysite-style-css必须在bootstrap-style-css加载完成后才会加载
• 调整入队顺序是双重保障，避免依赖逻辑失效时仍出现顺序错误

3. 验证修改效果 #

保存functions.php后刷新前端页面，查看页面源码的head标签，加载顺序应变为：

<link rel='stylesheet' id='addtoany-css'  href='https://www.mysite.co.uk/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-style-css'  href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/bootstrap.css?ver=1643275784' type='text/css' media='all' />
<link rel='stylesheet' id='mysite-style-css'  href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/mysite.css?ver=1674048874' type='text/css' media='all' />

此时主题CSS的样式就能正确覆盖Bootstrap的默认样式。

注意事项 #

• 修改functions.php前建议备份文件，避免语法错误导致站点无法访问
• 如果找不到对应入队代码，可能是主题通过自定义函数或后台面板加载CSS，可在主题的inc目录或设置页查找相关配置

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