WordPress如何设置浏览器缓存

1. 先登录WordPress后台，找到控制面板左侧菜单栏，点开“设置”选项。这时候你可能发现没有直接的缓存设置项——别急，因为WordPress默认不集成浏览器缓存功能，得靠插件或手动配置来实现。咱们先从最简单的插件说起。

2. 装个缓存插件比如W3 Total Cache或WP Super Cache。安装后进入插件设置界面，找“Browser Cache”选项，勾选“Enable”开启它。插件会自动在网站根目录生成.htaccess规则，帮你处理缓存头信息。例如W3TC可能会添加这样的代码：

# 开始浏览器缓存设置
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
</IfModule>

这段代码告诉浏览器把jpg图片缓存1年，CSS文件缓存1个月。插件的好处是省心，适合不想碰代码的用户。

3. 如果想手动配置，需要FTP进服务器，找到网站根目录下的.htaccess文件（注意它是隐藏文件）。用文本编辑器打开，在WordPress规则块后面添加缓存代码。比如：

# 手动添加缓存规则
<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>

这里设置了图片和静态文件缓存30天（2592000秒）。mod_headers模块必须启用才行，否则会报错。

4. 有时候缓存太狠会导致样式更新不及时。这时候可以在文件URL后加版本号强制刷新，比如style.css?v=2。WordPress函数wp_enqueue_style自动处理这个，但如果你自己写代码，可以这样：

// 函数方式添加版本参数
wp_enqueue_style('theme-style', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/style.css'));

filemtime函数根据文件修改时间生成版本号，一更新就自动失效缓存。

5. 最后检查缓存是否生效。用Chrome浏览器按F12打开开发者工具，到Network标签页刷新页面。看静态文件的响应头，如果有Cache-Control或Expires字段且时间合理，说明配置成功。如果没变化，可能是服务器不支持mod_rewrite，或者缓存被CDN覆盖了。

记住浏览器缓存是把双刃剑——设置太短效果差，设置太长更新麻烦。建议图片缓存久些，CSS/JS短些，平衡用户体验和维护成本。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。