ある日、スマホで表示確認している時にページ右上にあるMenuが反応しないことがある事に気が付きました。正常に動作すればMenuをクリックすると、Menuとサイトタイトルの間にカスタムメニューがスライドして現れるのですが、ダメなときはクリックしても何の反応もありません。
状況を検証している最中、問題なく動作していた状態だったにも関わらず、スリープから復帰するときにアコーディオンメニューが開かないという状況に遭遇。もしやと思って改めてソースを確認したところ、アコーディオンメニューの開閉は、base.jsの中でJQueryを使って行われていたので、この現象はbase.jsもしくはjquery.jsの読み込みが不完全な状態のときに発生していたのではないかと思います。
Asynchronous JavascriptなどのJavascriptを非同期で読み込むプラグインを利用していると、この現象がより顕著に発生します。プラグインをオフにすると読み込みが完了する前でもすんなりアコーディオンが開くことが確認できたので、Asynchronous Javascriptで該当するJavascriptの非同期化を除外したところ状況は改善しました。
設定方法は、「STINGER5でAsynchronous Javascriptを使うときの設定」をご覧ください。
この様な状況だったので、アコーディオンメニューが開かなくて、Javascriptを非同期で読み込むプラグインを利用している場合には、プラグインでbase.jsとjqueryの読み込みを除外しておけば開きやすくなるかもしれません。
それ以外の場合にも、このJavascript周りを中心に確認してみると問題となっている原因が見つかりやすいかもしれません。
尚、これらの動作検証を行うときにはW3 Total Cacheなどのキャッシュ系プラグインを停止して行わないと原因の判別が難しくなるので、プラグインを停止してから行うことをお薦めします。
2014/11/28追記：
下記のプラグインによる影響を受ける場合もあるようです。上記の方法で解消されない場合には、参考にしてみてください。
- WP External links
Stinger5にしたらスマホ閲覧時のアコーディオンメニューが開かなくなりました – saketorock’s blog - Download Manager
Stinger5にして満足していたがいつの間にかスマホ表示のメニューが開かない!! – Ha-takeden.com
コメント
はじめまして。ふじもんと申します。
先月から「stinger5」でのアドセンスサイトを構築中の初心者でして、スマホメニューが表示されない現象が発生し、対処方法を検索している中で本記事にたどり着きました。
なお、記事中に記載されている「WP External links」のプラグインは利用していましたので「停止」したのですが、それでもメニューが表示されません・・・。
なお、「Asynchronous Javascript」、「Download Manager」のプラグインは利用していません。
何か他に対処すべきことはありますでしょうか？
宜しければアドバイスを頂けると幸いです。
＞ふじもんさん
コメントありがとうございます。
状況を少し調べてみたのですが、私の記事に書かれている不具合の原因とは異なるようです。ふじもんさんのサイトでは、私が使用しているSTINGER5のバージョンよりも新しいバージョンを使用しているのですが、新しいバージョンで発生する新たな不具合のような気がします。手元で再現させる事ができなかったので確かではありませんが、もしかしたら旧バージョンなら不具合が発生しないかもしれません。
手元で不具合を再現させられれば原因を調べて対策出来ると思いますが、すぐには難しいので時間をみて確認してみようと思います。