WordPress

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





WordPress のカテゴリウィジェットでカテゴリを表示した場合、カテゴリの種類(数)が多いと縦に間延びして表示することになりますが、あまり見目麗しくない(笑)ので、初期表示では親カテゴリのみ表示し、ホバー(マウスが重なった場合)に子カテゴリを自動開閉するように作る方法です。


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


ポイント

2階層のカテゴリに対応しています。3階層は、やってないのでどうなるか未知数です(笑)


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



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

ポイント

スマホではマウスホバーがなく、タップ=クリックとなるため、開閉は綺麗には動きません。

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

(そんな操作はご利用者様は気が付かないと思いますが……)


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


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!カテごる!








Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ