WordPres网站css文件无法显示，导致页面变形，这类问题遇到的还是蛮多的。今天一位朋友找到老魏，说自己的 Elementor+ Astra主题制作的网站页面变形了，检查后发现有几个 css文件无法正常显示，经过一番努力老魏成功的解决了这些问题。
问题描述
这里面一共遇到了两次相同的问题，但解决思路不一样。
css文件无法显示的第一种问题
在浏览器中 F12 查看源代码报红字的错误提示，如下图所示：
这四个css文件是缓存插件生成的css合并压缩文件。
点击任意飘红的css文件，路径在 /wp-content/uploads/ 下面，发现都是 404错误。
css文件无法显示的第二种问题
这个问题虽然同样是报红字错误，但仔细看路径却不同。这次是在 /wp-content/uploads/elementor 下面了。
问题分析
404错误是文件不存在的意思，就是说在文件路径的目录中不存在这些文件，可能是被删除了，或者根本没有生成。
所以我们顺着这个思路继续寻找蛛丝马迹。
问题解决
联想到他使用的是宝塔面板专业版，查看【网站防篡改】程序，在站点对应的操作日志中，果然发现了对网站目录 /wp-content/uploads/ 的拦截记录。
于是把 wp-content 目录添加到排除规则中，也就是说宝塔面板的网站防篡改对该目录下面所有文件、目录的改动不监控，也不拦截。
经过清理缓存后，发现问题一解决了。
但问题二依旧在，使用上面方法也解决不了。
同样的，我们还是判断因为各种原因（删除了缓存等）让这个单独的css文件无法生成。
使用 Elementor工具>重新生成css和数据按钮，来重新生成css数据。
再去检查前台页面，发现css错误提示消失了，所有css文件都能正常被访问到。前台所有页面也都恢复正常了。
总结
WordPres网站页面变形，基本都是和 css文件无法显示有关系。
无法显示要么是被缓存插件压缩后出现各种问题，要么是不存在。
和缓存插件有关，就要压缩css文件或排除掉出问题的那几个css文件，基本都能解决。
如果是不存在那就是被什么程序给拦截了，无法生成。要么在程序中添加例外规则，要么重新生成css文件，沿着这几个思路，基本就能尝试出来结果了。
- 虚拟主机无法安装宝塔面板，出现的css文件错误，只和缓存插件压缩css有关。
- 而云服务器、VPS 就有多种可能。
希望以上的解决过程能够帮助到大家，如果你遇到了同类问题，可以参考老魏的这篇文章。
暂无评论内容