WordPressで階層化されたカテゴリーを開閉式で表示！簡単CSSで実現

2024年6月8日

WordPress のカテゴリーウィジェットでカテゴリーを表示した場合、カテゴリーの種類（数）が多いと縦に間延びして表示することになります。

サイドバーが縦に長くなりユーザビリティがよくありません。

ポイント

本記事では、

初期表示では親カテゴリーのみ表示し、ホバー（マウスが重なった場合）に

子カテゴリーを自動開閉する CSS を紹介します。

カテゴリーウィジェットと、簡単な CSS で実現します。

２階層のカテゴリーに対応しています。３階層は対応していません。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 カテゴリーの階層自動開閉の実現イメージ
2 カテゴリーの階層を開閉式にする方法
3 追加CSSを入力する
4 まとめ

カテゴリーの階層自動開閉の実現イメージ

実際にカテゴリーを開閉式にしたイメージです。

開閉式にしなければ、タテの高さが 10倍ぐらいになりますが、開閉式にしたので親カテゴリーの数の縦の高さで表示しています。

マウスが親カテゴリー上をホバーしたタイミングで子カテゴリーを表示します
マウスが親カテゴリー上および子カテゴリ上をホバーしている間は子カテゴリーを表示し続けます
マウスが親カテゴリー上および子カテゴリ上から離れた場合、子カテゴリーを非表示にします

ポイント

スマホではマウスホバーがなく、タップ＝クリックとなりますので、開閉は若干難しい操作になります。

※　スマホでは、親カテゴリーを長押しすることで子カテゴリーの一覧を開きます。

カテゴリーの階層を開閉式にする方法

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;
}

「widget_categories 」がカテゴリーのクラスです。「ul」「li」タグに対して、マウスオーバーの有無で表示非表示を切り替えています。

配色（#eeeeff など）は適宜変更して、保存（公開）してください。

完成です。