WordPress

WordPressでメニューが表示されない?メニューの作り方とカスタマイズ方法

コンパス方位磁針の画像

「WordPressではじめてページを作ってみたけど、メニューが表示されないよ…」

「メニューってどうやって作ればいいんだろう?」

こういった方に向けて、WordPressのメニューについての概要と作り方を解説します!

WordPressにおけるメニューの概要

WordPressのサイトでメニューを作るためには、メニュー専用の設定箇所から設定を行う必要があります。

結論から言いますと、管理画面の「外観」→「メニュー」の項目でメニューを作成し、表示させる形となります。

実際の作成方法は次項のメニューの作り方で解説しますが、まずはWordPressのメニューについてざっくりと概要を見ておきましょう。

グローバルナビゲーションとは?

Webの世界ではメニューのことをナビゲーションメニュー、特にメインメニューのことはグローバルナビゲーションと呼ばれます。

全ページに共通して表示されることからグローバルの名が付いています。

ホームページやブログでは、用語としてよく出てくるので覚えておきましょう。

テーマによって表示できる箇所に違いがある

WordPressにおけるメニューですが、表示できる場所はテーマによって異なります。

ヘッダー、フッター、サイドメニュー、スマホ用のメニューなど、テーマの性質に合わせて用意されているので「表示箇所や表示の仕方には違いがあるんだな」ということは押さえておいてください。

また、基本的にデザインもテーマによって変わるので、見た目をどうしても変えたい場合にはCSSで変更することになります。

使い分けが可能

表示できるメニューはひとつだけではなく、複数のメニューを使い分けることができますよ。

例えば、サイトの使いやすさという観点からあまり重要でないプライバシーポリシーなどのページはフッター(サイト下部)にあったほうがいいですよね。

ヘッダー(サイト上部)にはメインのグローバルナビゲーションとしてコンテンツを網羅するメニューを配置し、フッターには付加情報などを掲載するメニュー項目を作るなどして使い分けると、ユーザーにとって使いやすいサイトとなります。

メニューの作り方

では、実際のメニューの作り方を解説します。

今回は無料テーマの「Lightning」を使った場合を例として見てみましょう。

グローバルナビゲーションの例

最終的にこのようなメニューを完成させたいとします。

リンク先となるページの作成

メニューにリンク先を設定するためには、そもそもそのページが存在しないといけません。

そのため、まずは固定ページ投稿ページを作る必要があります。

固定ページと投稿のどちらでページを作ればいいかが分からない場合は次の記事を読みましょう▼

参考
投稿と固定ページの違いイメージ
WordPressの投稿と固定ページの違いは?使い分けについても解説

続きを見る

ここでは、コーポレートサイトを想定しているので固定ページでページを作ります。

WordPressの固定ページ作成画面

管理画面の「固定ページ」→「新規追加」から作成することができます。

このように必要なページをまずは用意してください。

ラピン
公開前の状態なら、ページは仮のままでOK!

メニュー作成の概要

リンク先のページが用意できたら、メニューの設定を行っていきます。

外観のメニュー

管理画面の「外観」→「メニュー」へと進んでください。

WordPress管理画面のメニュー設定

これからひとつずつ詳しく見ていきますが、設定ページの大まかな見方や考え方を先にお伝えします。

メニューの設定画面の右側にある「メニュー構造」では設定したいメニューを指定し、設定を行います。

メニューに項目を追加したい時には、左側にある「メニュー項目を追加」で設定したいページ等を選択して右側で指定したメニューに追加する形となります。

では実際に作っていきましょう。

メニュー名を決める

初期状態ではメニューの元となるものが存在しません。

まずはその作りたいメニューに名前を付けて、メニューの元を作りましょう。

メニュー名の決定

メニュー構造内の「メニュー名」と書かれた欄に箇所に、ご自身で分かりやすいようにメニューに好きな名前を付けてください。

上図の例では、ヘッダー部分に表示するナビゲーションメニューなので「header_navi」としました。

メニュー名を入力したら右下にある「メニューを作成」をクリックします。

メニューの位置を指定

次にどこにメニューを表示させたいかを指定します。

メニューの表示位置の指定

どの位置に表示できるかはテーマによって異なりますので、お使いのテーマで確認してみましょう。

Lightningでは、「Header Navigation(ヘッダーメニュー)」「Footer Navigation(フッターメニュー)」「Mobile Navigation(スマホ用メニュー)」が用意されていました。

ここでは、ヘッダー(ページ上部)にメニューを表示させたいので、メニュー設定→メニューの位置にある「Header Navigation」にチェックを入れます。

チェックを入れたら忘れずにメニューを保存を押してください。

メニューに項目を追加

作ったメニューに項目を追加してみましょう。

メニュー項目を追加

「メニュー項目を追加」「固定ページ」のところから、あらかじめ作成しておいた追加したいページにチェックを入れて、メニューに追加をクリックします。

すべてにチェックを入れたい場合は、すべて選択にチェックを入れると一括チェックも可能です。

メニューに項目を追加

項目を追加すると上図のように、メニュー構造内に項目が追加されたことが確認できると思います。

この状態でメニューを保存を押せば、設定が適用されてページ内にメニューが表示されるようになります。

ヘッダーメニューの表示

基本的なメニューの作り方は以上です。

次項からその他によく使うパターンを解説します。

 

補足

メニュー設定の固定ページを自動追加というところにある「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れると、固定ページを作成したときに自動でメニューに項目を追加してくれます。

固定ページを自動追加

メニューを並び替えるには?

メニューの項目を並び替える方法です。

前項の例では、ただ項目を追加しただけなので表示の順番がおかしくなっています。

WordPressメニューの並び替え

項目を並び替えたい時は、ドラッグ&ドロップで好きな順番に並び替えが可能です。

ひとつ下へでメニューの移動

もしくは各項目の右上の▼マークを開いたところにある「ひとつ下へ」から移動することでもできます。

ただし使いづらいので利用機会は限られそうです。

記事一覧を設定する

例えばブログやお知らせ記事を書いているなど、メニューから固定ページではなくて記事一覧のページにリンク先を設定したいこともあるかと思います。

この場合にはいくつか方法があります。

表示設定をしている場合

管理画面の設定→表示設定→ホームページの表示という項目があります。

ホームページの表示設定

【初心者必見】WordPressを一番最初に触る上での注意点とよくある失敗の注意点4でも触れています)

デフォルトでは「最新の投稿」になっていますが、固定ページで投稿ページを指定している場合は

メニューに投稿一覧を表示する

このように「メニュー項目を追加」→「固定ページ」→「すべて表示」へと進むと、設定した投稿ページが現れるので、これをメニューに追加することで記事一覧ページへとリンクを貼ることができます。

カテゴリーで設定する

カテゴリー設定を行っている場合は、特定カテゴリーの記事一覧に飛ばすことも可能です。

メニューにカテゴリーの記事一覧を表示

このようにメニュー項目のカテゴリーに、設定したカテゴリー(今回の例ではブログとお知らせというカテゴリーを設定)があるので、追加したいカテゴリーを選択すればOKです。

補足

カテゴリーは設定しているのに、メニュー項目を追加のところには出ていない…という方がいるかもしれません。

その場合は管理画面上部にある「表示オプション」を確認してみましょう。

メニューの表示オプション

表示オプションでは、設定時に表示する項目を変更することができます。

ここのカテゴリー欄にチェックを入れれば表示されるはずです。(タグなども同様)

カテゴリーとタグの違い

カスタムリンクの利用

なんかうまくできない!という時の最終手段として、カスタムリンクの利用があります。

リンク先として指定したいページのURLをコピーしてカスタムリンクで設定しましょう。

やり方は任意のリンク先を指定したいときで後述します。

階層メニューを作りたいとき

下図のようにメニューを階層化したい時にはどうすればいいでしょうか?

階層メニュー

俗に言われるドロップダウンメニュープルダウンメニューというやつです。

メニューを階層化したい場合には、メニューの並び替えと同じ要領で

WordPressメニューの階層化

ドラッグ&ドロップで階層化したい項目を右側にずらして設定を保存します。

また、さらに深い階層化も可能です。

ただし、テーマや表示場所によっては、階層設定を行っても表示されない場合があるので注意してくださいね。

任意のリンク先を指定したいとき

任意のリンク先を指定したい場合には、カスタムリンクを利用します。

WordPressメニューのカスタムリンク設定

メニュー項目を追加のところにある「カスタムリンク」からURLにリンク先のURLを入力し、リンク文字列に表示したい文字を入力してメニューに追加して設定を保存するだけです。

例えば、外部サイトである姉妹サイトを持っていて、そちらへのリンクを貼る場合などに使うことができますね。

メニューに表示する文字を変更する

表示しているメニュー項目の文字列を変更したい場合には、ナビゲーションラベルを変更します。

ナビゲーションラベルの変更

各項目の右上にある▼を開いたところにある「ナビゲーションラベル」を好きな文字列に変えて保存しましょう。

ラピン
ちなみに、ナビゲーションラベルを変更してもページタイトルは変更されません!タイトルには影響ない、あくまでメニュー上の表示変更だと覚えておこう!

サブタイトルを付ける

メニューが2行になっていて、英語での表記を併記しているサイトをよく見かけるかと思います。

グローバルナビゲーションのサブタイトル

このサブタイトルを表示するにはどのようにすればよいでしょうか?

この設定は、お使いのテーマによって異なり、実装していない場合もあります。

あくまで、こうしたら表示できる可能性がありますよ!という参考として見てください。

表示オプションからサブタイトルを設定

よくある設定方法で可能性が高いのが「タイトル属性」または「説明」の欄です。

表示オプションの項目を展開し、「詳細メニュー設定を表示」のところにある「タイトル属性」「説明」にチェックが付いていれば

WordPressメニューのサブタイトル設定

このように、追加設定オプションに設定項目が追加されているはずです。

これらに記載を追加することで、サブタイトルが表示される可能性があります。

なお、Lightningにおいては「説明」に追加することで表示が確認できました。

非対応テーマの場合でどうしても実現したい場合には、ご自身でコードを追加してカスタマイズする必要があります。

リンクを新しいタブで開く

カスタムリンクを利用しサイト外のリンク先に遷移してしまうと、自分のサイトから離脱した状態になってしまいます。

そんな時におすすめなのが、リンクを新しいタブで開く設定です。

リンクターゲットを詳細メニュー設定で表示

表示オプションのリンクターゲットにチェックを入れることで

リンクを新しいタブで開く

追加したメニュー項目の、追加設定オプションに「リンクを新しいタブで開く」の項目が出てくるので、ここにチェックを入れて設定を保存します。

これで、リンク先のページが新しいタブで開かれるようになります。

別のメニューを追加する

別のメニューを追加したい時は

WordPressメニューの新規追加

メニュー設定ページ上部にある「新しいメニューを作成しましょう」から、新規メニューの作成が可能です。

例えば、ヘッダーメニューとは違う項目のフッターメニューを作りたいなど、複数のメニューを活用したい時に使います。

位置の管理

メニューの表示位置は、「位置の管理」というタブから一括で管理することもできます。

WordPressメニューの位置の管理

とはいえ、既に完成しているメニューの位置指定をする機能なので、普段はあまり使うことはないかもしれません。

ウィジェットを利用してメニューを表示させる方法

メニューが表示できる箇所は、基本的には用意されている位置の指定場所となりますが、ウィジェットを利用することでウィジェットの設定可能箇所にも表示ができます。

ウィジェットのナビゲーションメニュー

ウィジェットに追加できる機能にナビゲーションメニューの項目があるので、これを表示したいウィジェット箇所に追加し、設定を行うことでいろいろなところに表示することができます。

※画像はWordPress5.8で実装されたブロックウィジェットの場合ですが、クラシックでも勝手は同じです。

ウィジェットの利用方法についてはこちら▼

参考
積み木を重ねる人形
WordPressのウィジェットとは?作成・追加方法や設定の仕方も解説!

続きを見る

メニューの削除

迷うことはないかと思いますが、最後にメニューの削除方法についても触れておきます。

WordPressメニューの削除方法

メニュー内の項目を削除するには、項目を右上の▼から展開したところにある削除をクリックすると、削除されます。

メニュー自体を削除したい場合には、ページの下部にある「メニューを削除」を押下します。

WordPressメニューの完全削除

このようなポップアップでの確認が表示されるのでOKを押せば完全にメニューが削除されます。

 

-WordPress
-, ,

© 2021 ほむぺじさく!|格安でホームページを自作する方法