当 LiteSpeed Cache 页面优化生成 UCSS 时，出现了四次显示干扰。本节分四条介绍如何纠正显示紊乱。第三篇文章是关于修复 WP MobileMenu 安装的汉堡包菜单无法显示的问题。

关于 WP Mobile Menu 插件

WP Mobile Menu 是一款用于在顶部、底部、左侧和右侧放置菜单的插件，截至 2025 年 3 月，已有超过 90,000 个有效安装。

免费范围只允许安装顶部和左右菜单。也可付费安装下部菜单。

在这种情况下，顶部菜单使用汉堡包菜单，而全局菜单的备选内容则添加到右侧菜单中。

WP Mobile Menu 设置

设置菜单外观

安装 WP Mobile Menu 后，管理菜单中将添加 Mobile Menu Options。

您可以进行非常详细的设置。字体类型也可以详细设置，但一旦开始纠结，就会停不下来，所以最好先调整颜色和字体大小，然后再一点一点地修改。(点击放大）

本博客使用汉堡包菜单作为顶部菜单，并启用右侧菜单。

设置菜单内容

菜单内容可在外观和菜单下的管理菜单中找到，因此您可以用老方法添加菜单项。(点击放大）

您可以指定固定页面、自定义链接、类别、标签等。

由于该网站使用多种语言，因此为每个类别准备了三种类型的项目，并根据语言类型划分显示或隐藏的项目。

请注意，如果 Bogo 翻译设置得当，每种语言的标签和类别都会自动切换。

LiteSpeed Cache 设置

在使用 UCSS 之前，显示器不会受到任何干扰。单击汉堡包菜单可打开右侧菜单，右侧菜单以十字形关闭。使用起来没有问题。

UCSS 生成后的缺陷状况

汉堡包菜单不再起作用。

在 JavaScript 中重写了该类，并在 CSS 中相应更改了显示方式；重写了该类，因此 JavaScript 可以正常运行。

基于 CSS 的显示更改不起作用。

对策

采取了最基本的措施。

WP 移动菜单使用三个 CSS 文件。

/plugins/mobile-menu/includes/css/mobmenu.css
/plugins/mobile-menu/includes/css/mobmenu-icons.css
/uploads/dynamic-mobmenu.css

这些 CSS 文件被添加到 “排除和内联 UCSS 文件 “部分，并重新生成了 UCSS。文件大小分别为 8.6 kB、5.2 kb 和 9.7 kb。

我们认为，内联比简单排除更有效。要重写的 “Twenty Twenty Five “子主题的 style.css 被放在 CSS 排除中，而其他未编辑的 CSS 则被内联。(点击放大）

我试着在 “Twenty Twenty Five “儿童主题中添加一个项目来解决这个问题，并寻找汉堡包菜单的工作部分，但未能成功找到。

在这种情况下，通过排除基本方法的 CSS 优化来解决这个问题。

Musubi

在 LiteSpeed Cache 插件中解决显示混乱问题的标准方法是将 JavaScript 或 CSS 排除在优化之外。

对于 WP Mobile Menu，我们将其排除在标准 CSS 优化范围之外。过多的排除会减少优化区域的数量，从而降低 Lite Speed Cache 插件的效果。

我正在想办法解决这个问题，尽可能不增加排除项目的数量。