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

2025年3月27日

広告：ページ内にてアフィリエイト広告を利用しています。

WordPress のカテゴリーウィジェットでカテゴリーを表示した場合、カテゴリーの種類（数）が多いと縦に間延びして表示することになります。サイドバーが縦に長くなりユーザビリティがよくありません。

ポイント

本記事では、

初期表示では親カテゴリーのみ表示し、ホバー（マウスが重なった場合）に子カテゴリーを自動開閉する CSS を紹介します。カテゴリーウィジェットと、簡単な CSS で実現します。２階層のカテゴリーに対応しています。３階層は対応していません。

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

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

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

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

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

ポイント

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

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

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

STEP

カテゴリーウィジェットを配置する

WordPress の管理画面から「外観」 → 「ウィジェット」で、サイドバーにカテゴリーウィジェットを配置します。カテゴリウィジェットで次の設定をします。

項目	設定
ドロップダウンで表示	チェックしない
投稿数を表示	(10) などの記事数を表示したい場合はチェック
階層を表示	チェックする

本設定でカテゴリーを表示できます。この時点では、子カテゴリーは常に表示されている状態となります。（カテゴリー数分、縦長に表示されます）

STEP

追加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 など）は適宜変更して、保存（公開）してください。

完成です。