WordPressのナビゲーションメニューの作成と設定

URLをコピーしました！

WordPress（ワードプレス）を使用して、WEBサイトやブログのヘッダーやフッターにメニューを設置できるナビゲーションメニューの作成・設定方法を解説します。

ヘッダーやフッターにメニューを表示することで、記事やコンテンツを探しやすくし、ユーザービリティを高めることができます。

しっかりと使い方をマスターしましょう。

ナビゲーションメニューとは

ナビゲーションメニューとは、ヘッダーやフッターなどに記事やコンテンツへの入り口となるメニューを設置することです。

設置できるメニューは、

カテゴリー
投稿記事
固定ページ
カスタムリンク（任意のURL）
タグ

と、幅広くメニューに指定することができます。

当サイトのナビゲーションメニューは、画像のように表示されています。

ヘッダーにはカテゴリー一覧が表示されるように設定し、フッターには固定ページの常時掲載しておく記事へのリンクを表示しています。

ナビゲーションメニューとは、どんなものなのかが分かったところで次に役割をお伝えします。

ナビゲーションメニューの役割

ナビゲーションメニューを使用することで、ユーザーにコンテンツの場所を分かりやすく示すことができます。

ヘッダー部分にメニューがあると、ユーザーの目に止まりやすく、興味があるコンテンツにスムーズにたどり着くことができます。

ナビゲーションメニューに表示するメニューは自由に決められますし、並び替えも自由に変更できます。

WordPressは標準機能で、ヘッダーやフッターにメニューを設定できますので、HTMLやCSSのプログラム知識がなくても簡単に設置することができます。

使用するテンプレートによって、ナビゲーションメニューの設置場所が違うことがありますが、基本的な設定方法は同じです。

ナビゲーションメニューのことが分かったところで、次は作成と設定を行いましょう。

ナビゲーションメニューの作成

メニュー項目を追加する

「外観」⇒「メニュー」をクリックします。
メニュー画面が表示されたら、メニュー名を入力します。
「メニューを作成」をクリックします。

メニュー名は、分かりやすい名前を付けたほうが管理しやすいです。例えば、ヘッダー用メニューとかフッター用メニューとすると分かりやすいです。
ヘッダー用メニューの場合のメニューの位置は「メイン」にチェック、フッター用メニューの場合のメニューの位置は「フッターメニュー」にチェックを入れます。

メニュー項目を追加からメニュー表示するリンクにチェックを入れて「メニューに追加」をクリックします。
「左カラムからメニュー項目を追加してください」という欄にメニューが追加されます。
メニュー設定で、表示するメニューの位置にチェックを入れます。
設定内容がよければ「メニューを保存」をクリックします。

メニュー項目を追加欄の各項目

固定ページ
投稿
カスタムリンク
カテゴリー
タグ

の左側にある「▼」をクリックすると詳細が表示されますので、それぞれの追加方法を個別で見ていきます。

メニューに固定ページを追加する

メニュー項目は「最近」「すべて表示」「検索」の3つのタブから追加できます。

「最近」のタブは、最近の記事しか表示されないため、表示されない記事があります。
「すべて表示」のタブは、固定ページの記事すべてを表示します。
「検索」のタブは、キーワードを入力して特定の記事を検索することができます。

メニューに表示したい固定ページにチェックを入れます。
「メニューに追加」をクリックします。
すると、右側にチェックした固定ページが追加表示されます。
メニュー設定で、表示する位置のメニューにチェックが入っています。
「メニューを保存」をクリックします。

【メニュー設定】
「固定ページを自動追加」にチェックを入れると、固定ページを新規作成し公開すると、自動で設定したナビゲーションメニューに追加表示されます。
「メイン」にチェックを入れると、サイト上部のヘッダー部分にメニューが表示されます。
「フッター」にチェックを入れると、サイト下部のフッター部分にメニューが表示されます。
「ソーシャルリンクメニュー」にチェックを入れると、ヘッダーの下に表示されます。使用するときはTwitterやFacebookなどのSNSへのリンクを追加するときに使います。

メニューに投稿記事を追加する

メニュー項目の追加手順は、固定ページのときと同じです。

④の追加した項目を見ると、固定ページで追加した記事も表示されています。そうです。ナビゲーションメニューには、固定ページ・投稿・カスタムリンク・カテゴリーのリンクを複合して表示することができます

メニューにカスタムリンクを追加する

カスタムリンクでは、WEBサイトやブログのトップページに戻るためのホームメニューの作成や他のサイトへのリンクを作成するときに使用します。

カスタムリンクをクリックすると、URLとリンク文字列の入力が表示されます。
URLに表示したいリンク先のアドレスを入力します。
リンク文字列に表示したい文字を入力します。
「メニューに追加」をクリックします。
右側にカスタムリンクと表示された「ホーム」が表示されます。
メニューの位置にはチェックが入っていますので、そのままにします。
「メニューを保存」をクリックします。

メニューにカテゴリーやタグを追加する

メニューに追加するカテゴリーにチェックを入れます。
「メニューに追加」をクリックします。
右側にカテゴリーと表示された項目が表示されます。
メニューの位置にはチェックが入っていますので、そのままにします。
「メニューを保存」をクリックします。

画像の「メニュー項目を追加」欄に「タグ」が表示されていませんが、非表示設定にしているためです。表示するには下記の「非表示項目を表示する」の手順を参考にして下さい。

メニューを並び替える

ナビゲーションメニューに追加した項目は、ドラッグ＆ドロップで順番を自由に入れ替えることができます。

メニュー位置を設定する

「位置の管理」タブをクリックすると、テーマの位置に指定したメニューを変更できます。指定されたメニュー欄の「▼」をクリックすると変更できるメニューが表示されます。変更ができたら「変更を保存」をクリックします。

すると、指定した通りにメニューが表示されます。

メニューをドロップダウンメニューにする

ドロップダウンメニューとは、ナビゲーションメニューにカーソルを合わせるとサブカテゴリーを表示させる機能です。

ドロップダウンメニューとして表示したいメニューを、階層を一段落下げる形で設定します。すると「副項目」と表示されますので、「メニューを保存」をクリックしてサイトに反映させます。

ナビゲーションメニューで表示するメニューは、「投稿」⇒「カテゴリー」で設定した親カテゴリーや子カテゴリー・孫カテゴリーの設定は反映されません。なので、カテゴリーで指定したサブカテゴリーの枠を超えてメニューを設定し、サイトに表示することができます。
ただし、カテゴリーと違うメニュー表示にするとユーザーが混乱する可能性がありますので、関連性のあるコンテンツでまとめるなどユーザービリティを考える必要があります。