众所周知,在 WordPress
中正确使用缓存可以加快网站的加载速度,改善用户体验。然而,有时我们的 JS
和 CSS
文件由于缓存或 CDN
而被缓存。如果缓存未清理或浏览器被迫刷新,我们可能无法加载最新的 JS
和 CSS
。
为了解决这些问题,WordPress
一直都有相应的解决方案。下面的汇站网教您如何自动加载最新的 JS
和 CSS
文件。
按版本号更新
最常见的是将版本号参数添加到 JS
和 CSS
文件中。
如果你做过 WordPress
开发,你应该知道如何使用它
wp_enqueue_script
()
引入 js
文件,使用
wp_enqueue_style
()
函数引入css
文件。这两个函数都有一个版本参数。下面以
wp_enqueue_style
()
为例:
/**
* 引入 css
文件(版本号)
*/
function
wpkj_enqueue_scripts
() {wp_enqueue_style
(
'my
-custom
-style
',
get_stylesheet_directory_uri
() . '/css
/customstyle
.css
',
[], // 依赖
'1.0.0' // 版本号
);}
add_action
( 'wp_enqueue_scripts
', 'wpkj_enqueue_scripts
' );
通过上面的代码引入的 css
文件,加载出来的代码大概为:
你可以看到文件网址后面有一个参数
,如果我们的 css
代码更新了,我们只需要更改
wp_enqueue_style
()
中的版本号参数即可,比如更改为
,那输入的文件网址就应该为
这样,就达到了自动更新文件的效果。
按时间戳更新
尽管版本号是一个可行的方案,但每次修改 CSS
代码时都需要更新版本号。这种做法在实际开发中是不科学的,所以我们可以考虑使用时间戳。
我们可以通过
一
filemtime
()
函数自动获取文件上次更新的时间戳,然后将此时间戳作为版本号参数的值。
例如,我们可以将上述函数修改为:
/**
* 引入 css
文件(时间戳)
*/
function
wpkj_enqueue_scripts
() {wp_enqueue_style
(
'my
-custom
-style
',
get_stylesheet_directory_uri
() . '/css
/customstyle
.css
',
[], // 依赖
filemtime
( get_stylesheet_directory
() . '/css
/customstyle
.css
' ) // 版本
);}
add_action
( 'wp_enqueue_scripts
', 'wpkj_enqueue_scripts
' );
注意看上代码的第 10 行。最后输入的代码应该为:
从中我们可以看到版本号参数的值为一个时间戳
,每次我们修改了
customstyle
.css
文件,都会自动更新这个时间戳,达到了及时更新参数的目的。
转载请注明:汇站网 » WordPress
启用 CDN
加速/缓存以自动加载最新的 js
和 CSS
文件