How to solve the problem of page deformation caused by the failure of WordPress website css file display?

The CSS file of the WordPress website cannot be displayed, resulting in page deformation. There are still many such problems. Today, a friend found Lao Wei and told him his Elementor + Astra Theme The website page produced was deformed. After checking, it was found that several css files could not be displayed normally. After some efforts, Lao Wei successfully solved these problems.

Problem description

The same problem was encountered twice, but the solution was different.

The first problem that css files cannot be displayed

In the browser F12, check the red ink error prompt of the source code, as shown in the following figure:

These four css files are css consolidated compressed files generated by the cache plug-in.

Click any red css file, and the path is under/wp content/uploads/. All errors are 404.

The second problem that css files cannot be displayed

Although this problem is also reported as a red ink error, the path is different. This time it is under/wp content/uploads/elementor.

problem analysis

404 error means that the file does not exist, that is, the file does not exist in the directory of the file path, which may be deleted or not generated at all.

So we continue to look for clues along this line of thought.

Problem solving

It is associated with his use of Pagoda Panel Professional Edition , View【 Website Anti tamper 】The program, in the corresponding operation log of the site, found the interception record of the website directory/wp content/uploads/.

Therefore, the wp content directory is added to the exclusion rule, that is, the website tamper prevention of the pagoda panel does not monitor or intercept the changes of all files and directories under the directory.

After cleaning the cache, the problem was solved.

But the second problem is still there, and the above methods can not solve it.

Similarly, we still judge that this separate css file cannot be generated due to various reasons (deleted cache, etc.).

Use the Elementor tool>Regenerate css and data button to regenerate css data.

Check the foreground page again and find that the css error prompt disappears and all css files can be accessed normally. All the foreground pages have returned to normal.

summary

The deformation of WordPress website pages is basically related to the inability to display css files.

It cannot be displayed. Either various problems occur after being compressed by the cache plug-in, or it does not exist.

It is related to the cache plug-in. It is necessary to compress the css files or eliminate the css files that have problems, which can basically be solved.

If it does not exist, it is blocked by some program and cannot be generated. Either add exception rules in the program or regenerate the css file. Following these ideas, you can basically try to get results.

• The virtual host cannot install the pagoda panel. The css file error is only related to the cache plug-in compression css.
• There are many possibilities for ECS and VPS.

I hope that the above solution process can help everyone. If you encounter similar problems, you can refer to this article of Lao Wei.