ヘッダーメニューとは?

いろんなサイトを見ていると画像のようなメニューを見ることがあると思います。

初期の状態ではこのヘッダーメニューは表示されていないんですよね。

使い方がわからなくて、ヘッダーメニューを使うのをやめるというのはとてももったいないです。

そこで今回はヘッダーメニューの設置方法について解説したいと思います。

当サイトではヘッダーメニューと呼んでいますが、実は呼び方は統一されてはおらず、ナビゲーションメニューとかグローバルメニューなど名称に違いがありますが、大抵の場合は同じものを指していると思ってください。

このヘッダーメニューは主にページの先頭に表示されていることが多く、ヘッダー画像の下に表示されています。

グローバルメニュー

このように設定しておくことでサイトに訪れた訪問者が最初に目につくアピールポイントとして非常に効果的に誘導が出来るのでぜひとも設定してもらいたいです。

ヘッダーメニューの設定前にやっておくこと

これからヘッダーメニューを作ろうと意気込んで切る所にクギを指すようですが設定する前にリンク先のページは必ず作成しておいてください。
リンク先のページを作成しないままヘッダーメニューを設定しようと思っても存在しないページを設定することは出来ません。
ヘッダーメニューはあくまでリンクだということを覚えておいてください。

ヘッダーメニューの設置方法

ワードプレスの初期設定ではヘッダーメニューは表示されておらず、自分自身で作成をしなければなりません。
なのでやり方がわからない方のために設置方法について説明します。

まずはじめにダッシュボードのサイドメニューにある「外観」→「メニュー」を選択します。

メニュー設定1

 

メニュー画面が表示されたらメニュー名を決めましょう。
今回は解りやすいようにヘッダーメニューと記入します。

メニュー設定2

次に画面右上にある表示オプションのタグをクリックしてください。
そうするとメニューに追加出来る項目が選べるのでヘッダーメニューに入れておきたいものにチェックを入れましょう。

メニュー設定3

 

今回は「固定ページ」「カスタムリンク」「カテゴリー」と詳細メニュー欄の「リンクターゲット」「説明」にチェックを入れます。

ヘッダーメニューにトップページという項目を追加します。
トップページはカスタムリンクでURLを指定して追加する方法が簡単です。

左側にある「カスタムリンク」の右側にある▲をクリックします。
そうすると下の画像のようにカスタムリンクの詳細設定が開きますので、次のように入力しましょう。

URL…トップページのURLアドレスを入力。
URLアドレスがわからなければ画面左上にあるサイトタイトルをクリックすると自身のサイトのトップページに移動するのでURLアドレスをコピーして貼り付けましょう。

リンク文字列…ヘッダーメニュー上で表示させたい文字列を入力。
ここが空白だと機能しないのでURLアドレスと同様に必ず入力しましょう。

③メニューに追加…2項目とも入力したらメニューに追加をクリックしましょう。
これでトップページのカスタムリンクが完成しました。

メニュー設定4

固定ページやカテゴリーの場合はURLの入力は必要なく、追加したい項目にチェックをいれてメニューに追加をクリックすれば簡単に追加することが出来ます。

ドラッグ&ドロップで順番を変更

項目を追加したのはいいけれど、並べ替えたいということもあると思うので並び順の変更方法も解説します。

移動したい項目を動かすにはドラッグ&ドロップで好きな位置に移動することが出来ます。

メニュー設定5

ドラッグ&ドロップで移動すると・・・

メニュー設定6

項目の順番も変わります。

 

また、項目を横に移動することで副項目となり階層を深くすることも出来ます。

メニュー設定7

右に動かすと副項目という表示がされて・・・

メニュー設定8

マウスを乗せると階層を下げて表示させることが出来ます。

 

最後に忘れずに設定しておきたい内容で下の方にメニュー設定という欄があります。
メニューの位置のヘッダーナビゲーションにチェックを入れておきましょう。
ここを忘れてしまうと、せっかくヘッダーメニューを作成しても表示がされなくなりますので、必ずチェックを入れてください。

メニュー設定9

忘れずにチェックを入れておこう

 

これで基本的なヘッダーメニューの設定は完了です。

更に詳しく知りたい方は後日、補足として追記します。

スポンサーリンク
おすすめの記事