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

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

完成です。

WordPress のお役立ちテクニックはこちら

まとめ

WordPress のカテゴリーウィジェットを使って、子カテゴリーを開閉する方法です。

ポイント

カテゴリーウィジェットを配置する
CSSで開閉（表示・非表示）するコードと、見た目を整えるコードを追加設定する

簡単な CSS を使うだけでできるのは便利ですね。

Enjoy！カテごる！

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る