ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレスでメニュー(ナビゲーション)を設定する方法

webサイトにはナビゲーションメニューが欠かせませんよね。ナビゲーションなしだと使いにくいサイトとなってしまうからです。

適正に設置することでユーザーの利便性を高めることができるわけです。

ワードプレスには便利な”メニュー”という機能があり、簡単にナビゲーションが設定できるようになっています。

この記事でわかること

”メニュー”でナビゲーションを設定する基本的な方法を知ることができます。
・メニュー項目を設定する
・メニュー項目の順番の入れ替えと階層化をする
・メニューの設置場所
・メニューの表示オプション(ラベル・キャプション・クラス名付与)

※テーマLightningを使って手順紹介していきますが、ナビゲーション設定の手順はどのテーマでも同じです。

また、今回作成のグローバルナビゲーションは、ウェブチルで開催しているセミナーのデモサイトで使っているものです。

目次

今回ナビゲーションを作成するサイトの構成

以下の構成のサイトのナビゲーションを作成します。

  • トップページ
  • 一階層下の5つの固定ページ(赤)と1つのカスタム投稿タイプ(”新商品情報”)
  • 二階層下の5つの固定ページ(赤)

これらへのナビゲーションを設定します。

サイトマップ

ナビゲーション出来上がりのイメージ

ナビゲーションの出来上がりは以下の通りです。

サイトのヘッダー部に表示されるグローバルナビゲーションを作成します。

作成するナビゲーション

子ページのある項目にマウスオーバーすると子ページへのナビゲーションも表示されます。

ナビへのマウスオーバー

グローバルナビゲーションの作成方法

ワードプレスのメニューを使って作成していきます。手順概要は以下の通りです。

  1. メニュー設定ページを開ける
  2. メニュー名を入力する
  3. メニュー項目の追加をする
  4. メニュー構造の順番と階層を整える
  5. メニューの位置を設定する
  6. オプションを設定する(今回はキャプションをつけます)
  7. メニューを保存する

詳細手順

【手順1】メニュー設定ページを開ける

ダッシュボードメニューから 外観>メニュー と進めます。

【手順2】メニュー名を入力する

①メニュー名を入力
②”メニューを作成”をクリック

メニュー_g_navを入力作成

メニュー名は何でもよいですが、今回は“g_nav”という名前としました。

【手順3】メニュー項目の追加をする

画面左側の“メニュー項目を追加”で、ナビゲーションに入れる項目を選択します。
①固定ページを開ける
②追加したい項目にチェックを入れる(今回は”すべて選択”をクリック)
③”メニューに追加”をクリック

メニュー項目を追加

上記手順は固定ページからの項目追加ですが、ほかにも次の項目が可能です。

  • 固定ページ・・・サイト内の固定ページから選択する
  • 投稿・・・サイト内の投稿の中から選択する
  • カスタム投稿・・・サイト内にカスタム投稿タイプがあれば選択できる
  • カスタムリンク・・・URLを直接入力する(外部サイトのURLでもOK)
  • カテゴリー・・・サイト内のカテゴリーから選択する

今回は、カスタム投稿タイプの”新商品情報”も同様の手順でメニュー項目に追加しておきます。

【手順4】メニュー構造の順番と階層を整える

画面右のg_navというメニューの中に項目が並びました。
これをマウスのドラッグ&ドロップで動かして順番と階層を整えます。

階層は少し右へずらすとその上の項目の子メニューとなります。
(例えば、”Sweets Time特徴”の下の”こだわり食材”と”こだわり調理法”は少し右にあるので子メニュー)

メニュー構造を整える

【手順5】メニューの位置を設定する

並んだメニュー項目の下の”メニューの位置”でナビゲーションを表示する場所を指定します。

今回は”Header Mavigation”にチェックを入れます。

メニュー位置設定

※設定できるメニューの位置は使用しているテーマによって異なります。
最低限ヘッダーとフッターの2つは設定できます。
また、ウィジェット”ナビゲーションメニュー”からサイドバーなどにも設置可能です。

【手順6】オプションを設定する

メニュー項目ごとにオプションとして詳細設定ができるようになっています。
(テーマによって設定可否は異なります)

今回はメニューにキャプション(説明)をつけます。
①設定するオプションを画面上の”オプション”を開ける
②”説明”にチェックを入れる

メニュー項目ごとにキャプションをつけていきます。
①メニュー項目右の▲をクリック
②説明欄にキャプションを入力する

メニュー詳細設定

このほか、よく使うメニューの詳細設定を紹介しておきます。

ナビゲーションラベル

メニュー名は、

”固定ページや投稿のタイトル”=ナビゲーションラベル

となっていますがこのままだと長すぎる場合があります。

ナビゲーションラベルに入力することで別のラベル名に変更することができます。

CSSクラス

オプションとしてCSSクラスにチェック入れておくと、メニュー項目ごとにCSSクラスをつけてカスタムCSSを適用できるようになります。

メニューの頭にアイコンをつけるなど、装飾を変えたりするのに重宝します。

【手順7】メニューを保存する

最後に画面右下で”メニューを保存”をして、グローバルナビゲーションの設定は終了です。

web表示させたグローバルナビゲーションは、次のようにナビゲーションラベルの下にキャプションが表示される仕様となっています(※テーマによっては表示されません)。

表示されたナビゲーション

まとめ

ワードプレスの”メニュー”を使って、ナビゲーションを設定する方法を解説してきました。

1つのサイトの中に複数設定することが可能
(手順2でメニュー名を別のモノで設定します)

設置場所はヘッダー以外にも可能
(手順5で設置場所を選択、またはウィジェット”ナビゲーションメニュー”でサイトバーなどにも可能)

ナビゲーションラベルの変更やキャプションをつけることができる

クラス名を付与してカスタムCSSを適用できる

適正なナビゲーションを設置して、あなたのサイトのユーザービリティを高めていきましょう。

メニュー以外にワードプレスの使い方は以下の記事がおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる