PR

WordPressナビゲーションメニューが表示されない原因と非表示設定手順とは

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか?」その秘密を暴露します。 「今年こそは絶対稼ぎたい!」という人は今すぐご覧ください。


あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

メニューを作ったはずなのに画面に出てこないと、ちょっと焦りますよね。私も最初は「どこを触ればいいの?」と毎回あたふたしていました。

この記事を読むと分かる事

  • WordPressのナビゲーションメニューが表示されないときによくある原因とチェックポイント
  • ブロックテーマとクラシックテーマ、それぞれのメニューの考え方と仕組み
  • ナビゲーションメニューをあえて非表示にする具体的なやり方
  • 同じトラブルを繰り返さないためのメニュー運用のコツ

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

WordPressナビゲーションメニューが表示されない・非表示のよくあるパターン

ごとう
ごとう

まずは、ざっくり「どのメニューが」「どういう意味で表示されないのか」を整理しておきましょう。最初にここをはっきりさせておくと、このあと原因を追いかけるときに迷子になりにくくなります。

どの「ナビゲーションメニュー」が表示されないのか整理しよう

WordPressで言うナビゲーションメニューは、一箇所だけではありません。サイト上のいろいろな場所に、別々のメニューが配置されていることが多いです。自分が困っているのはどれなのか、先にイメージを固めておきましょう。

場所 呼び方の例 よくある症状
ページ上部 ヘッダーメニュー、グローバルナビ 入れたはずのメニューが一切出ない、ロゴだけ表示されている
ページ下部 フッターメニュー フッターに何も表示されない、リンクが一つだけになっている
スマホ表示のメニュー ハンバーガーメニュー、モバイルメニュー 三本線アイコンが出ない、押してもメニューが開かない
特定ページのメニュー LP用ページなど そのページだけメニューが消えている、逆に消したいのに出てきてしまう

こんな感じで、「場所」と「症状」をセットで書き出しておくと、このあと原因を照らし合わせやすくなります。

表示されないのか、あえて非表示にしたいのかを切り分ける

もう一つ大事なのが、「本当は表示させたいのか」「むしろ非表示にしたいのか」をはっきり分けることです。このゴールがあいまいなままだと、設定をいじっているうちに余計こんがらがりがちです。

ざっくり分けると、こんなパターンがあります。

  • ヘッダーなどにメニューを表示させたいのに、なぜか表示されない
  • LPやセールスページでは、あえてナビゲーションメニューを消したい
  • PCでは表示したいけれど、スマホでは非表示にしたい(その逆も含む)
状況 目指す状態 メインで見るべき設定
表示されない ちゃんと表示させたい メニューの作成状況、表示位置の割り当て、テーマの設定、プラグイン、キャッシュ
あえて非表示にしたい サイト全体または一部で完全に消したい テーマの表示設定、追加CSS、テンプレートの構成
条件によって切り替えたい デバイスやページごとに表示/非表示を変えたい 表示条件の設定、ページ別のCSS、メニュー制御系プラグイン

このあと、「表示させたい」ときの話と「非表示にしたい」ときの話を分けて解説していくので、いまの段階で自分がどのパターンに当てはまるか、なんとなくでいいので意識しておいてください。

WordPressナビゲーションメニューが表示されない主な原因

ごとう
ごとう

ここからは「本当は表示されてほしいのに、ナビゲーションメニューが出てこない」というケースに絞って話を進めます。多くの場合は設定の見落としやテーマの仕様でつまずいているだけなので、落ち着いて一つずつチェックしていきましょう。

メニューが作られていない・表示位置に割り当てていない

いちばん多いのが、「メニューを作ったつもりで実は作れていない」か、「メニューは作ったのに表示位置に割り当てていない」というパターンです。私も最初のころ、ここで何度も同じミスをしました。

基本のチェックは次のような流れです。

  • ダッシュボードから「外観」→「メニュー」または「ナビゲーション」を開く
  • メニューがちゃんと作られているか、メニューの中にページなどの項目が入っているか確認する
  • 「メニューの位置」や「表示する場所」の設定で、ヘッダーやフッターなどに割り当てられているかを見る
症状 確認する場所 対処のポイント
メニューがまったく表示されない 外観 → メニュー そもそもメニューが存在するか、メニュー名が選ばれているか確認する
枠だけ表示されて中身が空 外観 → メニュー → メニュー構造 固定ページやカテゴリーなどがメニューに追加されているか確認する
テーマを変えたらメニューが消えた 外観 → メニュー → メニューの位置 新しいテーマの「ヘッダー」「フッター」などの位置にメニューを再割り当てする

「メニュー自体がない」「メニューはあるけど場所に割り当てていない」というのは、本当によくある原因です。難しいことを考える前に、まずここからチェックしてみてください。

テーマやブロックテーマ側の設定ミス

次によくあるのが、使っているテーマの仕様をちゃんと理解できていないパターンです。特に最近のブロックテーマと、従来のクラシックテーマでは、メニューの扱い方がかなり違います。

ざっくり分けると、次のような違いがあります。

種類 メニューの編集場所 特徴
クラシックテーマ 外観 → メニュー 従来の画面でメニューを作り、ヘッダーやフッターの位置に割り当てる
ブロックテーマ 外観 → エディター(サイトエディター) テンプレート内にナビゲーションブロックを配置して編集する

ブロックテーマを使っていると、「外観 → メニュー」自体が見当たらないことがあります。その場合は「外観 → エディター」からヘッダーのテンプレートを開いて、ナビゲーションブロックがちゃんと置かれているかをチェックします。

また、テーマによっては次のような独自設定を持っていることが多いです。

  • ヘッダーを非表示にするチェックボックスがある
  • ヘッダーバーだけ表示する、メニューを別の場所に出す、といったオプションがある
  • スマホ用ヘッダーとPC用ヘッダーを別々に設定できる

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

このあたりは「外観 → カスタマイズ」や、テーマ独自の設定画面をひととおり開いてみると気づきやすいです。WordPressのナビゲーションメニューだけを疑うのではなく、「テーマ側でメニューを隠していないか」も合わせて確認してみてください。

プラグイン・キャッシュ・カスタムコードなどその他の原因

ここまで見てもナビゲーションメニューが表示されない場合は、少し深めのところを疑っていきます。具体的には、プラグイン同士の相性やキャッシュ、カスタムコードの影響などです。

  • メガメニューやスライドメニュー系のプラグインと、テーマがうまく噛み合っていない
  • キャッシュ系プラグインやサーバー側のキャッシュが古い状態を見せ続けている
  • functions.php に追加したコードがエラーになっていて、メニューを呼び出す処理が動かなくなっている
  • テンプレートファイルを直接カスタマイズした結果、メニューの呼び出し部分を消してしまっている
原因の種類 具体例 対処の方針
プラグインの競合 メニュー拡張系、セキュリティ系、キャッシュ系など 一度すべてのプラグインを停止し、一つずつ有効化して問題のプラグインを特定する
キャッシュ サーバーキャッシュ、ブラウザキャッシュ プラグインやサーバー管理画面からキャッシュを削除し、ブラウザも再読み込みする
カスタムコード functions.php の追記、独自テーマの編集 子テーマ側で編集し、元のテーマファイルと見比べておかしな部分がないか確認する
テーマの不具合 独自テーマや配布元が不明なテーマなど 一時的に標準のテーマに切り替え、症状が再現するかどうかを確認する

このあたりは少しテクニカルですが、「一度プラグインを全部止めてみる」「標準テーマに切り替えてみる」だけでも、原因の候補をかなり絞り込めます。いきなりコードをいじるより、まずはこのあたりから試してみるのがおすすめです。

WordPressナビゲーションメニューを非表示にしたいときの方法

ごとう
ごとう

ここからは、逆に「ナビゲーションメニューを消したい」というケースを見ていきます。LPや申し込みページなどでは、メニューがあると他のページへそれてしまうので、あえて非表示にしたほうが成果につながることもあります。

サイト全体でヘッダーメニューを非表示にする

まずは「サイト全体でヘッダーナビゲーションメニューを非表示にしたい」ときの考え方です。大きく分けると、次の3パターンがあります。

  • テーマの設定で「ヘッダーを表示しない」「メニューを表示しない」を選ぶ
  • 中身が空のメニューをヘッダー位置に割り当てて、実質的にメニューをなくす
  • 追加CSSでメニューエリア自体を非表示にする
方法 難易度 向いているケース
テーマの設定で非表示にする かんたん テーマに「ヘッダー非表示」などのチェックが用意されている場合
空のメニューを割り当てる ふつう ヘッダーにメニュー枠だけ出てしまうテーマで、コードを触りたくない場合
追加CSSで非表示にする やや難しい 見た目を細かくコントロールしたい、CSSに少し慣れている場合

CSSで隠す場合は、メニューが付いている要素のクラス名(たとえば .main-navigation や .global-nav など)をブラウザの検証ツールで確認して、その要素に display: none; を指定します。ただし、間違った要素を消してしまうとレイアウトが崩れることもあるので、必ずバックアップを取ってから試すようにしてください。

スマホだけ・特定ページだけ・一部項目だけ非表示にする

「全部消すわけではないけれど、条件付きでナビゲーションメニューを非表示にしたい」ということも多いです。私がよく相談を受けるのは、次のようなパターンです。

  • スマホ表示のときだけ、グローバルナビを非表示にしたい
  • LP用の固定ページだけ、ヘッダーメニューを出したくない
  • あるメニュー項目だけ、期間限定で非表示にしたい
やりたいこと 方法の例 一言メモ
スマホだけ非表示にする メディアクエリを使って、一定幅以下のときにメニューを非表示にする 小さい画面ではメニューをシンプルにしたいときに便利
特定ページだけ非表示にする そのページのbodyタグに付くclass(page-id-◯◯など)を使い、ヘッダーを非表示にする LPや申し込みページだけメニューを消したいときの定番
一部のメニュー項目だけ非表示にする メニュー項目に任意のCSSクラスを設定し、そのクラスをCSSで非表示にする キャンペーン中だけメニューを見せる、といった切り替えに使いやすい

私自身は、「LPだけヘッダーを非表示」「キャンペーン期間だけ特定のメニューを表示」といった使い方をよくします。WordPressのナビゲーションメニューをどう見せるかは、デザインだけでなくサイトの目的にも直結する部分なので、「なぜ非表示にしたいのか」を考えながら設定するのがポイントです。

WordPressナビゲーションメニュー表示トラブルの診断フロー

ごとう
ごとう

ここまで読んで「結局どこから手をつければいいの?」と思ったかもしれません。この章では、私が実際の案件で使っている簡単な診断フローをまとめておきます。迷ったときは、この順番でチェックしてみてください。

  • どのメニューが、どのページで表示されていないのかを書き出す
  • そのメニューは本来表示させたいのか、それとも非表示にしたいのかを整理する
  • 表示させたい場合は、「外観 → メニュー(またはナビゲーション)」でメニューの有無と表示位置の割り当てを確認する
  • 使っているテーマがブロックテーマかクラシックテーマかを確認し、それぞれの方法で設定を見直す
  • テーマのカスタマイザーや独自設定画面で、ヘッダーやメニューの表示設定を確認する
  • それでも解決しない場合は、プラグインを一度すべて停止し、一つずつ有効化して問題のプラグインがないかを探す
  • 最後の手段として、標準テーマに切り替えて同じ症状が出るか確認し、テーマ側の問題かどうかを切り分ける

この流れで見ていけば、コードをいじらなくても原因がかなり絞り込めます。私も実務では、このチェックリストをベースにお客さんのサイトを診断しています。

運用面での注意点と再発防止のコツ

ごとう
ごとう

ナビゲーションメニューまわりのトラブルは、一度解決しても、テーマ変更やプラグイン追加のタイミングでまた起きがちです。ここでは、なるべく同じ問題を繰り返さないための運用のコツをまとめます。

  • テーマやプラグインを大きく変える前に、メニュー設定画面のスクリーンショットを取っておく
  • 外観まわりの設定を変えたときは、PCとスマホの両方でナビゲーションメニューの表示をチェックする
  • functions.php やテンプレートファイルを編集するときは、必ず子テーマを使い、元の状態に戻せるようにしておく
  • LP用のページでヘッダーやナビゲーションメニューを非表示にしたら、どのCSSで消しているかをメモしておく
  • メニュー構成は、アクセス解析を見ながらときどき見直し、不要なリンクは整理する

ナビゲーションメニューは、ユーザーがサイト内をどう回遊するかにも、検索エンジンがページ同士の関係をどう理解するかにも関わってきます。単に「表示されているかどうか」だけでなく、「どんなメニュー構成にするか」「どの場面で非表示にするか」という視点も意識しておくと、サイト全体の質がぐっと上がります。

よくある質問

ごとう
ごとう

ここからは、WordPressのナビゲーションメニューが表示されない・非表示に関連して、よくいただく質問にまとめて答えていきます。

Q1. メニューを作ったのに、WordPressのナビゲーションメニューが表示されないのはなぜですか?

A. いちばん多いのは、「メニューは作ったけれど、表示位置に割り当てていない」というケースです。外観 → メニュー(またはナビゲーション)を開き、メニューの中にちゃんとページが入っているか、そして「ヘッダーメニュー」「グローバルメニュー」などの表示位置にチェックが付いているかを確認してみてください。

ブロックテーマを使っている場合は、外観 → エディターからヘッダーのテンプレートを開き、ナビゲーションブロックが設置されているか、消してしまっていないかも合わせて見ておくと安心です。

Q2. LPだけナビゲーションメニューを非表示にして、他のページでは表示したいです

A. よくある要望で、やり方はいくつかあります。もっともシンプルなのは「LP専用のページテンプレートを使って、ヘッダーごと表示しないようにする」方法です。テーマによっては、ページ編集画面でテンプレートを選ぶだけで、ヘッダーなしレイアウトに切り替えられるものもあります。

そのようなテンプレートがない場合は、LPのbodyタグに付いているclass(例:.page-id-◯◯)を使って、「そのページだけヘッダーエリアを非表示にするCSS」を追加する方法もあります。目的は「LPでナビゲーションメニューを非表示にして、離脱ポイントを減らすこと」なので、テーマのドキュメントも参考にしながら、自分の環境に合った方法を選んでみてください。

Q3. スマホではナビゲーションメニューを表示したくないのですが、SEOに悪影響はありますか?

A. 場合によりますが、スマホでナビゲーションメニューを完全に消してしまうと、ユーザーが他のページに移動しづらくなり、結果的にサイト全体の回遊性が下がることがあります。内部リンクが極端に減ってしまうと、SEOの観点から見てもあまりうれしくありません。

そのため、個人的には「スマホだけ完全に非表示」にするより、「スマホでは必要最低限のリンクだけをハンバーガーメニューにまとめる」「下部に重要なリンクだけを並べる」といった方向で調整するのがおすすめです。どうしても邪魔なときは、スクロールすると隠れるヘッダーにするなど、ナビゲーションメニューを活かしつつ見た目をすっきりさせる工夫も検討してみてください。

まとめ|WordPressナビゲーションメニューの表示・非表示を味方につけよう

この記事のポイントを整理します

  • まずは「どのメニューが」「どのページで」「表示されないのか・非表示にしたいのか」を紙に書き出して整理する
  • 表示させたいときは、メニューの中身と表示位置の割り当て、テーマの種類、プラグインやキャッシュを順番にチェックする
  • ナビゲーションメニューをあえて非表示にしたいときは、「サイト全体」「スマホだけ」「特定ページだけ」「一部項目だけ」など、目的に合った方法を選ぶ
  • メニューはユーザー導線とSEOの両方に関わるため、表示・非表示の設定は一度決めて終わりではなく、定期的に見直す
  • テーマ変更やカスタマイズの前には、メニュー設定のスクリーンショットやバックアップを取っておくと、トラブル時にも落ち着いて戻せる

今日からできる最初の一歩としては、「自分のサイトのメニューがどこで、どういう設定で表示されているか」を一度チェックしてみてください。どのメニューがどの位置に割り当てられているかが分かるだけでも、WordPressのナビゲーションメニューが表示されない・非表示にしたいときに、落ち着いて対応できるようになります。

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a