WordPress

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




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

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



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



ポイント



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




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



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

開閉式にしなければ、タテの高さが 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 のカテゴリウィジェットを使って、子カテゴリを開閉する方法です。



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


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


Enjoy!カテごる!



WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


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

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



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

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

続きを見る






WordPress の情報、テクニック一覧はこちらをクリック!














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




Presented By Irojiro Haraguro .Com