注目キーワード
  1. the thor
  2. WordPress
  3. Google
  4. プラグイン

【画像付】WordPressでグローバルメニュー(ナビゲーションメニュー)を設定する方法

こんにちは、テンテンです。

 

今回は、WordPressでグローバルメニューを設定する方法について解説していきます。

 

【グローバルメニュー完成イメージ】

 

グローバルメニューは、さまざまな呼び方があります。「グローバルナビゲーション」、「ナビゲーションメニュー」等と呼ばれますが、ここではグローバルメニューで統一させていただきます。

 

グローバルメニューとは、主にサイトの上部にあるメニューのことを指します。

※テーマによって、グローバルメニューの位置が微妙に異なりますが、作業は基本的には同じです。

 

今回はこちらの設定方法について解説していきます。

 

今回の作業時間:5分〜10分ほど

 

グローバルメニューの設定は、SEOにも関わってくる重要な基礎的な知識となりますので、ブログ初心者の方はしっかり抑えるようにしましょう。

 

では、早速解説に進みます。

 

グローバルメニューにメニューを追加・削除する方法

 

ここでは、グローバルメニューにメニューを追加する方法から削除する方法を解説させていただきます。

 

最も、基礎的かつ重要な部分となりますので、しっかり抑えるようにしておきましょう。

 

グローバルメニューにメニューを追加する方法

 

まず、グローバルメニューの元になるメニューの作成を行っていきましょう。

 

①「外観」→「メニュー」→「新規メニューを作成」に進みましょう。

 

 

②「メニュー名」を入力して、「メニューを作成」に進みます。

 

 

メニュー名については、自分がわかりやすいメニュー名にしましょう!
※ここでは、グローバルメニュー(テスト)にしています。

 

最後に「メニューを作成」をクリックして保存します。

 

保存が完了すると、下記の画面に切り替わります。

 

 

ここで、念の為、赤枠で囲った「メニュー名」が、自分で命名したメニュー名になっているか確認をしましょう!

 

現在、何をしているかと言うと、グローバルメニューを設定する為のメニューを作成し、それを編集しようとしているところです。

※グローバルメニュー(テスト)というメニューを作成し、編集するところです。

 

では、早速、メニュー(グローバルメニュー(テスト)を編集していきます。

 

テーマによって、微妙に異なるのですが、当ブログを使っているテーマ「THE THOR」では、追加できるメニュー項目が大きく4つに別れています。

 

【追加できるメニュー項目の一覧】

・固定ページ→お問い合わせフォームやプライバシポリシーなど

・投稿→記事

・カスタムリンク→用途は様々、主にホーム画面など

・カテゴリー→自分で作成したカテゴリー

 

下記画像の左の赤枠を確認しましょう!

 

今、説明した通り、「固定ページ」、「投稿」、「カスタムリンク」、「カテゴリー」に別れていることが確認できます。

 

①必要なメニュー項目をチェックし、「メニューに追加」をします。

 

 

追加できるメニュー項目の一覧は、左側にありますので、そこから必要なメニュー項目にチェックを入れて、メニューに追加しましょう。

 

メニューが追加されると、右側の赤枠で囲ったようにメニューが追加されます。

※ここでは、適当に「特定商取引方に基づく表記」、「プライバシーポリシー」、「お問い合わせ」を追加しています。

 

②「ヘッダーエリア」にチェックを入れます。

 

 

 

【THE THORのメニュー位置は大きく3つ】

ヘッダーエリア

・フッターエリア

・メニューパネル内エリア(スマホ限定)

 

メニューの位置に関しては、導入しているテーマによって微妙に異なりますが、基本的な作業は同じです。

 

最後に、「メニュー保存」をして、確認してみましょう!

 

 

ちゃんと、グローバルメニューの設定ができていますね!

 

「フッターエリア」にチェックを入れた場合は、このように表記されます!
※ただし、導入しているテーマによって微妙に表記が変わります。

 

 

メニューパネル内エリア(スマホ限定)にチェックを入れた場合は、このように表記されます。

 

 

あくまでスマホ限定なので、PCから確認した場合は表記されません。

 

ちなみにこの設定は、THE THORのオリジナルの設定となりますので、他のテーマを使っている方はできない設定となっております。

 

今回は、テストでグローバルメニューを作成しましたので、固定ページしか使っておりません。

 

他にも、「投稿」や「カスタムリンク」、「カテゴリー」なども追加できますので、自分のお好みに設定しましょう!

 

グローバルメニューを削除する方法

 

次にグローバルメニューの削除方法について解説していきます。

 

①先ほど設定したメニューを開きましょう。

「外観」→「メニュー」→「編集するメニューを選択」

 

 

今回は、テスト用に作成した「特定商取引法に基づく表記」を削除してます。

 

②「▲」をクリックして、「削除」します。

 

これでメニューから削除ができました!簡単ですよね!

 

ここまではグローバルメニューを作成するにおいて、最も基礎的な部分となりますので、しっかり覚えるようにしましょう。

 

次は応用編に移っていきます。

 

グローバルメニューの設定〜応用編〜

 

ここからは主にグローバルメニューを作成するにあたって細かい設定を解説していきます。

 

細かい設定と言っても、とても重要な設定ばかりなので、しっかり覚えるようにしましょう。

 

メニューを並び替えをする方法

 

グローバルメニューを作成するにあたって、メニューの並び順が気になりますよね。メニューの並び替えは、とても簡単です。

 

今回は、「お問い合わせフォーム」の位置を変更します。現在は、メニュー3番目に設置されているのが画像からわかりますよね。

 

①位置を変更したいメニューをドラッグ・アンド・ドロップします。

 

 

ドラック・アンド・ドロップがわからない方は、こちらの記事でわかりやすく解説してくれています。

 

 

これで並べ替えはできましたね!後は、自分のお好みにメニューの順番を変更するだけです。

 

グローバルメニューを階層化する方法

 

次はグローバルメニューを階層化する方法について解説していきます。

【グローバルメニュー階層化のイメージ】

 

結論からお伝えすると、メニューの並び替えと同様に、ドラッグ・アンド・ドロップするだけです。

 

 

上記、画像のように、ドロップダウンさせるだけです。

 

これで、グローバルメニューを階層化できました!念の為、一応確認してみてくださいね。

 

あわせて読みたい記事

こんにちは、テンテンです。   今回は、有料テーマであるTHE THOR(ザ・トール)のグローバルメニューにアイコンを入れる方法について解説します。   【グローバルメニューにアイコンを入れる完成[…]

 

まとめ

 

見やすいサイト設計をするためにも、グローバルメニューの設定は必須といっても過言ではありません。

 

ほとんどのWebサイトが必ずと言っていいほど、グローバルメニューを導入しています。また、グローバルメニューの設定はSEOに関わってくると言われており、とても重要な設定となりますので、しっかり抑えるようにしましょう。

 

僕のように雑ブログを書いている人は、どうしてもカテゴリーが増えてきてしまうので、上手にグローバルメニューを階層化させて、見やすいWebサイトにしていきましょう!

 

あわせて読みたい記事

こんにちは、テンテンです。   今回は、ワードプレスでカテゴリーの設定・削除方法と階層化していく方法について解説していきます。   完成のイメージ図はこちらです。   […]

 

最後まで読んでいただき、ありがとうございました。

最新情報をチェックしよう!