初級者向け 基本

【基本】WordPressのメニュー(ナビゲーション)の作り方教えて!

WordPressの知識
この記事は約5分で読めます。

文中の説明画像をクリックすると拡大します。

Pocket

サイト構築に欠かせないメニュー作り

Webサイトの基本要素として、各ページへ誘導するために、画面上部にヘッダーナビ、画面下部にフッターナビ等のナビゲーション(メニュー)をつけることが一般的です。

閲覧者の知りたい情報、行きたいページにアクセスしてもらうためのものです。

そこで、WordPress管理画面からメニューを作成する方法を説明します。

テーマによって多少の違いはありますが、大筋は同じ方法でメニューを作成できます。ここでは無料テーマ「Simplicity2」で説明します。

グローバルナビ(ヘッダーナビ)とは

グローバルナビ(ヘッダーナビ)とは、サイトを表示した際に画面上部にあるメニューの事です。基本的に全ページに表示されます。

ここには、全てのページを載せるのではなく(そもそもスペースに入りきれません)、特に強調したいページやカテゴリー、誘導したいページやカテゴリー、あるいは、全ページで表示したいページやカテゴリーを載せることになると思います。

ただ、決まったルールがあるわけではないので、作成者が判断してページやカテゴリーを載せていきます。

フッターナビ

フッターにあるメニューです。

ヘッダーメニューなど、他のメニューに載せていないページをここに載せることもありますし、グローバルナビと同様に全ページで見てほしいページやカテゴリーを載せることもあります。

プライバシーポリシーやサイトマップは、グローバルナビに載せずフッターナビに載せるケースを、よく見かけます。

グローバルナビ(ヘッダーナビ)の作り方

グローバルナビ(ヘッダーナビ)、フッターナビとも、ダッシュボード > 「外観」 > 「メニュー」の画面から作成します。

  1. 最初は何も設定されていないので、メニュー名(例:ヘッダーナビ)を入力して、「メニューを作成」ボタンをクリックします。
  2. ヘッダーナビの作成ですので、「メニューの位置」の「ヘッダーナビ」にチェックを入れます。
  3. 画面左側に「固定ページ」「投稿」「カスタムリンク」「カテゴリ」の表示があり、それぞれの詳細を開くことができます。メニューに登録したい項目にチェックを入れ、「メニューに追加」をクリックします。
  4. この時点でメニューを保存して、サイトを表示してみましょう。ヘッダーナビが表示されています。
  5. ヘッダーナビの「Sample Page」をクリックすると、指定された固定ページが表示されます。
  6. メニュー設定画面に戻ります。投稿された記事があれば、これもメニューに登録できます。
  7. カスタムリンクでは希望のURLへのリンクを設定できます。下図ではYahoo!JAPANへのリンクをメニューに追加しています。
  8. 改めてメニューを保存してサイトを表示してみましょう。下図のようにヘッダーナビに4項目が表示されています。
  9. なお、ヘッダーナビではメニューを階層化(サブメニューの作成)ができます。「Hello world!」と「Yahoo!JAPAN」を右にドラッグしてみましょう。一段右にずれて表示され「副項目」と表示されます。
  10. この状態でメニューを保存し、サイトを表示してみましょう。「Sample Page」の下にマウスをもっていくと、ドロップダウンメニューとして「Hello!world」と「Yahoo!JAPAN」が表示されるようになります。

フッターナビの作り方

フッターナビの作り方は、ヘッダーナビの作り方と基本的に同じです。

大きな違いはメニューを階層化すること、つまりサブメニューの作成ができない点です。実際にフッターナビを作成してみましょう。

  1. ダッシュボード > 外観 > メニューの画面を表示します。「メニュー名(例:フッターナビ)」を入力して、「メニューの作成」をクリックします。
  2. 画面左側の「固定ページ」「投稿」「カスタムリンク」「カテゴリ-」からメニューを追加する手順はヘッダーナビと同じです。「メニューの位置  > フッターナビ(サブメニュー不可)」にチェックを入れます。
  3. メニューを保存して、サイトを表示してみましょう。画面下部にフッターメニューが表示されました。

メニューを作成する別の方法

ダッシュボード > 「外観」 > 「カスタマイズ」からもメニューが作成できます。

  1. カスタマイズ画面の左のリストより「メニュー」を選択します。


  2. メニューを新規作成」をクリックします。
  3. メニュー名」を入力し、「ヘッダーナビ」もしくは「フッターナビ(サブメニュー不可)」にチェックを入れます。ここでは「ヘッダーナビ」にチェックを入れて、「次へ」をクリックします。
  4. 「項目を追加」をクリックすると「カスタムリンク」「固定ページ」「投稿」「カテゴリー」「タグ」が表示され、
    各々の詳細よりメニュー項目を追加できます。

  5. 画面左上の「公開」ボタンをクリックしてサイトを表示すると、ヘッダーメニューが追加されています。

テーマによって編集できるメニューの種類に違いがある

今回の説明で用いた「Simplicity2」では、「グローバルナビ(ヘッダーナビ)」と「フッターナビ」の2つが設定できます。

テーマによっては、設定できるメニューが追加されています。下図は「ELEPHANT3」の例ですが、「スマホナビ(スマホだけに表示されるメニュー)」、及び「左メニュー(クリックによって画面左側に開くメニュー)」が追加されています。テーマの特長の1つと言えます。

なお、メニューをウィジェットにいれて使う方法、またサイドバーに表示させる方法は、こちらをご覧ください。

【基本】WordPressのメニューとウィジェットの関係がわからない
WordPressには、カスタムメニュー(メニュー)とウィジェットという2つの機能があります。メニューはWebサイトの各所にあるメニューを作るための機能で、ウィジェットはWebサイトを構築しているちょっとした部品を提供する機能です。

 

まとめ

  • サイトの基本レイアウトとして、画面上部にグローバルナビ(ヘッダーナビ)、画面下部にフッターナビを作成することが多い。
  • 「ダッシュボード > 外観 > メニュー」、「ダッシュボード > 外観 > カスタマイズ」からメニューを作成できる。
  • テーマによって、使用できるカスタムメニュー(メニュー)は違う。
Pocket