当 LiteSpeed Cache 页面优化生成 UCSS 时，出现了四次显示干扰。本节分四条介绍如何纠正显示紊乱。第二篇文章是关于修复 WPB Accordion Menu 中用于扩展类别的加号从行尾移到了行首的问题。
关于 WPB Accordion Menu 插件
WPB Accordion Menu 是一款以树形格式显示分层类别的插件，行尾的符号可扩展和存储子类别。 截至 2025 年 3 月，已有超过 8000 个有效安装。
插件设置中只有少数几个项目可以修复显示效果（只有皮肤选择），但通过单独设置 CSS 来修改外观和感觉还是比较容易的。
此外，还提供付费的专业版，但如果你只想创建分类分层菜单，免费版本的功能已经足够。
WPB Accordion Menu 设置
菜单设置
显示屏为英文，但没有复杂的设置。(点击放大）
- 创建新菜单
- 在分类标准中选择类别并保存。
- 在 Gutenberg 编辑器中放置一个图块，然后选择菜单
类别分层菜单尽管看起来很不起眼，但一旦放置了区块，它就会出现。
CSS 设置
外观和感觉的唯一选择是皮肤，因此可以对 CSS 稍作修改。
/* 20250130 WPB Accordions Settings */
.wpb_wmca_accordion_wrapper_theme_transparent ul li a {
color: #455222 !important;
font-weight: normal;
}
.wpb_category_n_menu_accordion>ul>li>a {
font-size: 22px;
}
.wpb_category_n_menu_accordion ul li>a>span.wpb-submenu-indicator {
color: #455222 !important;
font-size: 30px;
font-weight: normal;
}
.wpb_category_n_menu_accordion li a {
color: #455222 !important;
font-size: 20px;
font-weight: normal;
}
.wpb_category_n_menu_accordion>ul>li>a {
font-size: var(--wp--preset--font-size--large);
font-weight: normal;
padding: 10px 0px;
}
.wpb_wmca_accordion_wrapper_theme_transparent ul ul li a {
font-size: var(--wp--preset--font-size--large);
font-weight: normal;
padding: 10px 0px;
}
.wpb_wmca_accordion_wrapper_theme_transparent ul ul {
padding-inline-start: 5px;
}应用该 CSS 后，分类分层菜单如下所示。
LiteSpeed Cache 设置
在使用 UCSS 之前，显示没有特别的干扰；即使 JavaScript 经过优化后，显示也是正常的。
点击加号可旋转符号并打开菜单。选择一个类别可打开该类别的存档页面。
UCSS 生成后的缺陷状况
生成并反映 UCSS 时，行尾的加号会移至开头，以扩展类别。此外，点击符号时，符号不会旋转。
点击 “加号 “可扩展类别，选择类别后会显示该类别的存档页面。
由于问题只是视觉上的，我认为可能是 CSS 的问题，而不是 JavaScript 的问题。
对策
通过重新配置 WPB Accordion Menu 中的两个 CSS 项，我可以抑制 Twenty Twenty Five 子主题的显示紊乱。
现在，加号会返回行尾，并在点击时旋转。
/* 20250303 WPB Accordions for UCSS optimization */
.wpb_category_n_menu_accordion ul li>a>span.wpb-submenu-indicator {
position: absolute;
right: 0;
width: 47px;
height: 100%;
top: 0;
text-align: center;
font-size: 20px;
font-weight: bolder;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
-o-transition: transform .3s linear;
-moz-transition: transform .3s linear;
-webkit-transition: transform .3s linear;
-ms-transition: transform .3s linear;
}
.wpb_category_n_menu_accordion li.wpb-submenu-indicator-minus>a>span.wpb-submenu-indicator {
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}将 WPB Accordion Menu 的一个 CSS 文件从优化中排除并内联，可能会解决这个问题。但是，CSS 文件的大小约为 8kB。我们决定使用这种方法，因为需要修改的内容越少越好。
Musubi
在 LiteSpeed Cache 插件中解决显示混乱问题的标准方法是将 JavaScript 或 CSS 排除在优化之外。
将整个 CSS 文件排除在优化范围之外时，除了必要的部分外，其他部分都不会被最小化，而是作为单独的文件加载，从而增加了流量。
如果对 CSS 文件本身进行了优化，并且只在 Twenty Twenty Five 儿童主题中重新定义了必要的项目，那么就能保持更优化的状态，因此如果能找到原因，效果会更好。
发表回复