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

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

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

メニューナビ-1

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

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

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

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

メニューナビ-2

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

メニューナビ-3

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

メニューナビ-4

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

メニューナビ-10

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

メニューナビ-11

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

メニューナビ-5

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

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

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

メニューナビ-6

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

メニューナビ-7

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

メニューナビ-8

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

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

メニューナビ-9

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

メニューナビ-12

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

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

WordPressのナビゲーションメニューの使い方と設定”に13件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    しおん様

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

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

  2. しおん

    しげぞう様

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

  3. しげぞう 投稿作成者

    りた様

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

  4. りた

    しげぞう様

    すみません。メインメニューをチェックするのを忘れていただけでした。
    本当に怒らないでください。

    今度はちゃんと悩んでわからなかったら、コメントします!!!
    ご迷惑おかけし、すみませんでした。

  5. りた

    しげぞう様

    りたです。何度もすみません。現在、TwentyTwelveを有効化してグローバルナビを見たら、反映されていませんでした。
    固定ページでテスト記事を作成すると、グローバルナビに表れるのですが、カスタムリンクで投稿記事のURLを設定するとグローバルナビに反映されません。
    しかし、ホームのカスタムリンクだけは反映されます。この原因がわかっておりません。
    これはTwentyTwelveの仕様でしょうか?

    何度もお願いして申し訳ございませんが
    何卒、宜しくお願い致します。

  6. りた

    連投すみません。

    現在色々弄っていたら、カスタムリンクで既存の記事(私の場合は全てトップページ)をURLで作成してリンク文字列に名前を挿入したら、いい感じになりました笑
    早とちりしてすみません泣

    また何か質問するかもしれませんが
    その時には宜しくお願い致します!

  7. りた

    しげぞう様

    何度も質問している【りた】です。現在、WordPressを立ち上げております。
    しげぞう様の【ドキドメ!】のおかげで、順調に進んでおります!
    しかし、【メニューナビの使い方と設定】で行き詰まりましたので、ご質問させて下さい。

    私は先にセッティング(今回であればグローバルナビの名前設定)してから記事を書こうとしているのですが、その場合にまずナビに必要な固定ページを作成する必要があるのでしょうか?
    といのも、ホームとサンプルページしか存在していないため(私のやり方が間違っているかもしれませんが。。。)メニュー構造に新たな固定ページを追加できない状態です。
    やはり、【メニュー1】という名前に既存の固定ページを挿入してグローバルナビを作成するものなのでしょうか?

    ご回答、宜しくお願い致します。

  8. しげぞう 投稿作成者

    >北様

    コメントありがとうございます。まず1番目の質問でメニューのサブメニュー部分のカスタマイズですが、先日同じような質問を頂き、コメントにて回答しております。この記事のコメント欄にコードも書いてますのでそれを試して見てください。時間のある時に記事にも追記しようと思っております。

    2番目の質問ですが、修正して旧ブログと内容が全く違う物ならリダイレクトの必要はありませんが、大体同じ内容であればリダイレクトはしておいた方がいいと思います。同じような内容の記事があると最初はいいのですが、しばらくしてどちらかの順位が圏外に行く可能性が高いです。おそらく旧ブログが残り、新ブログが飛ばされると思います。

    そのため、内容が大体同じ場合にはリダイレクトしておく事をおすすめしますが、リダイレクトに関しては環境の違いなどもあるため、自己責任でお願いしますという事にしております。どうぞよろしくお願い致します。

  9. ありがとうございました。やり方も分かり、変更もできました。この要領でサイドバーもできるということですね。そこでなんですが、2つほど、質問があります。

    1:メニューに親子関係を作ってみたのですが、子?(マウスを置くと下に出る項目)が白文字で、記事背景も白なので、文字がマウスを置かないと見えない状態です。子?の項目の背景は黒等に変えられるのでしょうか?

    2:お蔭様で1つのブログ(記事数:7つ)だけですが、PVが一日1000いくようになりました。前のブログからの引っ越しの最中で、リダイレクト前の修正中の状態なんですが、前のブログよりもPVが上がりました。これって、リダイレクトしなくてもいいんですか?

    毎度毎度ではありますが、よろしくお願いいたします。

  10. poko 投稿作成者

    >hero様

    返信ありがとうございます。確かに素敵なナビですね。私もスマートフォン用のカスタマイズはしていなかったので勉強になります。ありがとうございます。TwentyTwelveのスマートフォンのメニューの幅を広くしたり背景の色等を変えるのはCSSで変更できそうなのですが、コードが結構複雑でどのコードがどの部分なのか解析してみたいと思います。自分で納得できたら記事にしていきたいと思います。紹介頂いたサイトのようにきれいにできるのか分かりませんが簡単な部分から勉強してみたいと思います。わざわざありがとうございました。

  11. hero

    今スマホから見ています。確かにこのホームページはスマホで見るとナビがアコーディオン式っぽくなってましたね!今気がつきました。
    私はいまVantageというテーマを編集していました。
    そして、アコーディオン式ナビの参考にしたいなと思ったのが、こちらのサイトです↓↓
    http://www.metaslider.com
    いかがでしょうか。とても素敵なナビだと思います。

    後ほどtwenty twelveのテーマでも試してみますが、出来れば上記の参考サイトのようなスマートな雰囲気にしてみたいです。
    いろいろ注文が多くて申し訳ありません。出来ればで良いです。いつか何か方法を解説していただければ幸いです。
    お互いがんばって勉強しましょう。

  12. poko 投稿作成者

    >hero様

    コメントありがとうございます。スマートフォン版のカスタマイズは全く手つかずでしたね。スマートフォン用のナビゲーションもCSSにコードを追加する事である程度カスタマイズできそうです。私もこれから調べてみて記事にできそうなら記事にしてみたいと思います。不勉強ですみません。ちなみに現在TwentyTwelveを使っているとスマートフォンではメニューボタンがあり、クリックするとナビゲーションのメニューがでてくる感じになっていると思いますが、これとはまた違う感じにしたいという事でしょうか?他のサイトで見本のような物があればイメージしやすいので迷惑でなければ参考サイトも教えて頂けると助かります。

  13. hero

    こんにちは。先日別ページでお世話になりました初心者heroです。
    ありがとうございました。

    ナビゲーションのことで質問があります。

    スマートフォンから表示したときに、ナビゲーションがアコーディオン表示(クリックするとメニューが出てくる感じ)にしたいです。(見た目をすっきりさせたいから)
    さまざまなサイトで、コードの紹介をしていますが、説明を読んでも、そのコードをどこにどう貼り付けていいのやら、全くわかりません。

    どのように作業すればよいか、教えていただけないでしょうか。
    もしかしたら、初心者向けの作業ではないのかもしれませんが、お願いいたします。