WPB Accordion Menu の LiteSpeed Cache で乱れた表示を直す

LiteSpeed Cache のページの最適化で UCSS を生成した際に表示の乱れが4カ所発生しました。4つの記事に分けて表示の乱れを修正する方法について記載します。2回目は WPB Accordion Menu のカテゴリ展開用のプラス記号が行末から行頭に移動した事を修正した内容について記事にします。

ページ言語切替

Contents

WPB Accordion Menu プラグインについて

WPB Accordion Menu は、階層化されたカテゴリをツリー形式で表示し、行末の記号で子カテゴリを展開・収納するように表示するプラグインです。2025年3月現在で 8,000 以上の有効インストール数があります。

WPB Accordion Menu – Responsive Collapse Vertical Sidebar Menu – WooCommerce Category Accordion – WordPress plugin | WordPress.org
WPB Accordion Menu is a responsive collapse vertical sidebar menu for WordPress. WooCommerce categor…
wordpress.org

プラグインの設定で表示を直す項目は少ないですが (skinの選択のみ)、CSS を別途設定すれば、見た目を修正するのは比較的簡単に行えます。

有料の Pro 版もありますが、カテゴリ階層化メニューの作成だけであれば、無料版の範囲でも十分な機能があります。

WPB Accordion Menu の設定

Menu の設定

英語表示ですが複雑な設定はありません。(クリックで拡大)

新規メニューを作成
Taxonomy で category を選択、保存
Gutenberg エディタでブロックを配置してメニューを選択

見た目はともかく、ブロックを配置すればカテゴリ階層化メニューが表示されます。

CSS の設定

見た目は skin の選択しかありませんので、細かな修正は 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;
}

add style.css

この CSS を適用すると、下図のようなカテゴリ階層化メニューになります。

LiteSpeed Cache の設定

UCSS 適用前は、特に表示の乱れはありません。JavaScript が最適化されても、動作は正常です。

プラス記号をクリックすると記号が回転し、メニューが開きます。カテゴリを選択すると、カテゴリの Archive ページが表示されます。

UCSS 生成後の不具合の状況

UCSS が生成・反映されると、カテゴリを展開する為に行末にあるプラス記号が、先頭に移動してしまいます。また、記号をクリックしても記号が回転しません。

プラス記号をクリックするとカテゴリの展開はでき、カテゴリを選択するとカテゴリの Archive ページは表示されます。

見た目だけの問題ですので、JavaScript ではなく CSS の不具合だろうと推測しました。

対策方法

WPB Accordion Menu の二つの CSS の項目を Twenty Twenty Five 子テーマで再設定することで表示の乱れを抑える事が出来ました。

プラス記号が行末に戻り、クリックで回転するようになりました。

CSS

/* 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);
}

add style.css

WPB Accordion Menu の CSS ファイル1つを最適化から除外してインライン化しても直ったかもしれません。ただし CSS ファイルのサイズは約 8kB あります。修正する量は少ない方が良いので、この方法を使用する事にしました。

結び

LiteSpeed Cache プラグインの表示の乱れを修正する定番の方法は、JavaScript か CSS を最適化から除外する事です。

CSS ファイル全体を最適化から除外すると、必要な部分以外まで除外されてしまいます。Minify されず、別ファイルとして読み込むので通信量が増加します。

CSS ファイル自体は最適化させて、必要な項目のみを Twenty Twenty Five 子テーマで再定義すれば、より最適化された状態を維持できますので、原因が掴める場合にはこちらの方が良いかと思います。

Clairvoyance Power