どうも、太郎丸(@tarohmal)です。
実はけっこう前からこのブログのメニューが（とくにスマホ表示のときのハンバーガーメニューが）おかしくなっていたんですけど、どこから設定すれば良いのかいまいち分からなくて長いこと放置していました。
今回はやっと重い腰をあげてしっかり調査して修正できたので、レポートを残しておこうと思います。
もくじ
パソコン表示/スマホ表示のメインメニュー設定
まず、前提条件はこちらになります。
| WordPressのバージョン | WordPress 5.4.2 |
| 使用しているテーマ | STORK 1.3.2 |
とくにWordPressのバージョンが異なると、この記事で紹介している手順・用語・操作方法などが少しちがってくることがありますのでご注意を。
パソコン表示：メインメニューの設定
パソコン表示でのメインメニューとは、ブログタイトルの下にズラッと横一列に表示されるメニューのことです。
WordPressの管理画面を開き、つぎのように画面を進みます。
- 「外観」→「メニュー」→「グローバルメニュー」
この「グローバルメニュー」に設定した内容が、パソコン表示のメインメニューに反映されます。
さらにこの設定は、設定条件によっては、あとから説明するスマホ表示のハンバーガーメニューにも反映されてしまうので、詳しくは「ハンバーガーメニューの設定」をごらんください。
スマホ表示：メインメニューの設定
スマホ表示でのメインメニューとは、ブログタイトルのすぐ下に同じくズラッと横一列に表示されるメニューのことです。
パソコン表示のメインメニューと表示され方が似ているので同じものだと勘違いしやすいですが、別設定になっているので注意しましょう。
またこれも間違いやすいですけど、スマホ表示のハンバーガーメニューはこの設定ではなく次の「ハンバーガーメニューの設定」で解説する内容が反映されますので、こちらもご注意を。
WordPressの管理画面を開き、つぎのように画面を進みます。
- 「外観」→「メニュー」→「グローバルメニュー（スマートフォン）」
この「グローバルメニュー（スマートフォン）」に設定した内容が、スマホ表示のメインメニューに反映されます。
スマホ表示：ハンバーガーメニューの設定
ハンバーガーメニューとは、スマホ表示のときに画面の上部に表示されている、よこ線3本がならんだ（”三”のような）マークをタップしたときに表示されるメニューのことです。
メインメニューのなかでも、このハンバーガーメニューの設定がいちばんややこしかったです。
じつは、ハンバーガーメニューの表示は、2か所の設定から影響を受けます。どちらを使うかは好みですが、ちゃんと意図した方の設定が反映されるようにセットアップしてあげましょう。
まずはその2つの設定の場所を紹介します。WordPressの管理画面にて、つぎの2か所から設定ができます。
- メニュー設定：「外観」→「メニュー」→「グローバルメニュー」
- ウィジェット設定：「外観」→「ウィジェット」→「ハンバーガーメニュー」
「メニュー設定」は、先ほど解説したパソコン表示のメインメニューの設定と共通のものです。
「ウィジェット設定」では、ハンバーガーメニューはウィジェットの扱いになっているようです。
「メニュー設定」と「ウィジェット設定」のどちらを設定すればいいの？と混乱してしまいそうになりますが、この2つの設定状況によって反映される設定が変わります。
- 「メニュー設定」が設定済みで「ウィジェット設定」が未設定の場合、「メニュー設定」が反映される
- 「メニュー設定」が未設定で「ウィジェット設定」が設定済みの場合、「ウィジェット設定」が反映される
- 「メニュー設定」と「ウィジェット設定」の両方が設定済みの場合、「ウィジェット設定」が優先されて反映される
どちらを反映させるかは、あなたの好みで選んでください。
このサイトでは現在のところは、設定内容が比較的に自由度が高い「ウィジェット設定」を反映させています。
設定変更が表示へ反映されるには時間がかかるので注意
今回は、メニュー周りの設定を調査して回っていたんですが、やはり表示関係の設定変更が実際の表示へ反映されるまでには時間がかかる場合があるようです。（キャッシュが残っているのかな？）
面倒ではありますが、
「設定をかえたのに表示内容が変わらない！」
「ネットで書いてあるとおりに設定したのに思い通りにならない！」
と焦ってしまわず、「Shift + F5」キーでキャッシュなしリロードするか、ひと晩くらい間をおいてブログを確認してみましょう。
コメントを残す