WordPressのナビゲーションメニューの使い方と設定

WordPressブログ

WordPressにはナビゲーションメニューが最初から搭載されています。グローバルナビとも言われますが、今回はこのナビゲーションメニュー部分の使い方を紹介しておきます。ここを上手に活用する事でページビューも変わってくるので結構重要な部分です。

私の場合はこのようにメニューバーを使っています。

メニューナビ-1

この部分には「投稿ページ」でも「固定ページ」でも他のサイトへのリンクも追加する事ができますし、色の変更や文字の大きさ、背景色など自由にカスタマイズもできます。

では早速使い方を解説しましょう。

ナビゲーションの設定方法

最初にWordPressの管理画面から「外観」⇒「メニュー」と進んで下さい。

メニューナビ-2

するとメニューの設定画面になります。初期状態だとこのようになっていると思います。

メニューナビ-3

まずは不要な「サンプルページ」というのを削除してみます。先ほどの画面で「サンプルページ」という項目の右端に小さな「▼」マークがあるのでこれをクリックするとさらにメニューが開きます。開いたら削除をクリック。

メニューナビ-4

これで不要なページが削除されましたがこのままだと反映されません。ここで一度画面の右の「メニューを作成」をクリックして下さい。

メニューナビ-10

するとメニュー設定という項目が開きますので、「メインメニュー」にチェックを入れて「メニューを保存」をクリック。これで反映されます。

メニューナビ-11

次に新しく項目を追加してみましょう。左側の項目に「固定ページ」「リンク」「カテゴリー」という項目があり、それぞれ小さな「▼」マークがあります。

メニューナビ-5

ここからメニューに追加するページを選ぶ事ができます。

  • 固定ページ:固定ページを追加する
  • リンク:特定のページ(投稿)へのリンクを追加する
  • カテゴリー:カテゴリーへのリンクを追加する

この3つから選ぶ事になります。今回は特定のページ(投稿ページ)へのリンクを例にやってみましょう。先ほどの「リンク」と言う項目の右の▼をクリックしてメニューを開きます。

メニューナビ-6

ここにリンク先のURLと表示する「リンクテキスト」を入力します。そして「メニューに追加」をクリックするとメニューに追加する事ができます。このやり方は「固定ページ」でも「カテゴリー」でも同じです。試しに「テスト」という記事をメニューに加えてみました。

メニューナビ-7

追加されたメニューの位置を変更したい場合はドラッグ&ドロップで並びを変更する事もできますし、追加したメニューをさらに編集したい場合は最初と同じように追加した「テスト」という項目の右の小さな「▼」をクリックして細かい修正をする事ができます。

メニューナビ-8

「ナビゲーションラベル」がメニューバーで表示するテキストで「タイトル属性」が説明文のような物です。さて、これが基本的な部分ですが、もう一つ重要な部分として、この追加したメニューに親子関係を決める事ができます。説明するよりも見てもらった方が早いでしょう。

追加したメニューをドラッグ&ドロップで右にずらすと「サブアイテム」と表示されます。

メニューナビ-9

これで「メニューを保存」をクリックすると「ホーム」というメニューの中にこの「テスト」というページが表示されるようになります。つまり「ホーム」という部分にカーソルを合わせるとサブメニューが開き、この「テスト」という項目が表示されます。

メニューナビ-12

と、このようになりますので、メニューを追加していき、必要があればサブアイテムとして追加する事もできます。以上がWordPressのナビゲーションメニューの設定の仕方です。

既にこのナビゲーションの設定している方はカスタマイズにも挑戦して下さい。
WordPressナビゲーションメニューのカスタマイズ

コメント

  1. てつ より:

    お世話になります。
    リロードしたら、キチンと縦表示になりました。
    いつも初歩的な質問ばかりしてお手数をおかけしますが、これからも宜しくお願いします。
    本当にありがとうございました。

  2. しげぞう より:

    てつ様

    返信ありがとうございます。ブログを表示させてリロード(再読み込み)はしてますか?サイトを開き「Ctrl」と「F5」を一緒に押してリロードして確認お願いします。それでも反映されない場合には再度コメント下さい。

  3. てつ より:

    お世話になります。
    @media screen and (min-width: 960px) {
    .main-navigation ul.nav-menu {
    display: table !important;
    table-layout: fixed;
    text-align: center;
    width: 100%;}

    .main-navigation li {
    display: table-cell;
    vertical-align: middle;}
    }を削除しましたが、やはり横方向に表示されました (・_・;)
    どこかミスをしているのでしょうか?

  4. しげぞう より:

    てつ様

    返信ありがとうございます。ナビにサブメニュー(親子関係)を作るのであれば以下の追加されている以下のCSSは削除する必要があります。

    [css]
    @media screen and (min-width: 960px) {
    .main-navigation ul.nav-menu {
    display: table !important;
    table-layout: fixed;
    text-align: center;
    width: 100%;}

    .main-navigation li {
    display: table-cell;
    vertical-align: middle;}
    }
    [/css]
    一旦この部分のCSSを削除して元に戻して縦に並ぶかどうか確認して下さい。

  5. てつ より:

    お世話になっております。
    記事投稿はまだしていませんが、URLは次のとおりです。
    よろしくお願いします。

  6. しげぞう より:

    てつ様

    コメントありがとうございます。メニューの親子関係ですが、通常は多分縦に並びます。ただ、追加しているCSSとかの影響で横並びになる場合があります。そのため、もし良かったらブログのURL教えて下さい。見てみないとちょっとわかりません。

  7. てつ より:

    お世話になっております。
    メニューに親子関係の設定をしました。
    一つのメニューに三つのメニューを入れた親子関係の設定をしました。
    親メニューをクリックすると子メニューが開くのですが、子メニューが横に三つ並んで表示されて二つ目と三つ目が見えないのですが、縦向きに並んで表示することは可能でしょうか?

  8. しげぞう より:

    しおん様

    コメントありがとうございます。固定ページにするか投稿ページにするか?の基準って人それぞれなのですが、私の場合はそのページをカテゴリーに入れる事ができるか?という基準で決めてます。

    これまで色々書いた記事(投稿ページ)はそれぞれカテゴリーに入れていると思いますが、しおん様の作られるナビメニューはどれかのカテゴリーに属すると思うならそのカテゴリーに投稿ページとして作ったら良いと思いますし、どのカテゴリーにも属さない(サイトの全体的なナビ)というのであれば固定ページという感じが良いと思います。あくまで個人的な考えです。

  9. しおん より:

    しげぞう様

    初めての投稿になります。
    サイト作るのが初めてなのですが、
    ナビゲーションメニューをコンテンツで作る場合
    固定ページで作るべきか、投稿ページで作るべきか
    どちらの方がいいのでしょうか?

  10. しげぞう より:

    りた様

    コメント連投ありがとうございます(笑)。全て自分で解決できたようで良かったです。初めてのWordPressは無料ブログとはかなり違うので大変と思いますが、数週間すると慣れると思います、私もそうだったので(笑)また分からない部分がでてきたら遠慮なくコメント下さいませ。

タイトルとURLをコピーしました