WordPress のカテゴリウィジェットでカテゴリを表示した場合、カテゴリの種類（数）が多いと縦に間延びして表示することになりますが、あまり見目麗しくない（笑）ので、初期表示では親カテゴリのみ表示し、ホバー（マウスが重なった場合）に子カテゴリを自動開閉するように作る方法です。
カテゴリウィジェットと、簡単なCSSで実現します。
ポイント
２階層のカテゴリに対応しています。３階層は、やってないのでどうなるか未知数です（笑）
カテゴリの階層自動開閉の実現イメージ
- マウスが親カテゴリ上をホバーしたタイミングで子カテゴリを表示します
- マウスが親カテゴリ上および子カテゴリ上をホバーしている間は子カテゴリを表示し続けます
- マウスが親カテゴリ上および子カテゴリ上から離れた場合、子カテゴリを非表示にします
ポイント
スマホではマウスホバーがなく、タップ＝クリックとなるため、開閉は綺麗には動きません。
スマホでは、親カテゴリを長押しすることで子カテゴリの一覧を開きます。
（そんな操作はご利用者様は気が付かないと思いますが……）
カテゴリーの階層を開閉式にする方法
step
1カテゴリウィジェットを配置する
WordPress の管理画面から [外観] → [ウィジェット] で、サイドバーなどにカテゴリウィジェットを配置します。
カテゴリウィジェットでは次の設定をします。
| ドロップダウンで表示 | チェックしない |
| 投稿数を表示 | (10) などの記事数を表示したい場合はチェック |
| 階層を表示 | チェックする |
この設定で、カテゴリを表示できますが、子カテゴリは常に表示されている状態となります。
追加CSSを入力する
WordPress の管理画面から [外観] → [カスタマイズ] から [追加CSS} を選択し、次のコード（CSS）を入力します。
.widget_categories ul li {
color: #404040;
border-left: solid 2px #77ffaa;
}
.widget_categories ul li ul li{
color: #404040;
border-left: solid 10px #eeeeff;
}
.widget_categories ul li ul {
display:none;
}
.widget_categories ul li:hover ul {
display:block;
}
配色（#eeeeff など）を適宜変更して、保存（公開）します。
完成です！
まとめ
WordPress のカテゴリウィジェットを使って、子カテゴリを開閉する方法です。
- カテゴリウィジェットを配置する
- CSSで開閉（表示・非表示）するコードと、見た目を整えるコードを追加設定する
簡単なCSSを使うだけでできるのは便利ですね。
Enjoy！カテごる！
WordPress の情報、テクニック一覧はこちらをクリック！
Presented By Irojiro Haraguro .Com
