WordPress 网站仍在加载旧的 style.css

WordPress website still loading old style.css

提问by user12109321358

I have made changes to style.css but the wordpress website is still showing old contents. I checked the file in FTP, and the changes in the file are there, but it's not showing on the website. I don't have any WP cache plugins. I also deleted cache in my browser and forces cache refresh through Ctrl+F5.

我对 style.css 进行了更改，但 wordpress 网站仍然显示旧内容。我在 FTP 中检查了文件，文件中的更改在那里，但它没有显示在网站上。我没有任何 WP 缓存插件。我还删除了浏览器中的缓存，并通过 Ctrl+F5 强制刷新缓存。

:(

:(

回答by Yamu

Try changing the version of the style.css file If included by giving the path in header then try to append version as

尝试更改 style.css 文件的版本如果通过在标题中提供路径来包含，则尝试将版本附加为

<link style ........ href="...../style.css?v=1.5"... /> 

note the ?v=1.5 indicates the version

注意 ?v=1.5 表示版本

if style.css is auto loaded then open your style.css file and add/change version as below:

如果 style.css 是自动加载的，那么打开你的 style.css 文件并添加/更改版本，如下所示：

/*
Theme Name: yourthemename
Theme URI: yoururl
Author: Vantage Tel
Version: 1.5 
.
.
.
*/

//change this version and upload file try pressing Ctrl+F5 to refresh your page once..

//更改此版本并上传文件尝试按Ctrl + F5刷新您的页面一次..

回答by Steve Mc

Providing you haven't made an obvious mistake like forgetting to actually upload the updated CSS file to the server (I've actually done this), then this is almost certainly a caching issue.

如果您没有犯明显的错误，例如忘记将更新后的 CSS 文件实际上传到服务器（我实际上已经这样做了），那么这几乎肯定是一个缓存问题。

First - disable any caching plugins you might have. This one got me when I forgot I had installed WP Cache.

首先 - 禁用您可能拥有的任何缓存插件。当我忘记我已经安装了 WP Cache 时，这个让我得到了我。

If you are using Cloudflare, sign in and set your site to "development mode" so all requests just pass straight through.

如果您使用 Cloudflare，请登录并将您的站点设置为“开发模式”，以便所有请求都直接通过。

Then open the developer tools (assuming you are using chrome) and click on the network tab. Here there is a tick box to disable caching. Make sure this is ticked. This will ensure your browser is not caching the file when you have the developer tools open.

然后打开开发人员工具（假设您使用的是 chrome）并单击网络选项卡。这里有一个复选框来禁用缓存。确保勾选此项。这将确保您的浏览器在您打开开发人员工具时不会缓存文件。

Next, click on the sources tab. On the left there is also a "Network" tab that has a file manager style tree control for all of a website's sources. In this tree, navigate to your style.css file which is usually found at: wp-content > themes > themeName. Click on the style.css file and it should open on the right.

接下来，单击源选项卡。左侧还有一个“网络”选项卡，其中包含用于所有网站源的文件管理器样式树控件。在此树中，导航到您的 style.css 文件，该文件通常位于：wp-content > themes > themeName。单击 style.css 文件，它应该会在右侧打开。

Here you can see that a previous version of your file is being served even though a query parameter has been appended that shows a later version. That is: the header/top of the style.css file says it is version 1.0.1 but the file name is something like style.css?ver=1.0.2. This tells you that WordPress is aware of the updated file but somewhere between you and the server a cached version is being shown. In the old days one of the ways to get around caching was to append a query parameter to a file when making a request and this would force whatever caching system to think this was a request for a different file that it hadn't cached. But often this doesn't work with CSS files.

在这里，您可以看到，即使附加了显示更高版本的查询参数，也正在提供文件的先前版本。也就是说：style.css 文件的标题/顶部说它是 1.0.1 版，但文件名类似于 style.css?ver=1.0.2。这告诉您 WordPress 知道更新的文件，但在您和服务器之间的某处显示了缓存版本。在过去，绕过缓存的一种方法是在发出请求时将查询参数附加到文件中，这将迫使任何缓存系统认为这是对未缓存的其他文件的请求。但通常这不适用于 CSS 文件。

This now means that the caching is happening on the server. Most hosts implement some sort of caching on their web servers. How you disable this caching depends on the host. There may be a function on the host's control panel to disable caching or you may have to edit the .htaccess file to do this. Something like:

这现在意味着缓存发生在服务器上。大多数主机在其 Web 服务器上实现某种缓存。如何禁用此缓存取决于主机。主机的控制面板上可能有禁用缓存的功能，或者您可能必须编辑 .htaccess 文件才能执行此操作。就像是：

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

or

或者

Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"

Check the particular host's site for guidance.

检查特定主机的站点以获得指导。

回答by Joe Bergantine

In modern WordPress, the wp_enqueue_style()function has an optional parameter for "version". When set, a query string is added to the URL for the stylesheet, e.g. ?ver=foowhich as mentioned by Yamushould indicate to the browser that the file is different than the old one and cause it to load the new version instead.

在现代 WordPress 中，该wp_enqueue_style()函数有一个可选参数 "version"。设置后，会在样式表的 URL 中添加一个查询字符串，例如Yamu 提到的?ver=foo该字符串应向浏览器指示该文件与旧文件不同，并使其加载新版本。

The version can be set manually during the call to the function to some versioning scheme (e.g. "1.0.1") or can be built using PHP as in this example which appends the time the stylesheet was last modifiedto create something like ?ver=1568061612: filemtime(get_stylesheet_directory() . '/style.css'). The full function then reads:

版本可以在调用函数期间手动设置为某种版本控制方案（例如“1.0.1”），也可以使用 PHP 构建，如本例所示，它附加上次修改样式表的时间以创建类似?ver=1568061612: 的时间filemtime(get_stylesheet_directory() . '/style.css')。完整的函数内容如下：

wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css', array(), filemtime(get_stylesheet_directory() . '/style.css'));

Note the 3rd argument is an empty array()which is the default argument for $deps.

请注意，第三个参数是空的array()，它是$deps.

The method of cache busting by using a timestamp from a file goes back a long timeand is reasonably reliable.

通过使用来自文件的时间戳来清除缓存的方法可以追溯到很长一段时间并且相当可靠。

回答by Ben Ogorek

This articlehas an interesting suggestion where you make your version equal to the current timestamp:

这篇文章有一个有趣的建议，让你的版本等于当前时间戳：

wp_enqueue_style( 'louiscss', get_template_directory_uri() . '/mystyles.css', array(), time() );

That function goes in functions.php and I believe you need to wrap that in a function and have add_action('init', 'your_wrapper_fn' );later in functions.php (but I'm not entirely sure);

该函数在functions.php 中，我相信您需要将其包装在一个函数中，add_action('init', 'your_wrapper_fn' );然后在functions.php 中使用（但我不完全确定）；

You may want to put time()in while developing and then set it to a static version later.

您可能希望time()在开发时放入，然后稍后将其设置为静态版本。

One thing that sometimesworks is to "Settings > Permalink Settings" and literally just press the save button. I know it seems off the wall, but pressing that save button just seems to update the whole configuration.

有时有效的一件事是“设置>固定链接设置”，然后按保存按钮。我知道这似乎是不可能的，但是按下保存按钮似乎只是更新了整个配置。

Having "Disable Cache" checked in the Chrome developer tools' "Network" tab is a good way to know if it's WordPress doing the caching. It's tough when you don't know if it's the brwoser or WordPress.

在 Chrome 开发人员工具的“网络”选项卡中选中“禁用缓存”是了解是否是 WordPress 进行缓存的好方法。当您不知道是 brwoser 还是 WordPress 时，这很难。

Update: I'll leave this answer up, but I'm still having trouble.

更新：我会留下这个答案，但我仍然有问题。

回答by mhrzn

I had the same problem while working in localhost, worked after disabling the cache in chrome under developer mode(f12) >network > check disable cache

我在本地主机上工作时遇到了同样的问题，在开发者模式下禁用 chrome 中的缓存后工作（f12）>网络>检查禁用缓存

回答by GorgE_MirO

I had the same problem and I fixed it in another way than the default.

我遇到了同样的问题，我以不同于默认的方式修复了它。

First I located the file that I need to change:

首先，我找到了需要更改的文件：

wp-includes\theme.php

There is a function called get_stylesheet_uri

有一个名为get_stylesheet_uri的函数

My function looks like this:

我的函数如下所示：

function get_stylesheet_uri() {
    $time = time();
    $stylesheet_dir_uri = get_stylesheet_directory_uri();
    $stylesheet_uri = $stylesheet_dir_uri . '/style.css?v='.$time;
    /**
     * Filter the URI of the current theme stylesheet.
     *
     * @since 1.5.0
     *
     * @param string $stylesheet_uri     Stylesheet URI for the current theme/child theme.
     * @param string $stylesheet_dir_uri Stylesheet directory URI for the current theme/child theme.
     */
    return apply_filters( 'stylesheet_uri', $stylesheet_uri, $stylesheet_dir_uri );
}