当サイトで使用しているWordpressテーマ「THE THOR」。
実はカスタマイズをしているとき、ちょっとした不具合が起こりました。
それが、グローバルメニューが表示されないという事態です。
当サイトのタイトルロゴ下に現在ではメニューが表示されていますが、実はブログを開設して間もない頃に「カスタマイズで設定しているはずなのにメニューが表示されない」ということがありました。
今回はWordpressテーマ「THE THOR」で実際にあった不具合の対処方法を、備忘録も兼ねて記事にしています。
同じような不具合でお悩みの方の参考になればと思います。
グローバルメニューが表示されない…
ブログ開設にあたり、様々なWordpressテーマの中から「THE THOR」を導入することになりました。
なんでもSEO対策や抜群の集客力が魅力との謳い文句。
せっかく自分の考えを発信するのだから、多くの人の目に触れてほしいなぁという気持ちで購入。
サーバーやドメインの契約を済ませ、いざ自分だけのブログを！
…と思ったのも束の間、すぐにカスタマイズで作業は暗礁に乗り上げました。
ブログのカスタマイズの際、なぜか一向にヘッダー部分のグローバルメニューが表示されませんでした。
↑カスタマイズ画面ではしっかりと表示されているのに…
↑直接サイトにアクセスすると消えていました…
なぜだぁああ～！！！
これは私の知らない何らかの設定があって、それを調整していないから表示されないのか…
いや、もしかしたら単純なバグで、数日後には表示されるのかも…
様々な可能性を考えましたが、一向にメニューが表示されないという状況が続きました。
導入時の使用バージョン
参考までに主なバージョンを示しておきます。
・主に使用するブラウザ：Microsoft edge
・Wordpressバージョン：5.2.4
（5.3以上ではカスタマイズできなかったので、プラグインを使用してダウングレードしました）
・THE THORバージョン：1.6.1
挙動としては上記画像のとおり「カスタマイズ画面ではグローバルメニューが表示されるのに、自分のスマホや他のPCからブログにアクセスするとメニューが消えている」という状態でした。
この不具合をなんとかしようと、以下のような対処をしてみました。
対処① 使用するブラウザを変えてみた
対処② キャッシュをクリア
対処③ 表示設定をいじりなおす
一見すると「対処③表示設定をいじりなおす」は昭和の時代にテレビの調子がおかしくて叩けば治る的な発想ですが…
実はぴよすけは対処③でメニューが表示されるようになりました。笑
以下、それぞれの対処方法を記していきます。
対処① 使用ブラウザ変える
ぴよすけがまず試したのは、普段使用しているブラウザを変えるという手段です。
普段使いにMicrosoft edgeを用いているので、一時的に使用するブラウザを変えてWordpressにログインしてみました。
なぜ使用するブラウザを変えたかというと、以前にChromeで表示されるものがMicrosoft edgeではうまく表示されない（レイアウトが崩れる・表示自体されない）ということが何度かあったからです。
試したのは以下のブラウザです。
・Chrome
・Internet explorer
・Firefox
おそらく、どのブラウザも１０回以上ログインしてみたのですが…
一向に変わる気配が見られませんでした。
対処② キャッシュのクリア
ネット上で似たような不具合がないか検索したところ、有力な情報が！
それがブラウザキャッシュのクリアでした。
なんでも、THE THORでは素早くデータをPCやスマホに表示させるため、一度読みこんだデータを保存するキャッシュ機能が強力なようです。
（それがSEO対策に効果があるのだとか…）
しかし、そのキャッシュが強力過ぎるがゆえに、カスタマイズにおいて一時的に古いデータを読み込んでしまい新しいスタイルが反映されないことがあるようです。
つまりキャッシュをクリアする（古い情報を保存してあるデータを削除する）ことで最新のデータを反映させることができるというものです。
しかしこれだけではぴよすけのブログは改善しませんでした…
ちなみに、この「キャッシュクリアによる挙動の改善」という情報はWordPress日本語マニュアル「ブラウザーの問題」にて詳細が説明されています。
キャッシュをクリアする方法はブラウザごとに異なります。
こちらのページにて各ブラウザのキャッシュクリアのリンクがありますのでご参考ください。
対処③ グローバルメニューの表示／非表示を繰り返す
結論を言うと、ぴよすけはこの方法での対処後にしっかりとメニューが表示されるようになりました。
不具合発覚から５日経っても改善されず、へこみ始めたぴよすけ。
あぁ、自分はブログ運営に向かないのか…
半ば諦め、最後に改めてすべてを最初から設定し直すつもりでカスタマイズ画面をいじっていました。
すると、なんということでしょう。
いつの間にかメニューが表示されるようになったではありませんか！！！
え、自分…今なにいじったっけ？
↑当時の心境です。笑
自分が何をいじって表示されるようになったのかわからないくらい、特別なことをしたつもりはありませんでした。
よくよく直前に調整していた内容を思い出すと、「ヘッダーエリア設定」の「グローバルメニュー設定」で「PC/スマホで表示する」をいじっていました。
というか、これまでこの部分はいじっていませんでした。
え、なぜかって？？
だって、デフォルト設定が「PC/スマホで表示する」になっていたからです！！！
普通「PCもスマホも表示させたいなぁ」と思っている人であれば、設定し直しませんよ！（言い訳）
…そして実はこれ、THE THORのフォーラム会員ページに載っている方法でした。笑
表示されるまでのやり方
グローバルメニュー設定を開きます。
「カスタマイズ」→「共通エリア設定」→「ヘッダーエリア設定」の真ん中あたりにあります。
この「PC／スマホで表示する（default）」の項目を何回か選び直して「公開」をすると、サイトに移動した後もしっかりと表示されるようになりました。
繰り返しになりますが、ぴよすけはブログ開設時に大方のカスタマイズを済ませ、その際にこの「グローバルメニューの表示／非表示」を確認していました。
というか、デフォルトで設定されていた「表示する」になっていたのを確認しただけで、いじっていませんでした。
メニューが表示されないという方は、まずはこの方法をお試しください。
教訓：マニュアルよく読もう！
今回の件から、マニュアルはしっかりと読んだほうがいい、という教訓が得られました。笑
THE THORは他のブロガーさんも多く購入されているので、対処方法やカスタマイズ方法の情報が結構多く出回っています。
その一方でカスタマイズの反映についてはイマイチ遅い部分も見受けられます。
例えばウィジェットのデザイン（このブログでは「内側ボーダー（ワイド）」）を選択しても、カスタマイズ画面では反映されません…
しかし、実際にはPCやスマホからダイレクトにブログにアクセスすると、設定が反映されています。
このあたりはTHE THORのアップデートで改良されるのを待つしかないでしょう。
今回はメニュー表示についての不具合対処方法でした。
お悩みの方の参考になればと思います。
最後までお読みいただきありがとうございました。
↓↓↓クリックしていただくとぴよすけが泣いて喜びます。