Wordpress css 加载问题

Posted 2023-02-25

【中文标题】Wordpress css 加载问题

【英文标题】：Wordpress css loading problems

【发布时间】：2019-12-21 15:50:37

【问题描述】：

我将项目从服务器下载到我的电脑（本地主机）。每次我对 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

【问题讨论】：

嗨！如果您还没有，我会尝试在您处理 CSS 时禁用自动优化。看起来该插件有很多用于内联 CSS 和将样式直接注入 html 文档的选项，所以这可能会阻止您看到您的更改？

我安装插件就是因为这个问题。意思是我看到问题后才安装

【参考方案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 未更改。您在本地运行的网站仍在使用实时网站的样式表。

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

如果您使用 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

如果域使用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/

【讨论】：

sry for css color: red; color: blue; 但这不是问题。 Ctrl + F5 （在 Windows 上）它没有帮助。 html <link rel="stylesheet" type="text/css" href="css/stylesheet.css?ver=5.2.2" /> - 我在 header.php 中没有此代码

@nina 你能截图页面的源代码吗？也尝试重新启动您的 Apache 服务器。

您的样式表源指向实时 Web url www.meditalis.rs。您可以选择将您的网址从 www.meditalis.rs 更改为您的本地主机网址。或者创建一个虚拟主机，然后添加你的域名www.meditalis.rs这里是一个指南***.com/questions/16430574/…

@Nina 我添加了一些解决方案。你可以看看我的回答。

添加我上面写的代码，不加注释#。然后更改 DocumentRoot、ServerName、ServerAlias 的所需值

【参考方案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，并防止不需要的浏览器缓存。

【讨论】：

非常感谢您对我的帮助！我这样做对吗：ibb.co/31YGzdx。我问是因为仍然没有变化

它是否将您的 HTML 中的行更改为这个？ <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />（没有?ver=5.2.2）

也许我发现了一个问题。当我点击页面源中的链接（style.css）时：会发生这种情况：ibb.co/1MxNYzp

嗯...很难说这里的真正问题是什么。您确定您的本地 Wordpress 安装正在使用本地数据库和文件吗？我希望源代码有指向http://localhost/ 的链接，而不是实际的域？

我刚刚注意到另一个问题。当我尝试访问 localhost/mysite/wp-admin 时，我将被转移到css https://www.mysite/wp-admin .