WordPress アコーディオンメニュー


ワードプレスのページ上部には、ホリゾンタルメニューがあります。


サイドバーにもたくさんのメニューが並ぶという事がよくあります。



ワードプレスに限らず、サイドバーのメニューの折りたたみなどというテーマは、古今東西のさまざまなCMSやblog ツールで語られてきました。



関連性の強い、例えば同じカテゴリに属するエントリーをサイドバーに表示したい、だとか子ページを表示したいといったニーズもブログを作っている人たちの間では、繰り替えされ続ける質問のようです。




ちょっとした工夫で、アコーディオン風のメニューを作る事が出来るアイディアについて、メモを残します。



jQueryを使って、2行書けば終わりの簡単なものです。

リンク先の jQueryのコードは、実際にはこのようになっています。

jQuery(".page_item").has(".children").children("a").siblings('ul').hide();
			<?php if(isset($_GET['page_id'])){ $my_id = (int) $_GET['page_id'];?>
			jQuery(".page-item-<?php echo $my_id;?>").children().show("slow");
			<?php }?>

1階層しか対応していません IDの取得はいろんな方法で出来ると思いますので、そのあたりは、それぞれに
jQueryの使い方も?ですが、、、



関連する何かを表示しようとすると、サーバサイドでクエリを使って、リストを表示するというやり方が多く行われてきたと思いますが、ちょっとした事ならjQueryを使って表示コントロールする道もあり、body_class や post_classが採用されて以降、CSSjQueryの工夫で、表示コントロールが可能になってきていると、私は感じています