Wordpress グローバル メニュー 表示 されない

前提・実現したいこと

Wordpressで初めてブログを作りました。
固定ページでプロフィールを作ったので、グローバルメニューで表示させたいと思ってます

発生している問題・エラーメッセージ

なぜかトップページの時だけグローバルメニューが表示されません。
他のページではちゃんと表示しています。

試したこと

外観→メニュー→位置の管理のヘッダーナビは「ヘッダーメニュー」設定しました。
テーマ「cocoon」を使っているのですが、cocoon設定の方のヘッダーを見てみると、きちんと表示されているのですが、
なぜかトップページだけ表示されません。

まだ完成していないのでお恥ずかしいですが、
https://kataponess.com/
このページです。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

Wordpress グローバル メニュー 表示 されない

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • WordPressグローバルメニューの設定方法がわからない…。
    Wordpress グローバル メニュー 表示 されない
  • グローバルメニューが表示されない…。
  • グローバルメニューをカスタマイズする方法が知りたい!

こんな疑問や悩みに答える内容になっています。

この記事を読めばWordpress初心者の方でも下記のようなグローバルメニューを簡単に設定することができます。(当ブログの例)

Wordpress グローバル メニュー 表示 されない

この記事で分かる3つの事

  1. グローバルメニューの基本的な設定方法
  2. グローバルメニューの編集方法
  3. グローバルメニューの簡単なカスタマイズ方法(アイコン画像)

この記事を読み終われば、WordPress初心者の方でもグローバルメニューの設定で悩むことはなくなりますよ(^^)/

もくじ

  • 1 WordPressの「グローバルメニュー」とは?
  • 2 1、WordPressの「グローバルメニュー」の設定方法
    • 2.1 カスタムリンクの追加設定方法
    • 2.2 カテゴリーページの追加設定方法
    • 2.3 固定ページの追加設定方法
  • 3 WordPressのグローバルメニューが表示されない場合
  • 4 2、グローバルメニューの編集方法:WordPress
    • 4.1 グローバルメニューの位置を変える方法
    • 4.2 ドロップダウンメニュー(階層)を作る方法
    • 4.3 メニューを複数作ったときの管理法
    • 4.4 メニューを削除する方法
  • 5 3、WordPressのグローバルメニューカスタマイズ方法(アイコン画像)
  • 6 WordPressのグローバルメニュー:まとめ

WordPressの「グローバルメニュー」とは?

Wordpress グローバル メニュー 表示 されない

WordPressの「グローバルメニュー」とは冒頭でも示したように、サイトの1番上にくるナビゲーションメニューのことです。

グローバルメニュー(当ブログの例)

Wordpress グローバル メニュー 表示 されない

お使いのWordPressテーマによって表示方法は変わります。

グローバルメニューの役割は、読者が迷うことなく目的の記事を見つけるということだけでなく、

検索エンジンのクローラーが記事を見つけやすくなるといった役割もあります。

また、当ブログのように、アイコンをグローバルメニューに表示させるカスタマイズ方法も記事後半で解説していきます。

1、WordPressの「グローバルメニュー」の設定方法

Wordpress グローバル メニュー 表示 されない

WordPressの管理画面左側メニューから「外観」⇒「メニュー」をクリックします。

Wordpress グローバル メニュー 表示 されない

すると下記のようなメニューの編集画面に移るのでメニューを作成していきます。

Wordpress グローバル メニュー 表示 されない

  1. 画面右側の「メニュー構造」の中の任意の「メニュー名」を入力します。(これは管理者の為のメニュー名でサイトに表示はされません。)
  2. 右側の「メニューを作成」をクリックします。

すると下の画像のようにメニューを作成できるようになります。

Wordpress グローバル メニュー 表示 されない

左側の「メニュー項目を追加」からグローバルメニューに載せる項目を選んでいきます。

注意説明
「メニュー項目を追加」の項目は、お使いのWordPressテーマによって変わります。この記事では当ブログの現在のテーマ「スワロー

Wordpress グローバル メニュー 表示 されない
」を基に解説しますが、どのテーマでも基本的な操作方法は同じです。

グローバルメニューの完成形をイメージしやすいように、当ブログのグローバルメニューと同じ形にする方法を解説していきます。

Wordpress グローバル メニュー 表示 されない

グローバルメニューに追加していく項目

  1. カスタムリンク(トップページへのリンク)
  2. カテゴリーページ5つ
  3. 固定ページ2つ(プロフィールと問い合わせ)

もちろんこれは例であって、どれを入れてどれを入れないかはご自身で判断してください。

カスタムリンクの追加設定方法

まずは、グローバルメニューの左側にトップページのリンクを設置していきます。

「固定ページ」の項目にも「ホーム」というのがあるのでわざわざ作る必要ありませんが、一応説明のためにカスタムリンクで作ります。

Wordpress グローバル メニュー 表示 されない

左側の「メニュー項目を追加」から「カスタムリンク」をクリックすると上記のように入力窓が開きます。

Wordpress グローバル メニュー 表示 されない

  1. URL⇒トップページにする場合はご自身のURLを入力(その他にもTwitterなどのSNSのURLを入力して表示させるなどの方法もあります。
  2. リンク文字列⇒グローバルメニューに表示させる文字を決めます
  3. ①、②を入力したら「メニューに追加」をクリックします。

すると画面右側のメニュー構造の中にカスタムリンクで作った項目が追加されます。

カテゴリーページの追加設定方法

次に、「カテゴリーページ」をグローバルメニューに追加していきます。

補足説明
事前に作成していないと表示されません。カテゴリーページの作成方法がわからない方は以下の記事を参考にしてください。
⇒カテゴリーページの作成と表示方法

左側の「メニュー項目を追加」より「カテゴリー」をクリックします。

Wordpress グローバル メニュー 表示 されない

  1. 「よく使うもの」だと、作ったばかりのページが表示されないので「すべて表示」をクリック
  2. 表示させたいカテゴリーページにチェックを入れる
  3. メニューに追加」をクリック

すると上記画像の右側のようにカテゴリーページが追加されます。

固定ページの追加設定方法

最後に「固定ページ」を追加していきます。

※補足説明
固定ページも事前に作成していないと表示されません。問い合わせページの作り方は以下の記事を参考にしてください。
⇒WordPressの『問い合わせフォーム』の作り方

画面左の「メニュー項目を追加」から「固定ページ」をクリックします。

Wordpress グローバル メニュー 表示 されない

  1. すべて表示」タブをクリックする
  2. 追加したい項目をチェックする(ここでは事前に作成した「プロフィール」と「問い合わせ」)
  3. メニューに追加」をクリックします。

これで全てのグローバルメニューの項目を揃えました。

次に、画面右側の「メニュー構造」の下の方にある「メニュー設定」の中から「グローバルナビ」にチェックを入れましょう。

お使いのWordpressテーマによって表示が異なります。ここで「スマホ用のグローバルメニュー」や「フッターメニュー」が選べますがテーマによってないものもあります。

Wordpress グローバル メニュー 表示 されない

チェックをしたら右側にある「メニューを保存」をクリックしましょう。(上も下も同じです

では、先ほど設定したグローバルメニューがちゃんと反映されているのか実際のサイトを見てみましょう。

Wordpress グローバル メニュー 表示 されない

このようにしっかりグローバルメニューに反映されてますね(^^)/

WordPressのグローバルメニューが表示されない場合

上記の手順で設定をすれば基本的にグローバルメニューは設定をすることができますが、稀にこの手順でやっても表示されないことがあるようです。

その時に考えられることは、サイトの全体設定で「グローバルナビを表示」、という項目にチェックが入っていない場合です。

その場合は「外観」⇒「カスタマイズ」の中から探し出してチェックが外れていないか確認しましょう。

これもお使いのWordpressテーマによって表示内容が異なります。

2、グローバルメニューの編集方法:WordPress

Wordpress グローバル メニュー 表示 されない

次に、グローバルメニューの基礎的な編集方法を解説します。

グローバルメニューの基礎的な編集方法

  1. グローバルメニューの位置を変える
  2. ドロップダウンメニューを作る
  3. 複数のメニューがある時の管理する
  4. メニューを削除する

補足説明
画面を見ながら微修正をする場合は、ログイン状態で左上のサイト名にカーソルを合わせると「メニュー」というタブが出てくるのですぐにメニューを編集することができます。

Wordpress グローバル メニュー 表示 されない

グローバルメニューの位置を変える方法

下記の画像のようにグローバルメニューの位置を変えることは簡単にできます。

Wordpress グローバル メニュー 表示 されない

先ほどのメニュー設定画面で移動したい項目をドラッグ&ドロップするだけです。

Wordpress グローバル メニュー 表示 されない

メニューの位置を変えたら右側の「メニューを保存」をクリックすることを忘れないようにしましょう。

ドロップダウンメニュー(階層)を作る方法

下記画像のようにグローバルメニューをまとめてドロップダウンメニューにすることも簡単にできます。

Wordpress グローバル メニュー 表示 されない

下記の画像のようにドロップダウンメニューを作りたい親カテゴリーの下に「右に少しずらして」ドラッグ&ドロップするだけです。

Wordpress グローバル メニュー 表示 されない

下記画像のようにさらに階層を深めることもできますが、逆に読者が迷ってしまう原因になるのでこのような構造は避けたほうがいいと思います。

ダメな例

Wordpress グローバル メニュー 表示 されない

変更をしたら右側の「メニューを保存」を忘れずにクリックしましょう。

メニューを複数作ったときの管理法

グローバルメニューだけでなくフッターメニューなど複数のメニューを作った場合は、「位置の管理」という項目で簡単に管理できます。

Wordpress グローバル メニュー 表示 されない

どのメニューがどこに配置されているかなどが一目で分かるので複数のメニューを作った場合は便利です。

メニューを削除する方法

メニュー項目を削除したい場合は、削除したい項目「右側の▼」をクリックしましょう。

Wordpress グローバル メニュー 表示 されない

すると上記画像のように項目の左下に「削除」があるのでクリックします。

Wordpress グローバル メニュー 表示 されない

メニュー全体を削除したい場合は、上記画像のようにメニュー構造の1番下に「メニューを削除」とあるのでそれをクリックしましょう。

3、WordPressのグローバルメニューカスタマイズ方法(アイコン画像)

Wordpress グローバル メニュー 表示 されない

グローバルメニューにアイコン画像を追加するカスタマイズ方法を解説します。

当ブログの例

Wordpress グローバル メニュー 表示 されない

まずは「Font Awesome」というサイトでアイコン画像を取得します

⇒Font Awesome

補足説明
この「Font Awesome」のアイコンはグローバルメニューだけでなく、様々なサイトデザインに応用できるのでお気に入りなどに入れておくことをオススメします。

上記URLに入ると下記のような画面に移ります。

Wordpress グローバル メニュー 表示 されない

入力窓に欲しいアイコンのキーワードを英語で入力します。

日本語で入力してもヒットしないので気をつけましょう。

今回は「Twitter」のアイコンを取得してみます。

Wordpress グローバル メニュー 表示 されない

上記のように入力窓に「Twitter」と入力するとアイコンが出てきます。

無料で使えるアイコンは黒くなっているものだけです。

すると下記のような画面に移ります。

Wordpress グローバル メニュー 表示 されない

この画面でアイコンの大きさなども指定できますがそこのところは割愛します。

赤枠で囲っているところにアイコンの「HTMLコード」があるのでクリックするだけでコピーができます。

メニューの編集画面に戻り、アイコンをつけたいメニュー項目の▼をクリックして開きます。

Wordpress グローバル メニュー 表示 されない

ナビゲーションラベル」に先ほどコピーしたHTMLコードを張り付けましょう。

あとは右側の「メニューを保存」を忘れずにクリックしましょう。

Wordpress グローバル メニュー 表示 されない

上記のようにアイコンが表示されて入ればOKです。

※ 注意説明
下記画像のようにアイコンが表示されないことがあります。

今回僕がやってみたときもこうなりました

Wordpress グローバル メニュー 表示 されない

その場合は「FontAwesomeのサイト」にアクセスをしてメールアドレスを登録すると「CDNコード」というのが発行されて、それをテーマヘッダーに張り付ける作業が必要になります。
外観⇒テーマエディター⇒テーマヘッダー(親テーマ)⇒<head>と</head>の中に取得したCDNコードをコピペ
これで表示されます。

WordPress初心者の方にとっては難しいかもしれませんが、

テーマヘッダーにコードを貼り付ける」という作業はいろんなところで求められる基本的な作業なので、覚えておくと今後便利です。

テーマヘッダーへのコードの貼り方は、また別記事で詳しく解説したいと思います。

WordPressのグローバルメニュー:まとめ

Wordpress グローバル メニュー 表示 されない

では最後に、WordPressグローバルメニューについてまとめるこのようになります。

WordPressグローバルメニューの設定方法まとめ

  1. 「外観」⇒「メニュー」からメニューを作成する
  2. ドラッグ&ドロップで簡単にメニューを編集できる
  3. アイコンをつけたい場合は「FontAwesome」

冒頭でも説明したように、グローバルメニューは読者の為でもあり、検索エンジンの為でもあるので、

どのようなキーワードでグローバルメニューを作るかなども考えて設定していきましょう。

Wordpress グローバル メニュー 表示 されない
『検索エンジンとは』仕組みや最適化の方法を初心者に解説【SEO】

続きを見る

Wordpress グローバル メニュー 表示 されない
『SEO対策とは』ブログ集客の3つの基本|初心者にわかりやすく解説

続きを見る

それでは、よいWordPressライフをお送りください(^^)/

Wordpress グローバル メニュー 表示 されない
【スマホで5分】WordPressブログの始め方【初心者も簡単】

続きを見る

WordPressのメニュー配置は?

複数のメニューの表示位置を管理する 画面左側「外観」の中にある「メニュー」をクリックして下さい。 「メニュー」画面が表示されます。 画面左上の「位置の管理」タブをクリックしてください。 メニューを表示する位置毎に現在どのメニューが表示されるように設定されているのかを確認することができます。

ワードプレスのカスタマイズメニューは?

ダッシュボード>外観>メニューを開きます。 「新規作成」をクリックすると、新しいメニューを作成することが可能です。 固定ページを追加したいときは、追加したいものをチェックし「メニューに追加」ボタンを押しましょう。 カスタムリンクを選んだ場合、好きなサイトのリンクを載せることも可能です。

WordPressのメニュープラグインは?

オススメのWordPressメニュープラグイン.
Max Mega Menu..
Responsive Menu..
WP Responsive Menu..
WP Mobile Menu..
WordPress Mega Menu – QuadMenu..
UberMenu – WordPress Mega Menu Plugin..

WordPressのヘッダーメニューの作り方は?

ヘッダーメニューカスタマイズ方法.
メニューの作成は、管理画面 > 外観 > メニュー から行います。.
ヘッダーメニューの設定は、メニュー作成から メニュー設定 > メニュー位置 (ヘッダーのナビゲーション)にチェックを入れます。.
ヘッダーメニューは、ロゴと並列にするか独立させるか選ぶことができます。.