「WordPressではじめてページを作ってみたけど、メニューが表示されないよ…」
「メニューってどうやって作ればいいんだろう？」
こういった方に向けて、WordPressのメニューについての概要と作り方を解説します！
WordPressにおけるメニューの概要
WordPressのサイトでメニューを作るためには、メニュー専用の設定箇所から設定を行う必要があります。
トップページの設定やページ作成画面から作るわけではないので、設定箇所が分からずに困ってしまっている人もいるのではないでしょうか。
結論から言いますと、管理画面の「外観」→「メニュー」の項目でメニューを作成し、表示させる形となります。
メニューは管理画面の「外観」→「メニュー」から作成する！
まずはWordPressのメニューについてざっくりと概要から見ておきましょう。実際の作成方法は次項のメニューの作り方で解説しますのでお急ぎの方はそちらをご覧ください。
グローバルナビゲーションとは？
Webの世界ではメニューのことをナビゲーションメニュー、特にメインメニューのことはグローバルナビゲーションと呼ばれます。
全ページに共通して表示されることからグローバルの名が付いています。
ホームページやブログでは、用語としてよく出てくるので覚えておきましょう。
テーマによって表示できる箇所に違いがある
WordPressにおけるメニューですが、表示できる場所はテーマによって異なります。
ヘッダー、フッター、サイドメニュー、スマホ用のメニューなど、テーマごとにそれぞれ用意されているので「表示箇所や表示の仕方には違いがあるんだな」ということは押さえておいてください。
また、基本的にデザインもテーマによって変わるので、見た目をどうしても変えたい場合にはCSSでの変更が必要となります。
使い分けが可能
表示できるメニューはひとつだけではなく、複数のメニューを使い分けることができます。
例えばサイトの使いやすさという観点から考えると、あまり重要でないプライバシーポリシーなどのページはフッター（サイト下部）にあったほうがいいですよね。
ヘッダー（サイト上部）のグローバルナビゲーションはメインの導線となるため、コンテンツを網羅するためにメニューを配置するのが理想です。
一方フッターには付加情報などを掲載するメニュー項目を作るなどして使い分けると、ユーザーにとって使いやすいサイトとなります。
メニューの作り方
では、実際にメニューの作り方を解説します。
今回は無料テーマの「Lightning」を使った場合を例として見てみましょう。
最終的にこのようなメニューを完成させたいとします。
リンク先となるページの作成
メニューにリンク先を設定するためには、そもそもそのページが存在しないといけません。
そのため、まずは固定ページや投稿ページを作る必要があります。
固定ページと投稿のどちらでページを作ればいいかが分からない場合は次の記事を参考にしてください▼
ここでは、コーポレートサイトの一般的なページを想定しているので固定ページでページを作ります。
管理画面の「固定ページ」→「新規追加」から作成することができます。
このように必要なページをまずは用意してください。
ラピン公開前の状態なら、ページは作り込んでいない仮のままでOK！
メニュー作成の概要
リンク先のページが用意できたら、メニューの設定を行っていきます。
管理画面の「外観」→「メニュー」へと進んでください。
これからひとつずつ詳しく見ていきますが、設定ページの大まかな見方や考え方を先にお伝えします。
メニューの設定画面の右側にある「メニュー構造」では設定したいメニューを指定し、設定を行います。
メニューに項目を追加したい時には、左側にある「メニュー項目を追加」で設定したいページ等を選択して右側で指定したメニューに追加する形となります。
では実際に作っていきましょう。
メニュー名を決める
初期状態ではメニューの元となるものが存在しません。
まずはその作りたいメニューに名前を付けて、メニューの元を作りましょう。
メニュー構造内の「メニュー名」と書かれた欄に箇所に、ご自身で分かりやすいようにメニューに好きな名前を付けてください。
上図の例では、ヘッダー部分に表示するナビゲーションメニューなので「header_navi」としました。
メニュー名を入力したら右下にある「メニューを作成」をクリックします。
メニューの位置を指定
次にどこにメニューを表示させたいかを指定します。
どの位置に表示できるかはテーマによって異なりますので、お使いのテーマで確認してみましょう。
Lightningでは、「Header Navigation（ヘッダーメニュー）」「Footer Navigation（フッターメニュー）」「Mobile Navigation（スマホ用メニュー）」が用意されていました。
ここでは、ヘッダー（ページ上部）にメニューを表示させたいので、メニュー設定→メニューの位置にある「Header Navigation」にチェックを入れます。
チェックを入れたら忘れずにメニューを保存を押してください。
メニューに項目を追加
作ったメニューに項目を追加してみましょう。
「メニュー項目を追加」の「固定ページ」のところから、あらかじめ作成しておいた追加したいページにチェックを入れて、メニューに追加をクリックします。
すべてにチェックを入れたい場合は、すべて選択にチェックを入れると一括チェックも可能です。
メニュー項目を追加すると上図のように、メニュー構造内に項目が追加されたことが確認できると思います。
この状態でメニューを保存を押せば、設定が適用されてページ内にメニューが表示されるようになります。
基本的なメニューの作り方は以上です。
次項からメニューを設定する上でよく使うパターンを解説します。
メニュー設定の固定ページを自動追加というところにある「このメニューに新しいトップレベルページを自動的に追加」という項目は、チェックを入れると固定ページを作成したときに自動でメニューに項目を追加してくれる設定となります。
メニューを並び替えるには？
次にメニューの項目を並び替える方法です。
前項の例では、ただ項目を追加しただけなので表示の順番がおかしくなっています。
項目を並び替えたい時は、ドラッグ&ドロップで好きな順番に並び替えが可能です。
もしくは各項目の右上の▼マークを開いたところにある「ひとつ下へ」から移動することでもできますが、使いづらいのでドラッグ&ドロップがおすすめ。
記事一覧を設定する
例えばブログやお知らせ記事を書いているなど、メニューから固定ページではなくて記事一覧のページにリンク先を設定したいこともあるでしょう。
この場合にはいくつか方法があります。
表示設定をしている場合
管理画面の設定→表示設定→ホームページの表示という項目があります。
※この設定については【初心者必見】WordPressを一番最初に触る上での注意点とよくある失敗の注意点4でも触れていますが、テーマによって設定すべきかどうか変わるので注意してください。
デフォルトでは「最新の投稿」になっていますが、固定ページで投稿ページを指定している場合は
このように「メニュー項目を追加」→「固定ページ」→「すべて表示」へと進むと、設定した投稿ページが現れるので、これをメニューに追加することで記事一覧ページへとリンクを貼ることができます。
カテゴリーで設定する
カテゴリー設定を行っている場合は、特定カテゴリーの記事一覧にリンクを飛ばすことも可能です。
このようにメニュー項目のカテゴリーに、設定したカテゴリー（今回の例ではブログとお知らせというカテゴリーを設定）があるので、追加したいカテゴリーを選択すればOKです。
カテゴリーは設定しているのに、メニュー項目を追加のところには出ていない…という方がいるかもしれません。
その場合は管理画面上部にある「表示オプション」を確認してみましょう。
表示オプションでは、設定時に表示する項目を変更することができます。
ここのカテゴリー欄にチェックを入れれば表示されるはずです。（タグなども同様）
参考：カテゴリーとタグの違い
カスタムリンクの利用
なんかうまくできない！という時の最終手段として、カスタムリンクの利用があります。
リンク先として指定したいページのURLをコピーしてカスタムリンクで設定しましょう。
やり方は後述する任意のリンク先を指定したいときで解説します。
階層メニューを作りたいとき
下図のようにメニューを階層化したい時にはどうすればいいでしょうか？
俗に言われるドロップダウンメニューやプルダウンメニューというやつです。
メニューを階層化したい場合には、メニューの並び替えと同じ要領で
ドラッグ&ドロップで階層化したい項目を右側にずらして設定を保存します。
また、さらに深い階層化も可能です。
ただし、テーマや表示場所によっては、階層設定を行っても表示されない場合があるので注意してくださいね。
任意のリンク先を指定したいとき
任意のリンク先を指定したい場合には、カスタムリンクを利用します。
メニュー項目を追加のところにある「カスタムリンク」からURLにリンク先のURLを入力し、リンク文字列に表示したい文字を入力してメニューに追加して設定を保存するだけです。
例えば、外部サイトに別のサイトを所有していて、そちらへのリンクを貼る場合などにも使うことができますね。
リンクを新しいタブで開く
カスタムリンクを利用しサイト外のリンク先に遷移してしまうと、自分のサイトから離脱した状態になってしまいます。
そんな時におすすめなのが、リンクを新しいタブで開く設定です。
表示オプションのリンクターゲットにチェックを入れることで
追加したメニュー項目の、追加設定オプションに「リンクを新しいタブで開く」の項目が出てくるので、ここにチェックを入れて設定を保存します。
これで、リンク先のページが新しいタブで開かれるようになります。
メニューに表示する文字を変更する
表示しているメニュー項目の文字列を変更したい場合には、ナビゲーションラベルを変更します。
各項目の右上にある▼を開いたところにある「ナビゲーションラベル」を好きな文字列に変えて保存しましょう。
ラピンちなみに、ナビゲーションラベルを変更してもページタイトルは変更されません！タイトルには影響ない、あくまでメニュー上の表示変更だと覚えておこう！
サブタイトルを付ける
メニューが２行になっていて、英語での表記を併記しているサイトをよく見かけるかと思います。
このサブタイトルを表示するにはどのようにすればよいでしょうか？
この設定はお使いのテーマによって異なり、表示のための機能を実装していない場合もあります。
あくまで、こうしたら表示できる可能性がありますよ！という参考として見てください。
よくある設定方法で可能性が高いのが「タイトル属性」または「説明」の欄です。
メニュー設定ページ上部にある表示オプションの項目を展開し、「詳細メニュー設定を表示」のところにある「タイトル属性」「説明」にチェックが付いていれば
このように、追加設定オプションに設定項目が追加されているはずです。
これらに記載を追加することで、サブタイトルが表示される可能性があります。
なお、Lightningにおいては「説明」に追加することで表示が確認できました。
非対応テーマの場合でどうしても実現したい場合には、ご自身でコードを追加してカスタマイズする必要があります。
別のメニューを追加する
別のメニューを追加したい時は
メニュー設定ページ上部にある「新しいメニューを作成しましょう」から、新規メニューの作成が可能です。
例えば、ヘッダーメニューとは違う項目のフッターメニューを作りたいなど、複数のメニューを活用したい時に使います。
位置の管理
メニューの表示位置は、「位置の管理」というタブから一括で管理することもできます。
とはいえ、既に完成しているメニューの位置指定をする機能なので、普段はあまり使うことはないかもしれません。
ウィジェットを利用してメニューを表示させる方法
メニューが表示できる箇所は、基本的には用意されている位置の指定場所となりますが、ウィジェットを利用することでウィジェットの設定可能箇所にも表示ができます。
ウィジェットに追加できる機能にナビゲーションメニューの項目があるので、これを表示したいウィジェット箇所に追加し、設定を行うことでいろいろなところに表示することができます。
※画像はWordPress5.8で実装されたブロックウィジェットの場合ですが、クラシックでも勝手は同じです。
ウィジェットの利用方法についてはこちら▼
メニューの削除方法
迷うことはないかと思いますが、念のため最後にメニューの削除方法についても触れておきます。
メニュー内の項目を削除するには、項目を右上の▼から展開したところにある削除をクリックすると、削除されます。
メニュー自体を削除したい場合には、ページの下部にある「メニューを削除」を押下します。
このようなポップアップでの確認が表示されるのでOKを押せば完全にメニューが削除されます。