WordPress PR

WPのカテゴリー一覧の小カテゴリーを隠してhoverすると表示されるようにする方法

記事内に商品プロモーションを含む場合があります

WordPressのウィジェットにカテゴリー一覧を表示すると小カテゴリも表示されて見にくかったので、親カテゴリだけ残して、hoverすると小カテゴリーが表示されるように変更してみました!

JavaScriptなどを使えば、押したときぬるっと表示なんかもできますが、実装がめんどくさかったのでCSSだけで実装できる形で今回は実装しました。
一瞬で実装できるので、カテゴリー欄を親カテゴリーだけにしたい方は参考になると思います。

WPのカテゴリー一覧の小カテゴリーを隠してhoverすると表示されるようにする方法

今回実装したCSSはこんな感じ!

.widget_categories ul li  a + ul {
	display:none;
}
.widget_categories ul li:hover ul {
	display:block;
}

 

基本的に小カテゴリーは隠しておいて、ホバーされたら表示してねという簡単な感じに実装しました。
多分どんなテーマでも対応可能だと思うので、WPのウィジェットにカテゴリー欄を表示させた際に、小カテゴリーも出て見栄えが悪いという方は参考にしてみてください。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)