WordPress

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

投稿日:

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

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

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

スポンサーリンク

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

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

設置できるメニューは、

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

メニュー項目を追加する

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

メニュー名は、分かりやすい名前を付けたほうが管理しやすいです。例えば、ヘッダー用メニューとかフッター用メニューとすると分かりやすいです。

ヘッダー用メニューの場合のメニューの位置は「メイン」にチェック、フッター用メニューの場合のメニューの位置は「フッターメニュー」にチェックを入れます。

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

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

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

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

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

  • メニュー項目は「最近」「すべて表示」「検索」の3つのタブから追加できます。
  • 「最近」のタブは、最近の記事しか表示されないため、表示されない記事があります。
  • 「すべて表示」のタブは、固定ページの記事すべてを表示します。
  • 「検索」のタブは、キーワードを入力して特定の記事を検索することができます。
  • メニューに表示したい固定ページにチェックを入れます。
  • 「メニューに追加」をクリックします。
  • すると、右側にチェックした固定ページが追加表示されます。
  • メニュー設定で、表示する位置のメニューにチェックが入っています。
  • 「メニューを保存」をクリックします。

【メニュー設定】

固定ページを自動追加」にチェックを入れると、固定ページを新規作成し公開すると、自動で設定したナビゲーションメニューに追加表示されます。

メイン」にチェックを入れると、サイト上部のヘッダー部分にメニューが表示されます。

フッター」にチェックを入れると、サイト下部のフッター部分にメニューが表示されます。

ソーシャルリンクメニュー」にチェックを入れると、ヘッダーの下に表示されます。使用するときはTwitterやFacebookなどのSNSへのリンクを追加するときに使います。

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

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

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

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

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

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

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

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

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

メニューを並び替える

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

メニュー位置を設定する

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

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

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

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

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

ナビゲーションメニューで表示するメニューは、「投稿」⇒「カテゴリー」で設定した親カテゴリーや子カテゴリー・孫カテゴリーの設定は反映されません。なので、カテゴリーで指定したサブカテゴリーの枠を超えてメニューを設定し、サイトに表示することができます。

ただし、カテゴリーと違うメニュー表示にするとユーザーが混乱する可能性がありますので、関連性のあるコンテンツでまとめるなどユーザービリティを考える必要があります。

メニュー項目を削除する

メニュー項目で追加した項目を削除する方法です。

  • 削除したいメニュー項目の「▼」をクリックします。
  • 「削除」をクリックします。
  • メニュー項目が削除されたことを確認し「メニューを保存」をクリックします。

メニューに追加したコンテンツを削除する

  • 編集するメニューを選択で削除するナビゲーションメニューを選びます。
  • 選んだら「選択」をクリックします。
  • メニュー構造の一番下に表示されている「メニューを削除」をクリックします。

「メニューを削除」をクリックするだけで、ナビゲーションメニューが削除されます。

新しいメニューを追加する

「外観」⇒「メニュー」からメニュー画面を表示します。新しいナビゲーションメニューを追加するときは「新しいメニューを作成しましょう」をクリックします。

その後は「メニュー項目を追加する」の手順で作成していきます。

非表示項目を表示する

画像の「メニュー項目を追加」には「タグ」が表示されていません。タグを非表示にしている状態なので、表示させます。

  • 画面右上にある「表示オプション」をクリックします。

  • ボックスの「タグ」にチェックを入れます。
  • すると、タグの項目が表示されます。

まとめ

WordPressを使用したWEBサイトで、ナビゲーションメニューを設定する方法を紹介しました。

ナビゲーションメニューは、使用するテンプレートやテーマによって設定できる項目に違いがありますが、使い方や手順は同じです。

ヘッダーとフッターに適切なメニューを設置することで、サイト訪問者がコンテンツを見つけやすくなり、複数のコンテンツを見てもらえる機会を作ることができます。

手順を確認して、WEBサイトやブログにメニューを作り、ユーザービリティを高めましょう。

  • この記事を書いた人
栗山

栗山

独立系大手SIベンダーで勤務していた経験を活かし、初心者がWEBサイトを立ち上げ・作成・運営していくための情報、パソコンやスマホ(Android・iPhone)などに関する情報を分かりやすく伝えます。

-WordPress

Copyright© @Gee Base , 2019 All Rights Reserved.