Wordpress - GeneratePress 主题 - 缓存破坏

Posted 2023-03-10

【中文标题】Wordpress - GeneratePress 主题 - 缓存破坏

【英文标题】：Wordpress - GeneratePress theme - Cache busting

【发布时间】：2018-03-14 07:05:56

【问题描述】：

我正在维护一个使用 GeneratePress 主题的 wordpress 网站。 使用了扩展子主题解决方案。它已经是一个相当成熟的儿童主题（这样说是为了避免戏剧性的解决方案）。

有一段时间我每次更新 CSS 时都会遇到 CSS 缓存问题。 style.css 子样式表提供缓存版本而不是修改后的版本。

我相信 GeneratePress 主题正在加载父 style.css + 子 style.css（如果存在）。

generatepress/functions.php

// Enqueue our CSS.
wp_enqueue_style( 'generate-style-grid', get_template_directory_uri() . "/css/unsemantic-grid$suffix.css", false, GENERATE_VERSION, 'all' );
wp_enqueue_style( 'generate-style', get_template_directory_uri() . '/style.css', array( 'generate-style-grid' ), GENERATE_VERSION, 'all' );
wp_enqueue_style( 'generate-mobile-style', get_template_directory_uri() . "/css/mobile$suffix.css", array( 'generate-style' ), GENERATE_VERSION, 'all' );
wp_add_inline_style( 'generate-style', generate_base_css() );

// Add the child theme CSS if child theme is active.
if ( is_child_theme() )
    wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );

阅读这段代码...似乎如果检测到子主题，它应该已经进行缓存破坏但是...对我来说它没有。 我没有得到一个带有 filemtime 结果的 url 作为版本参数。

我的子主题 functions.php 没有加入任何“style.css”。尽管如此，它会在父 style.css 之后加载。

尝试 1 我已经阅读了从 generatepress https://docs.generatepress.com/article/adding-css/ 添加 CSS 的部分。

我看不到如何缓存子 style.css 文件。

尝试 2 我第一次尝试解决这个问题是基于在触发 wp_enqueue_scripts 时对样式表进行排队。

function theme_css()
    wp_enqueue_style( 'my-theme-style', get_stylesheet_directory_uri().'/style.css', 'generate-style', '1.1', 'all');

add_action( 'wp_enqueue_scripts', 'theme_css' );

我提到了 generate-style，因为在我看来它是依赖的父默认样式（子 style.css 将在父 style.css 之后加载）。您可以在前面的代码 sn-p 中看到这一点。 它对我不起作用。子主题会先加载，然后再加载父主题样式表。这很不幸，会破坏 css。顺序应该相反（首先是父 style.css，然后是子 style.css）。如前所述，依赖 generate-style 没有帮助。

尝试 3 使用另一个文件名创建样式表。 Generatepress 抱怨，因为如果检测到 child_theme，它需要一个 style.css 样式表文件。我可以有一个带有空 style.css 和新样式表的子主题。问题是 style.css 缓存将交付给返回的用户。

我对 wordpress 有点陌生，所以我不知道它可能必须解决这个问题的其他机制。也许有一些更简单的解决方案可以工作？

【问题讨论】：

您是否尝试过清除浏览器缓存以查看您的更改？这通常是我解决此类 css 缓存问题的第一站。

是的，这会清除我的缓存，但不会清除每天访问该网站的数百人的缓存。

您是否在网站上运行缓存插件？如果您在此处使用主题文档建议的自动优化，generatepress.com/fastest-wordpress-theme，那么您需要删除缓存，您的用户将看到更改。

是的，在生产中自动优化。它带有一些随机版本的字母数字尾部。我明白你的意思。删除该缓存应生成一个新缓存。谢谢

不客气。 :) 您可以从插件本身中删除它：登录 wp-admin 并转到自动优化插件设置以删除缓存，它会执行此操作并为您启动一个新缓存。

【参考方案1】：

如果您使用 Autoptimize 作为主题文档建议的 here，那么您需要删除缓存，您的用户会看到更改。此引用来自该文档：

安装自动优化

减少每次页面加载时加载的 CSS 和 JS 文件的数量 将对您的页面速度产生巨大影响。

Autooptimize 的另一个好处是它将捆绑由 您在定制器中的选项到外部文件中，允许您的 浏览器缓存它。

删除和重置 Autoptimize 缓存：登录 wp-admin 并转到 Plugins/Autoptimize/Settings 以删除缓存，它会执行此操作并为您启动一个新缓存。 wp-admin 的顶部菜单栏中还有一个自动优化项；这也很方便。

【讨论】：

嘿，链接坏了。谢谢

现在已经修好了，抱歉，我把 https: 协议翻了一番。

【参考方案2】：

即使问题被标记为已回答，原始问题中也没有提到自动优化。所以回答原来的问题。

破坏缓存的正确方法是将查询字符串附加到静态资产 url，例如：

https://example.com/wp-content/themes/themetry/style.css?3242564353

wp_enqueue_style('child-style', get_stylesheet_uri(), array(), '3242564353', 'all');

<link rel='stylesheet' id='child-style-css'  href='https://example.com/wp-content/themes/thetheme/style.css?ver=3242564353' type='text/css' media='all' />

您可以通过用 php 函数 filemtime() 替换“3242564353”来自动执行此操作

wp_enqueue_style( 'child-style', get_stylesheet_uri(), array(), filemtime(), 'all' );

现在当你保存文件修改的时候会提供一个不同的查询字符串并且缓存会被破坏。