【WordPress】カテゴリーの階層を開閉式にする！（カテゴリウィジェットと簡単な CSS で実現）

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

サイドバーが縦に長くなりユーザビリティがよくありません。初期表示では親カテゴリのみ表示し、ホバー（マウスが重なった場合）に子カテゴリを自動開閉する CSS を紹介します。

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

ポイント

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

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

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

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

ポイント

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

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

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

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

カテゴリウィジェットで次の設定をします。

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

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 のカテゴリウィジェットを使って、子カテゴリを開閉する方法です。

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

Enjoy！カテごる！

WordPress のおすすめテーマ

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」！

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

: AFFINGER（アフィンガー）テーマ完全紹介！WordPress 初心者に見てほしい！メリット、デメリットも解説！

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ（読者）を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る