WordPressでhoverすると小カテゴリーが出てくるカテゴリー一覧を実装する

WordPressのウィジェットでカテゴリー一覧は、表示させると親カテゴリと小カテゴリが全て表示されてしまいます。
カテゴリの数が少ない人はいいですが、数が多くなってくると見にくくなりがちです。

今回は親カテゴリーだけを表示して、小カテゴリーは何も表示されないようにし整理します。
マウスでホバーしたときだけ、小カテゴリーを表示させて、整理されたカテゴリ一覧を実装しよう！！

WPでhoverすると小カテゴリーが出てくるカテゴリー一覧を実装する

今回はCSSだけで今回の機能を実装します。
では早速追加するCSSはこちら。

.widget_categories ul li  a + ul {
	display:none;
}
.widget_categories ul li:hover ul {
	display:block;
}

こんな感じ。
小カテゴリーを事前に非表示にし、カテゴリーの親要素がホバーされたとき、小カテゴリーを「display:black」に変更して見えるようにしています。

ウィジェットのカテゴリーを細かく設定されているテーマでなければ、どんなテーマでも実装できると思います。
お手軽にカテゴリーを整理することができるので、カテゴリーが複雑化してしまっている人は、実装してみると良いかもしれません。

 

 

WordPressオリジナルテーマを作れるようになるための記事を制作しています！
随時更新しているので、ぜひ覗いてみてください！！
WordPressオリジナルテーマの作り方！0から作れるようになるまで