WP Responsive Menuのハンバーガーアイコンが反応しない不具合改善
公開日：2020年5月30日
WordPress プラグインの『WP Responsive Menu』を当サイトでは利用しています。
このプラグインをインストール、有効化することでスマホで見たときに三本線のアイコン (ハンバーガーメニュー) が表示されます。
諸説によるとこの三本線がハンバーガーのように見えることから名付けられたとのことです。
そして、通常はハンバーガーメニューをタップすると、
スマホでは↑このような画面が表示されていました。(※)
※ 『WP Responsive Menu』でパソコンの「ナビゲーションメニューを表示する」に設定時
ハンバーガーメニューをタップしたときに反応しない問題が発生しました。
「ナビゲーションメニュー」がでてこない (表示されない) のです。
目次
ハンバーガーメニューをタップしても無反応、その原因は…
ネットで調べていくと、キャッシュ系のプラグインが干渉している可能性があると考えられます。
当サイトではキャッシュ系のプラグインは、
① Autoptimize (高速化)
②-1 WP Fastest Cache (キャッシュ系 無料版)
②-2 WP Fastest Cache Premium (キャッシュ系 有料版)
上記2種をインストール、有効化をしています。
このプラグインを全て停止してみたところハンバーガーメニューは正常に反応しました。
やはり2種のプラグインがハンバーガーメニューを無反応な状態にしていると判断。
(注) プラウザのキャッシュのクリア及び再起動は必ず行ってください。
まずは、「Autoptimize」を停止して、「WP Fastest Cache (無料版) 」と「WP Fastest Cache Premium(有料版) 」は有効化。
ハンバーガーメニューは無反応な状態で改善されません。
次に「Autoptimize」と「WP Fastest Cache (無料版) 」を有効化して、「WP Fastest Cache Premium(有料版) 」は停止。
ハンバーガーメニューは正常に動作しました。
無反応はのは「WP Fastest Cache Premium (有料版) 」が原因
最初は「WP Fastest Cache」の無料版を使用していて、以降、有料版にしたのです。
無料版ではスマホ表示の各箇所について確認をして問題は無かったのですが、有料版にしたときの確認はしていなかったのです。
まさか、これが原因だったとは…
ちなみに「Autoptimize」の設定はこんな感じです。
JavaScript、CSS、HTMLの高速化設定は「Autoptimize」でしています。
WP Fastest Cache (無料版) での設定です。
赤枠の箇所は無料版では使用できません。
有料版で使用可能となります。
そして、WP Fastest Cache (有料版) での設定です。
JavaScript、CSS、HTML及びLazy Loadの高速化設定は「Autoptimize」で行っているので、「WP Fastest Cache」ではチェックを全て外しています。
「WP Fastest Cache Premium (有料版) 」の一部設定の変更で改善
設定タグの最下部の赤枠部は無料版では使用できません。
私は有料版にして、
設定タグの最下部 (青枠部) を上記のように設定しました。
上記画像の赤下線部の、
Render Blocking Js：Eliminate render-blocking JavaScript resources
に、チェックを入れていたのです。
この箇所は訳すと、
「レンダリングをブロックするJavaScriptリソースを排除する」
で、高速化の為にチェックを入れました。
これが、WordPress プラグイン『WP Responsive Menu』のハンバーガーメニューを無反応にした原因でした。
サイトを高速化するには、「Autoptimize」も「WP Fastest Cache」も必要なプラグインです。
プラグインが同じような環境で『WP Responsive Menu』のハンバーガーメニューが無反応になった場合にこの記事を参考にしてもらえればと思います。
