网站更改正在缓存中，不会为客户更新

Question

我在实时网站上进行了一些更改（我知道，这不是最佳做法，但有人告诉我这样做）并且我遇到了缓存问题。每次我对我们的 CSS（实际上是 SASS）进行更改时，我都必须按 CTRL F5 才能看到更改。这对我来说不是问题，但用户开始抱怨网站损坏，其中许多人不知道如何清除缓存或使用 CTRL F5。

我已尝试添加以下代码，但无法正常工作。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

我也试过添加这个脚本：

        <script type="text/javascript">
        $(document).ready(function(){
            $('img').each(function(){
                var date = new Date;
                // add the current unix timestamp in microseconds to the the image src as a query string
                this.src = this.src + '?' + date.getTime();
            });
        });
    </script>

虽然我不懂Javascript，所以我不知道如何正确使用它。我一直在寻找答案，其他人说这些东西对他们有用，但它们根本不适合我。我是一名设计师和前端开发人员，所以 PHP 和 Javascript 有点超出我的能力。

最后，我还阅读了有关使用版本标签的信息 - ?v=x.x，但我的问题是该网站是由其他开发人员编写的，我不知道他们如何链接到我们的样式表（使用 SASS）。

任何帮助将不胜感激！

谢谢！

Answer 1

理想情况下，您应该使用 PHP 来检查文件的 filemtime()（上次修改时间），并使用一种称为 versioning 的技术来指示它是一个已更改的文件，并且 不是从缓存中加载它。

---

生成的 HTML 看起来类似于：

<link href="/your/css/file.css?ver=<?php echo filemtime('/your/css/file.css'); ?>" rel="stylesheet" type="text/css"/>

Answer 2

调用外部 CSS 文件，在 PHP 中添加一个随机代码作为 GET 变量。 像这样的：

<script src="yourfileUpdated.css?<?php echo rand() ?> rel="stylesheet" type="text/css" />

Answer 3

样式是通过wp_enqueue_style 函数添加的。搜索你的主题，它可能在functions.php中。

然后像这样使用：

wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);

在此处阅读更多信息https://wordimpress.com/wordpress-css-and-js-cache-busting/。