Wordpress css 加载问题

Question

我将项目从服务器下载到我的电脑（本地主机）。每次我对 css 进行更改时，此更改都不会加载到站点 (localhost) 上。

我尝试更换浏览器并清除浏览器缓存。 我安装了插件（自动优化）来清除网站 css 缓存。

.section_news {
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.section_news .news_content {
    color: red;
    text-align: center;
}

.section_news .news_content .title {
    color: red;
    color: blue;
}

当我重新加载网站时，更改不可见。 我检查了代码是否完全加载：https://ibb.co/jT7LX6n

Answer 1

您正在设计什么特定的课程？这条线？

   .section_news .news_content .title {
        color: red;
        color: blue;
    }

它应该只包含一种颜色。它是color: red; 或color: blue;

另外，请尝试Cmd + Shift + r (on a mac) OR Ctrl + F5 (on windows)。

并检查您的样式表源链接是否有如下变量：

<link rel="stylesheet" type="text/css" href="css/stylesheet.css?ver=5.2.2" />

因此您对 css 文件所做的更改不会生效。 您可以将其从 ver=5.2.2 更改为 ver=5.2.3

更新

您的本地样式表未加载，因为您下载的网站的 url 未更改。您在本地运行的网站仍在使用实时网站的样式表。

您可以选择以下解决方案之一。

1. 如果您使用 Xampp，您可以虚拟托管您的域，如果域仅使用 http。

在 C:\xampp\apache\conf\extra\httpd-vhosts.conf 中添加此代码

<VirtualHost *:80>
 DocumentRoot "C:/xampp/htdocs" //your file path
 ServerName your-domain.com
 ServerAlias www.your-domain.com
 <Directory "c:/xampp/htdocs">
 Order allow,deny
 Allow from all
 </Directory>
</VirtualHost>

然后转到C:\Windows\System32\drivers\etc\hosts然后添加这一行

127.0.0.1  www.your-domain.com

1. 如果域使用https:，则采用这种方式

How do I use https (SSL) in XAMPP while using virtual hosts

另一个选项是更新您数据库中的 URL：Note: make a backup first of your database Change site URL and WordPress URL in Localhost

或者使用这样的插件https://wordpress.org/plugins/velvet-blues-update-urls/

Answer 2

CSS 参考中的?ver=5.2.2 可能会给您带来缓存问题。如果主题作者使用 wp_enqueue_style() 函数加载 CSS 文件，则该参数通常由 Wordpress 注入。

按照a similar question 中的建议，您可以尝试在您的functions.php 中添加这样的函数：

function trim_css_version($src) {
    if (strpos($src, 'ver=')) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'trim_css_version', 9999);

这有望从您的文档中删除?ver=x.x.x，并防止不需要的浏览器缓存。