开发WordPress主题引入Bootstrap后自定义CSS不生效如何解决？

问题1：自定义样式未声明依赖Bootstrap，无法保证加载顺序 #

你当前注册style.css时$deps参数为空数组，即使你把注册代码写在Bootstrap之后，WordPress也可能调整加载顺序，导致你的样式被Bootstrap覆盖。
修改functions.php中style.css的注册代码：

// 修改前
wp_register_style('style',get_template_directory_uri() . '/style.css', array(),false,'all');
// 修改后，添加bootstrap作为依赖，强制在bootstrap之后加载
wp_register_style('style',get_template_directory_uri() . '/style.css', array('bootstrap'),false,'all');

问题2：CSS规则存在语法错误 #

你的自定义CSS里十六进制颜色值加了多余的双引号，属于语法错误，浏览器会直接忽略这条规则。
修改style.css中的body样式：

/* 修改前 */
body {
  background: "#ff03ab";
}
/* 修改后 */
body {
  background: #ff03ab;
}

问题3：样式版本号未更新导致的缓存残留 #

你注册样式时版本号参数设为false，会默认使用WordPress核心版本号，如果你修改CSS后核心版本没变，即使清了浏览器缓存也可能命中服务器/CDN缓存。可以把版本号改成自定义值，每次改CSS都更新版本号强制拉新：

wp_register_style('style',get_template_directory_uri() . '/style.css', array('bootstrap'),'1.0.1','all');

额外排查方向 #

如果修改后仍不生效，可以打开浏览器开发者工具的元素面板，选中body元素查看样式面板，看你的自定义规则是否出现在列表中：

• 如果没出现：检查style.css路径是否正确，文件是否放在主题根目录
• 如果出现但被划掉：说明有更高优先级的样式覆盖了你的规则，可以给你的规则加权重，比如body { background: #ff03ab !important; }临时测试，找到覆盖的样式源后再调整优先级。

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