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

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

WP Mobile Menu は、上下左右にメニューを設置する為のプラグインです。2025年3月現在で 90,000 以上の有効インストール数があります。

上下左右のメニューを設置、と書きましたが、無料範囲では上と左右のメニューの設置までです。有料では下のメニューも設置できます。

今回は、トップメニューにハンバーガーメニュー、右のメニューにグローバルメニュー代替の内容を追記する形で使用しています。

WP Mobile Menu の設定

メニューの外観の設定

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

非常に細かい所まで設定できるようになっています。フォントの種類も細かく設定できますが、拘りだすと止まりませんので、色やフォントの大きさを先ずは調整して、その後で少しずつ修正するのが良いかと思います。(クリックで拡大)

このブログでは、トップメニューにハンバーガーメニューを使用し、右側メニューを有効にしています。

メニューの内容の設定

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

固定ページ、カスタムリンク、カテゴリー、タグ等を指定できます。

このサイトは多言語化されていますので、各項目とも3種類を準備して、言語の種類によって表示・非表示する項目を分けています。

なお、Bogo による翻訳を適切に設定しておけば、タグやカテゴリは各言語毎に自動で切り替わります。

LiteSpeed Cache の設定

UCSS 適用前は、特に表示の乱れはありません。ハンバーガーメニューをクリックすると右側のメニューが開き、バツマークで閉じます。問題なく動作します。

UCSS 生成後の不具合の状況

ハンバーガーメニューが機能しなくなりました。

JavaScript で class を書き換えて、それに合わせて CSS で表示を変更しています。class は書き換わっていましたので、JavaScript は正常に機能しています。

CSS による表示の変更が機能していない状態でした。

対策方法

最も基本的な方法で対策しました。

WP Mobile Menu は3つの CSS ファイルを使用しています。

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

これらの CSS ファイルを、「UCSS ファイルの除外とインライン化」に追加し、UCSS を再生成しました。ファイルサイズはそれぞれ 8.6kB、5.2kb、9.7kb です。

単に除外するよりもインライン化する方が効果が高いと考えます。書き換えするTwenty Twenty Five 子テーマの style.css は CSS 除外に入れて、それ以外の編集しない CSS はインライン化するようにしています。(クリックで拡大)

Twenty Twenty Five 子テーマで項目を追記して対処しようと、ハンバーガーメニューの動作部分を探しましたが、上手く見つけられませんでした。

今回は、基本的な方法の CSS の最適化からの除外で対処しました。

結び

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

WP Mobile Menu の場合には、定番の CSS の最適化からの除外で対処しました。除外項目が多すぎると、最適化される部分が少なくなりますので、LiteSpeed Cache プラグインの効果が薄れてしまいます。

なるべく除外項目を増やさないように対処できる方法を試しています。