WordPress 动态 CSS 时间戳：彻底解决缓存不更新问题

做前端或 WordPress 的同学，常常遇到一个恼人的问题：CSS 明明已经更新了，但用户浏览器却还在加载旧的样式。

这背后其实是 浏览器缓存 在作怪。

🔍 为什么会出现这个问题？

浏览器和 CDN 会对静态文件（如 CSS、JS、图片）进行缓存，以加快网站加载速度。

但一旦缓存生效，即使你在服务器上修改了 CSS 文件，用户的浏览器也可能 继续使用旧版本的文件，导致样式不更新。

一般主体默认的加载模式

if ( ! function_exists( 'ghostpool_enqueue_child_styles' ) ) {
	function ghostpool_enqueue_child_styles() {
		wp_enqueue_style( 'gp-parent-style', get_template_directory_uri() . '/style.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'ghostpool_enqueue_child_styles' );

换句话说：

• 你改了文件 ✅

• 服务器有新版本 ✅

• 用户浏览器还在用旧的 ❌

这就是我们常见的 缓存不更新问题。

💡 解决思路

要想让浏览器重新拉取最新的 CSS，必须让它以为“这是一个新文件”。

常见的两种方式：

1. 更改文件名

   比如 style.css 改成 style-v2.css。

   缺点是：操作麻烦，每次修改都要手动换名字。

2. 在文件 URL 上加版本号（query 参数）

   比如：

style.css?ver=20250826

2. 只要版本号变化，浏览器就会当做新文件来请求。

👉 WordPress 默认就会在资源 URL 上加上 ?ver=xxx 参数，但这个版本号通常是 主题或 WordPress 的版本号，并不会随着你修改文件而更新。

所以我们需要做的就是：

让版本号和文件的修改时间绑定。

⚙️ 实现方法

WordPress 提供了一个 wp_enqueue_style() 函数来加载 CSS。

这个函数有一个 $ver 参数，可以用来指定版本号。

我们只需要把 文件修改时间 作为版本号传进去即可。

这样，每次你更新了文件，文件的修改时间就会变动，URL 也会跟着更新，浏览器就会强制加载最新的文件。

代码示例

在子主题的 functions.php 添加以下代码：

<?php
// 动态给 CSS 添加文件修改时间戳
add_action('wp_enqueue_scripts', function() {
    // 父主题样式
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        array(),
        file_exists(get_template_directory() . '/style.css')
            ? filemtime(get_template_directory() . '/style.css')
            : null
    );

    // 子主题样式
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        file_exists(get_stylesheet_directory() . '/style.css')
            ? filemtime(get_stylesheet_directory() . '/style.css')
            : null
    );
});

输出效果

修改前（默认 WordPress）：

<link rel="stylesheet" href="https://www.newvfx.com/wp-content/themes/newvfx-child/style.css?ver=6.7.2">

修改后（动态时间戳）：

<link rel="stylesheet" href="https://www.newvfx.com/wp-content/themes/newvfx-child/style.css?ver=1756148519">

其中的 1756148519 就是文件的 Unix 时间戳，每次修改文件后都会更新。

🚀 优势

• ✅ 自动更新：每次修改 CSS，浏览器都会加载最新的版本

• ✅ 无需手动改文件名

• ✅ 兼容 CDN：只要 URL 变了，CDN 也会重新拉取文件

• ✅ 高效稳定：文件不改时，URL 不变，缓存依旧有效，不会浪费资源

📌 小结

• 浏览器缓存 是导致样式不更新的核心问题

• 文件名或版本号变化 才能强制刷新缓存

• WordPress 默认的版本号不随文件变化 → 我们用 文件修改时间戳 来解决

• 这样一来，更新文件立即生效，缓存文件继续利用，两全其美

👉 这就是 动态 CSS 时间戳 的原理和实现方法。

用过一次，你就再也不会为缓存问题抓狂了。