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

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

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

Answer 2

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

生成的HTML看起来与此类似：

<link href="/your/css/file.css?ver=<?php echo filemtime('/your/css/file.css'); ?>" 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/。

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

3 个答案: