WordPress主题开发：新增CSS代码无法生效问题求助

一、CSS修改不生效的解决方案 #

1. 强制禁用浏览器缓存 #

打开Chrome/Edge开发者工具（快捷键F12或右键「检查」），切换到Network标签，勾选右上角的「Disable cache」（禁用缓存），刷新页面时就会重新加载所有静态资源，不会使用浏览器缓存的旧文件。

2. 给CSS文件添加自动更新的版本号 #

WordPress的wp_enqueue_style函数支持添加版本参数，文件内容修改时版本号自动变化，可强制浏览器加载新文件。修改你的load_stylesheets函数，给每个CSS文件加上基于文件修改时间的版本号：

/********************** */
/** LOAD CSS FILE(S) */
/********************** */
function load_stylesheets()
{
    wp_enqueue_style('custom_google_fonts', '//fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Rubik:wght@300;500;700&display=swap');
    /** Loading CSS Files */
    wp_enqueue_style('general', get_theme_file_uri('/css/general.css'), array(), filemtime(get_theme_file_path('/css/general.css'))); 
    wp_enqueue_style('main_section', get_template_directory_uri().'/css/main_section.css', array(), filemtime(get_template_directory().'/css/main_section.css')); 
    wp_enqueue_style('interior-pages', get_theme_file_uri('/css/interior-pages.css'), array(), filemtime(get_theme_file_path('/css/interior-pages.css')));
    wp_enqueue_style('blog-style', get_theme_file_uri('/css/blog-style.css'), array(), filemtime(get_theme_file_path('/css/blog-style.css')));
    /** Responsive css */
    wp_enqueue_style('queries', get_template_directory_uri().'/css/queries.css', array(), filemtime(get_template_directory().'/css/queries.css')); 
}

add_action('wp_enqueue_scripts', 'load_stylesheets');

filemtime()函数会获取文件最后修改时间作为版本号，每次修改CSS文件后这个值都会变化，WordPress会生成新的资源URL，彻底避免缓存问题。

3. 检查并清空WordPress缓存插件（如果有安装） #

如果本地环境装了缓存类插件（比如WP Rocket、W3 Total Cache），直接禁用插件或者在插件后台清空缓存——这类插件会强制缓存静态资源，导致修改无法实时生效。

4. 确认修改的是正确的CSS文件 #

核对开发者工具Network标签中CSS文件的请求路径，确保和你本地修改的文件路径一致，避免出现子主题/父主题文件混淆、路径写错的情况。

二、Chrome中用本地文件覆盖CSS的操作步骤 #

1. 打开Chrome开发者工具（F12或右键「检查」）
2. 切换到Sources标签页，点击左侧面板右上角的「>>」按钮，找到并选择Overrides选项
3. 点击「Select folder for overrides」，选择你本地CSS文件所在的文件夹，在弹出的权限请求窗口中点击「允许」
4. 回到Elements标签页，找到要修改的CSS规则，右键点击对应的文件名（比如general.css），选择「Edit for overrides」
5. 此时在开发者工具中修改的CSS代码会自动保存到本地对应文件，刷新页面后修改直接生效

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