今回は、WPのテーマCocoonでスマホだけサイドバーが真っ白になり表示されなくなった時の解決方法を書いて行きたいと思います。
サイドバーとは？
Cocoonでスマホからアクセスするとメニューバーのサイドバーボタンが表示されていますので、サイドバーボタンをクリックするとにゅるっと現れるアイツです。
以前のバージョンでは問題なく表示されていたんですがバージョンアップしたところみれなくなってしまっていました( ;∀;)
以前のバージョンのままの他サイトは問題なく表示されていたので、最近のアップデートでこのようになっているようです。
原因
にゅるっと現れる動きからJavascriptが関係しているっぽいのでそれらしきプラグインを停止していったところ、Flying Scriptsが原因であることがわかりました。
Flying Scriptは、指定したJavascriptを指定した秒数遅延してくれるというプラグインなんですが、PageSpeed Insightsの結果を上げるのには一番手っ取り早いプラグインです。
遅延するScriptを選ぶ
Flying Scriptでは、動作に問題がなかったJavascriptを遅延しているので、どのScriptがサイドバーの動作に影響しているか調べることにしました。
WordPress の管理画面サイドメニューの「設定」から「Flying Script」を開きます。
少しずつ停止してテストしてみる
「Include Keywords」の部分が現在遅延しているScriptになります。Flying Scriptが原因かどうかわからない時にはとりあえず遅延しているScriptを特定するために僕は半分ぐらい停止して動作をチェックしています。
試しに上半分を削除してみて、動作に問題がなければ下半分の遅延しているScriptが原因という事がわかります。
今回の場合「jquery.min.js」というScriptを遅延していたことが原因だということがわかりました。
※試しに削除する際には、メモ帳などに削除前の状態を移しておいてから削除しましょう。
他にもAsync JavaScriptなどでも同じような不具合が出ていることからJavaScriptを遅延させたり連結したりするような高速化プラグインを入れると今回のような症状があらわれるかもしれません。
まとめ
今回は、Cocoonでスマホでサイドバーが表示されていない時の解決法を書いてみました。
サイドバーが表示されない原因は他にも色々あるみたいですが、Flying Scriptでサイドバーが真っ白になっている方がいれば今回の記事を参考にしていただければと思います。
コメント