Question

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

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

我相信 GeneratePress主题正在加载父样式.css + child 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结果的网址作为版本参数。

我的孩子主题functions.php没有排队任何＆＃39; style.css＆＃39;。尽管它在父style.css。

之后被加载

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

我没有看到如何缓存子style.c.c文件。

ATTEMPT 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之后加载）。您可以在之前的代码段中看到这一点。 它对我不起作用。子主题将首先加载父主题样式表。这是不幸的，打破了CSS。顺序应该相反（父类style.css第一个，后面是子style.css）。如前所述，取决于 generate-style 没有帮助。

ATTEMP 3 使用其他文件名创建样式表。 Generatepress抱怨，因为如果检测到child_theme，它需要style.css样式表文件。我可以使用一个空的style.css和新的样式表来创建一个子主题。问题是将为返回的用户提供style.css缓存。

我不知何故是wordpress的新手，所以我不知道它可以解决这个问题的其他机制。也许有一些更简单的解决方案可行？

Answer 1

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

安装自动优化

减少每个页面加载时加载的CSS和JS文件的数量   会对你的网页速度产生巨大影响。

Autoptimize的另一个好处是它将捆绑生成的CSS   将您在Customizer中的选项转换为外部文件，允许您的   浏览器缓存它。

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

Answer 2

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

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

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' );

现在，当您保存文件时，修改时间将提供不同的查询字符串，缓存将失效。

Wordpress - GeneratePress主题 - 缓存破坏

2 个答案: