当 LiteSpeed Cache 页面优化生成 UCSS 时，出现了四次显示干扰。本节分四条介绍如何纠正显示紊乱。第四篇，也是最后一篇文章是关于修复使用 WP Mobile Bottom Menu 安装的底部菜单在被选中时不显示底部菜单颜色的问题。

关于 WP Mobile Bottom Menu 插件

WP Mobile Bottom Menu 是一款用于在屏幕底部安装底部菜单的插件，截至 2025 年 3 月，已有超过 7000 个有效安装。

屏幕下方的底部菜单可以进行专门设置，并可配置到最小细节。你可以选择 “字体真棒 “或图片作为图标。设置选项很多，因此最好一开始就设定好总体框架，然后再一点一点地调整。

配置 WP 移动版底部菜单

设置菜单外观

安装 WP Mobile Bottom Menu 后，WP BNav 设置就会添加到管理菜单中。

它可以进行非常精细的配置。(点击放大）

底部菜单以 768 px 或更小的像素显示。它只能在手机上显示。背景和文字的颜色与博客的颜色相匹配，让人看起来很舒服。

设置菜单内容

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

共设置了四个菜单：三种语言的博客首页和每种语言的联系表链接。

博客主页菜单使用圆形国旗图像，选择时背景为浅色。

联系表单的图标使用了 Font Awesome。

LiteSpeed Cache 设置

在使用 UCSS 之前，没有特别的显示干扰。

当显示每种语言的博客首页时，其菜单的背景颜色会变浅，以显示所选语言。

UCSS 生成后的缺陷状况

所选菜单的背景颜色没有改变。

选择菜单后，您就可以进入每种语言的博客首页，但菜单的背景颜色不会改变，仍然是原来的颜色，因此您不再清楚选择的是哪种语言。

所选项目的类已更改，因此 JavaScript 可以正常运行。

似乎没有反映 CSS。

对策

我尝试了很多办法，但最终还是通过重新定义 Twenty Twenty Five 子主题中的 CSS 来解决这个问题。

/* 20250306 WP BNav Selected item background color */
/*  LSCache Optimize により無効になるのを再定義 */
.bnav_bottom_nav_wrapper ul li>a .bnav_menu_items:hover, .bnav_bottom_nav_wrapper ul li.current_page_item a .bnav_menu_items, .bnav_bottom_nav_wrapper ul li.current_page_parent a .bnav_menu_items {
    background-color: #ebf6d3;
}

WP Mobile Bottom Menu 的 CSS 位于以下文件中。

/plugins/mobile-bottom-menu-for-wp/public/css/wp-bnav-public.css

将该文件排除在优化之外的方法并没有解决显示紊乱问题。相反，出现了两个图标，一个处于正常状态，一个处于选择状态，这加剧了显示紊乱。

要解决这个问题，只能在子主题中只重新定义 CSS 的相关部分。

Musubi

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

就 WP Mobile Bottom Menu 而言，标准的 CSS 优化排除并没有起到任何作用。反过来，显示紊乱的情况却更加严重。

我们可以通过重新定义 Twenty Twenty Five 子主题中的 CSS 项来解决这个问题。

每个插件都需要根据具体情况进行调整。良好的体验。