ワードプレス マウスオーバーでサブメニューが自動開閉するメニューバー


企業ホームページなどでよく目にする、マウスオーバーで開閉するメニューバーの作成方法は、カテゴリーと固定ページをメニューバーに表示させる方法の応用である。

サブメニューが自動開閉するメニューバーの作成

まず、マウスオーバーで自動開閉させるには、親となるカテゴリーか固定ページと、子となるカテゴリーか固定ページの、最低でも2個以上どちらかを作成する必要がある。

次に、上で作ったカテゴリーか固定ページを、階層をつけてメニューバーに表示する。
カテゴリーの作成方法とメニューバーに表示させる方法はこちらで説明している。
ワードプレス カテゴリーをメニューバーに表示する方法を参照
固定ページの作成方法とメニューバーに表示させる方法はこちらで説明している。
ワードプレス 固定ページをメニューバーに表示する方法を参照

追記:WordPressメニューバーにカテゴリーと固定ページを表示させる方法の記事を追加しました。

親子 属性 階層のつけ方

今回はカテゴリーで説明する。
例えば、メニューに表示させたいテキストを「テスト カテゴリー」とする。
マウスオーバーで表示させるテキストを「テスト①」、「テスト②」とする。
メニューに追加した後に「テスト①」と「テスト②」をドラッグ&ドロップで少しずらす。


こうしてずらすことによって階層ができる。
このとき、さらに階層をつけたい場合はそれぞれに同じ要領でカテゴリーを追加する。
「メニューを保存」を忘れないようにする。

すると、「テストカテゴリー」にマウスを乗せると、「テスト①」と「テスト②」が開き、
「テスト①」にマウスを乗せると、 「テスト①A」と「テスト②B」 が順番に開いていきます。


複数のメニューを作成した場合は表示させるメニューを、外観のテーマからカスタマイズを選択する。
次に、ナビゲーションのPrimary Menuからテストメニューを選択する。