グローバルメニューを階層化する

この記事ではグローバルメニューを階層化する方法を解説します。

下記の画像はグローバルメニュー(ヘッダーエリア)を階層化(親子関係)にした事例です。
何も操作しない状態では子階層の「テスト2」は表示されませんが、下記の画像では親階層の「テスト1」にマウスオーバーしたため、子階層の「テスト2」が表示されています。

 

グローバルメニューを階層化する方法

今回の事例ではヘッダーエリアのグローバルメニューに固定ページを表示し階層化したケースでご説明します。

外観→メニューへ進む

外観→メニューへ進みます。

この時点では「テスト1」「テスト2」という2つの固定ページは並列に並んでおり、まだ階層化されていません。

 

 

Name

上記のように並列に設定されている場合のサイト上の表示は下記の画像のような表示なります。

この状態では「サイト1」「サイト2」という固定ページ2つが並列に並び階層化はされていません。

グローバルメニューが並列表示されている事例

下記の画像では「テスト1」「テスト2」という固定ページが階層化されておらず、並列に表示されています。

 

 

 

「固定ページ」右側の▼をクリック

今回の事例では「テスト1」という固定ページを親、「テスト2」という固定ページを子として階層化した事例で解説しますので、子に設定したい「テスト2」の右側の▼をクリックします。

 

 

Name
下記画像のように「テスト2」の下に新たにメニューが表示されますので「テスト1下の階層」をクリックし「メニューを保存」を押してください。

 

Name
これで下記画像のように「テスト1」の下に「テスト2」が表示され階層化(親子関係)になりました。

グローバルメニュー(ヘッダー部)が階層化された事例

実際のサイト表示を確認すると、下記画像のように「テスト1」が親ページ、その子ページに「テスト2」という親子関係の階層化されたグローバルメニューが完成しました。

トールではグローバルメニューの階層化は親子までとなっています。WordPressの仕様上「メニュー構造」では孫まで階層化できてしまいますが、サイト上には孫は反映しませんのでご注意ください。