スマホで自分のウェブサイトを見ると、サイドバーが真っ白になって表示されないよ。
どうやって解決すればよいの？
そんなお悩みにお答えします！
サイドバーは、カテゴリーや人気記事の掲載など、ユーザーの利便性や回遊率を上げるのに効果的です。
ふとした時にスマホで自分のウェブサイトを見たところ、サイドバーが真っ白になって表示されなくなっていました。
今回、プラグインの設定を見直したことで問題を解決できました。
そこで本記事では、Cocoonテーマでのスマホでサイドバーが真っ白になる時の解決方法をご紹介します。
環境
Windows10
WordPress バージョン：6.5.2
Cocoon バージョン：2.7.2.2
スマホでサイドバーが真っ白に 内容
Cocoonのフッターモバイルボタンの「サイドバー」を押すと、サイドバーが横からスライドして表示されます。
以前はきちんと表示されていたのですが、急に真っ白になってしまいました。
これでは困るので、改善策を探しました。
スマホでサイドバーが真っ白に 解決方法
結論から言うと、プラグインAsync JavaScriptの設定を「Defer」→「Async」に変更することで解決できました。
JavaScriptファイルの読み込みを遅らせていたことが原因だったようです。
Async JavaScriptとは、JavaScriptファイルの読み込みを非同期にしたり遅らせることで、レンダリング（描写）の遅延を防ぎ、サイトスピードを改善できるプラグインのことです。
Page Speed InsightsのLCPスコアを上げるために、導入すると効果的です。
詳細はこちらをご覧ください。
Async JavaScriptの設定
では、Async JavaScriptの設定方法をご説明します。
まず、WordPress管理画面から「プラグイン」→「Async JavaScript」の設定をクリックします。
設定画面が表示されるので、下記のとおり変更します。
- 「Async JavaScript Method」を「Defer」→「Async」
- 「JQuery」を「Defer」→「Async」
設定は以上です。
スマホのサイドバーを確認すると、問題なく表示できました。
スマホでサイドバーが真っ白に 解決方法 その他
上記の方法で解決できない時は、こちらをお試しください。
- Flying Scriptを無効化
- 「モバイルボタン時コンテンツ下のサイドバーを表示」を有効化
詳細を順番にご説明します。
Flying Scriptを無効化
Flying Scriptとは、JavaScriptを読み飛ばし、スクリプトの遅延ロードをしてくれるプラグインのことです。
Page Speed InsightsのLCPスコアを上げるために導入している場合は、無効化するとサイドバーの表示が改善することがあります。
「モバイルボタン時コンテンツ下のサイドバーを表示」を有効化
ただし、どうしても改善できない時や、改善はできるけどPage Speed Insightsのスコアが悪化してしまうのでプラグインの設定変更や無効化は難しい…ということがあるかと思います。
そこで代替案として、コンテンツ下にサイドバーを表示する方法をご紹介します。
WordPress管理画面から「Cocoon設定」→「モバイル」→「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れるだけです。
「変更をまとめて保存」をクリックしたら設定完了です。
これで、スクロールするとメインカラム下にサイドバーが表示されるようになります。
【WordPress】スマホでサイドバーが真っ白になる時の解決方法【Cocoon】 まとめ
本記事では、Cocoonテーマでのスマホでサイドバーが真っ白になる時の解決方法についてご紹介しました。
プラグインAsync JavaScriptの設定を「Defer」→「Async」に変更すると、サイドバーの表示が元に戻りました。
上記の方法で解決できない時は、こちらも試すと良いかもしれません。
- Flying Scriptを無効化
- 「モバイルボタン時コンテンツ下のサイドバーを表示」を有効化
急にスマホのサイドバーが真っ白になってお困りの方は、ぜひ今回の手順をお試しくださいね。
本記事が、皆さんの参考になれば幸いです。
