LiteSpeed Cache のページの最適化で UCSS を生成した際に表示の乱れが4カ所発生しました。4つの記事に分けて表示の乱れを修正する方法について記載します。最後の4回目は WP Mobile Bottom Menu で設置したボトムメニューの選択時の色が表示されない事を修正した内容について記事にします。

WP Mobile Bottom Menu プラグインについて

WP Mobile Bottom Menu は、画面下部のボトムメニューを設置するプラグインです。2025年3月現在で 7,000 以上の有効インストール数があります。

画面下部のボトムメニューに特化している事もあり、細かい部分まで設定が可能です。アイコンとして Font Awesome と画像の二種類を選択できます。設定項目が多いので、始めのうちは大枠を設定して、少しずつ手直しした方が良いかと思います。

WP Mobile Bottom Menu の設定

メニューの外観の設定

WP Mobile Bottom Menu をインストールすると、WP BNav Setting が管理メニューに追加されます。

非常に細かい所まで設定できるようになっています。(クリックで拡大)

768 px 以下でボトムメニューを表示するようにしています。スマホのみで表示する事を想定しています。背景色や文字の色は、ブログの色と合わせて違和感のないようにしています。

メニューの内容の設定

メニューの内容は、管理メニューの「外観」「メニュー」が使えるようになりますので、旧来の方法でメニューの項目を追加します。(クリックで拡大)

3つの言語のブログホームと、各言語のお問い合わせフォームへのリンクの合計4つのメニューを設置しています。

ブログホームのメニューには丸形国旗の画像を使用して、選択時には背景が薄い色になるように設定しました。

お問い合わせフォームのアイコンは Font Awesome を使用しています。

LiteSpeed Cache の設定

UCSS 適用前は、特に表示の乱れはありません。

各言語のブログホームを表示している場合には、そのメニューの背景の色が薄くなり、どの言語を選択しているのかが分かります。

UCSS 生成後の不具合の状況

選択しているメニューの背景色が変化しませんでした。

メニューを選択すると各言語のブログホームに移動しますが、メニューの背景色が変わらず元の色のままで、どの言語を選択しているのかが分からなくなりました。

選択している項目の class が変化していましたので、JavaScript は正常に機能していました。

CSS が反映されていないようです。

対策方法

色々と試しましたが、最終的には Twenty Twenty Five 子テーマで CSS を再定義する事で対策出来ました。

/* 20250306 WP BNav Selected item background color */
.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 の該当部分のみを子テーマで再定義する方法でのみ解決できました。

結び

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

WP Mobile Bottom Menu の場合には、定番の CSS の最適化からの除外では対処できませんでした。返って表示の乱れが悪化してしまいました。

Twenty Twenty Five 子テーマで CSS の項目を再定義する事で対策出来ました。

それぞれのプラグインの状況に応じた対応が必要となります。良い経験になりました。