WordPressで開いたページの属するカテゴリだけアコーディオンで開くサイドナビメニューを設置したい。

サイドナビは現在開いている「記事A」の属する「大カテゴリA」のメニューのみ表示(大カテゴリB~Eは非表示)。
子階層は属する「小カテゴリA」のみアコーディオンを開いておくのが完成イメージ。

プラグイン

「Bellows Accordion Menu」をインストール。これでヌルヌル開くアコーディオンのカテゴリメニューを作ることができる。

ウィジェット

WordPressのデフォルトのウィジェットにさっきの「Bellows Accordion」を追加する。
これでカテゴリナビは設置完了👏👏

CSS

開いているページ以外のカテゴリを非表示にする。

現在のページのカテゴリには「current」を含んだclassがつくので、それ以外をdisplay:none;しちゃえばよい。
ので、以下をstyle.cssなどに追加する🙋‍♀️

aside ul.bellows-nav li.bellows-menu-item {
	display: none;
}
aside ul.bellows-nav li.bellows-menu-item.bellows-current-menu-item,
aside ul.bellows-nav li.bellows-menu-item.bellows-current-menu-ancestor,
aside ul.bellows-nav li.bellows-menu-item.bellows-current-menu-item ul.bellows-submenu li,
aside ul.bellows-nav li.bellows-menu-item.bellows-current-menu-ancestor ul.bellows-submenu li {
	display: block;
}

後はサイトに合わせてCSSをカスタマイズすれば完成!!

デフォルトのメニューの場合でも同様に「current」がつくっぽいので、アコーディオンにこだわらない場合はプラグインを使わなくてもよさそう🤔

コメントを残す