分析 `wp_enqueue_script()` 和 `wp_enqueue_style()` 中的 `ver` 参数，以及它如何帮助解决浏览器缓存问题。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好！今天咱们来聊聊 WordPress 里的 wp_enqueue_script() 和 wp_enqueue_style() 这两个函数，特别是它们中的 ver 参数，看看这小家伙是怎么帮我们搞定浏览器缓存这个烦人问题的。

开场白：浏览器缓存，爱恨交织的小妖精

浏览器缓存，就像你家里的一个储藏室。当你第一次访问一个网站时，浏览器会把一些静态资源，比如 JavaScript 文件和 CSS 样式表，一股脑儿地塞进这个储藏室里。下次你再访问这个网站时，浏览器会先看看储藏室里有没有这些东西，如果有，就直接从储藏室里拿出来用，不用再去服务器上请求了。

这样做的好处显而易见：速度快！用户体验嗖嗖地提升。但是，问题也来了：如果你更新了 JavaScript 文件或 CSS 样式表，浏览器却还傻乎乎地用着储藏室里的旧版本，那网站就乱套了！这就像你换了新发型，你妈却还让你梳回原来的发型一样，让人崩溃。

wp_enqueue_script() 和 wp_enqueue_style()：WordPress 的资源管理器

wp_enqueue_script() 和 wp_enqueue_style() 是 WordPress 提供的两个函数，用来管理主题或插件中使用的 JavaScript 文件和 CSS 样式表。它们就像是 WordPress 的资源管理器，可以让你轻松地把这些资源加载到网页上。

先看看这两个函数的标准用法：

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

各个参数的含义如下：

$handle：给这个资源起个名字，也就是一个唯一的标识符。比如，你可以给你的 JavaScript 文件起个名字叫 my-custom-script。
$src：资源的 URL，也就是文件的地址。比如，get_template_directory_uri() . '/js/my-custom-script.js'。
$deps：依赖关系，也就是这个资源依赖于哪些其他资源。比如，你的 JavaScript 文件依赖于 jQuery，你就可以把 array( 'jquery' ) 传给这个参数。
$ver：版本号，这就是我们今天要重点讲的家伙！
$in_footer (仅 wp_enqueue_script()): 是否在 </body> 标签之前加载 JavaScript 文件。true 表示在底部加载，false 表示在 <head> 标签中加载。
$media (仅 wp_enqueue_style()): 指定 CSS 样式表应用于哪些媒体类型。比如，'all' 表示应用于所有媒体类型，'screen' 表示应用于屏幕。

ver 参数：版本号，解决缓存问题的秘密武器

ver 参数，就是版本号。它的作用是告诉浏览器：这个资源的版本是多少。浏览器会把这个版本号和资源一起存起来。下次再请求这个资源时，浏览器会先看看版本号有没有变化。如果版本号变了，就说明资源更新了，浏览器就会重新从服务器上下载最新的资源。如果版本号没变，就说明资源没有更新，浏览器就会直接从缓存中读取。

版本号的设置策略：让浏览器乖乖听话

如何设置版本号，才能让浏览器乖乖听话呢？这里有几种常见的策略：

静态版本号：简单粗暴，但不够灵活

最简单的方法就是给每个资源设置一个固定的版本号，比如 1.0、1.1、1.2 等等。每次更新资源时，手动修改版本号。
```
wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array(), '1.2', true );
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), '1.1', 'all' );
```
这种方法的优点是简单粗暴，容易理解。但是，缺点也很明显：每次更新资源都需要手动修改版本号，容易忘记。而且，如果多个资源同时更新，你需要记住每个资源的版本号，容易出错。
时间戳版本号：自动更新，方便省事

更高级的方法是使用时间戳作为版本号。每次更新资源时，自动生成一个时间戳，作为版本号。
```
$script_version = filemtime( get_template_directory() . '/js/my-custom-script.js' );
$style_version = filemtime( get_template_directory() . '/css/my-custom-style.css' );

wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array(), $script_version, true );
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), $style_version, 'all' );
```
filemtime() 函数可以获取文件的最后修改时间，并返回一个时间戳。这样，每次文件更新时，时间戳就会自动更新，浏览器就会重新下载最新的资源。

这种方法的优点是自动更新，方便省事。但是，缺点是每次访问网页都会重新生成时间戳，即使文件没有更新，浏览器也会重新下载资源，浪费带宽。
Git Commit Hash：精准控制，版本回溯

如果你使用 Git 进行版本控制，可以使用 Git Commit Hash 作为版本号。每次提交代码时，Git 都会生成一个唯一的 Commit Hash。你可以把这个 Commit Hash 作为版本号，这样就可以精准地控制资源的缓存。
```
function get_git_version() {
    $string = shell_exec('git rev-parse --short HEAD');
    return trim($string);
}

$script_version = get_git_version();
$style_version = get_git_version();

wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array(), $script_version, true );
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), $style_version, 'all' );
```
这种方法的优点是精准控制，版本回溯。你可以轻松地找到某个版本的资源，并进行回溯。但是，缺点是需要安装 Git，并且需要执行 shell 命令，有一定的学习成本。
使用 WordPress 内置的 wp_get_theme() 获取版本号：更优雅的方式

WordPress 主题通常都有一个 style.css 文件，其中包含了主题的版本号。我们可以使用 wp_get_theme() 函数来获取这个版本号，并将其作为资源的 ver 参数。
```
$theme = wp_get_theme();
$theme_version = $theme->get( 'Version' );

wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array(), $theme_version, true );
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), $theme_version, 'all' );
```
这种方法的好处是，当主题版本更新时，所有使用主题版本号作为 ver 参数的资源都会自动更新，避免了手动更新的麻烦。缺点是，如果你的 JavaScript 或 CSS 文件与主题版本无关，那么这种方法可能就不太合适了。

代码示例：一个完整的例子

下面是一个完整的例子，演示了如何使用 wp_enqueue_script() 和 wp_enqueue_style() 函数，并使用时间戳作为版本号：

function my_theme_enqueue_scripts() {
    $script_version = filemtime( get_template_directory() . '/js/my-custom-script.js' );
    $style_version = filemtime( get_template_directory() . '/css/my-custom-style.css' );

    wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array( 'jquery' ), $script_version, true );
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css', array(), $style_version, 'all' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

这段代码首先定义了一个名为 my_theme_enqueue_scripts() 的函数。这个函数使用 filemtime() 函数获取 JavaScript 文件和 CSS 样式表的最后修改时间，并将其作为版本号。然后，使用 wp_enqueue_script() 和 wp_enqueue_style() 函数加载这些资源。最后，使用 add_action() 函数将 my_theme_enqueue_scripts() 函数添加到 wp_enqueue_scripts action hook 中。这样，WordPress 就会在加载网页时自动调用这个函数，加载这些资源。

各种策略的比较：选择最适合你的方案

策略	优点	缺点	适用场景
静态版本号	简单易懂	容易忘记手动更新，维护成本高	小型项目，资源更新频率低
时间戳版本号	自动更新，方便省事	每次访问都重新下载，浪费带宽	中小型项目，对带宽要求不高
Git Commit Hash	精准控制，版本回溯	需要安装 Git，学习成本高	大型项目，需要精准控制版本，方便回溯
主题版本号	与主题版本同步更新，方便维护	JavaScript 或 CSS 文件与主题版本无关时不太适用	使用主题自带的 JavaScript 和 CSS 文件，并且这些文件与主题版本紧密相关

注意事项：一些小细节不能忽视

缓存插件： 如果你使用了 WordPress 缓存插件，比如 WP Super Cache 或 W3 Total Cache，你需要配置这些插件，让它们能够正确地处理版本号。有些缓存插件会自动清除旧版本的资源，有些则需要手动清除。
CDN： 如果你使用了 CDN，你需要配置 CDN，让它能够正确地处理版本号。有些 CDN 会自动清除旧版本的资源，有些则需要手动清除。
浏览器缓存： 有时候，浏览器会缓存一些旧版本的资源，即使你已经更新了版本号。你可以尝试清除浏览器缓存，或者使用 Incognito 模式访问网页。

总结：让缓存不再是烦恼

通过使用 wp_enqueue_script() 和 wp_enqueue_style() 函数，并合理地设置 ver 参数，我们可以有效地解决浏览器缓存问题，确保用户始终访问到最新版本的资源。选择哪种版本号设置策略，取决于你的项目规模、更新频率和技术水平。希望今天的讲座能帮助大家更好地管理 WordPress 资源，让缓存不再是烦恼！

感谢大家的聆听！下次再见！

发表回复 取消回复

发表回复取消回复