複数のカスタム分類を開閉表示するアコーディオンメニュー
複数のカスタム分類のタームをサイドバーなどにアコーディオンメニューで表示したいこともあります。たとえば、「ルームタイプ」「家具の種類」というカスタム分類名をクリックすると、その分類に含まれるタームが展開されて一覧表示されるメニューです。
![カスタム分類のアコーディオンメニュー](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-48-19.jpg)
この本では次のようなアコーディオンメニューを使ってサイドバーにカスタム分類のメニューを表示しています。とてもわかりやすい本です。気になる方は、ぜひご一読ください。
![基礎からのWordPressのカスタム分類メニュー](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-53-14.jpg)
この記事では、一般的なテーマを使って同じようなメニューを作りたい方に、JQuery Accordion Menu Widgetプラグインを使ってカスタム分類のアコーディオンメニューを作成する方法を紹介します。
※カスタム分類に限らず、普通のアコーディオンメニューを作成したい方も参考にしてください。
カスタム分類のメニューを作成
まずは、カスタム分類用のカスタムメニューを作成します。カスタム分類名を「親」としてタームを「子」として“階層化”するイメージです。
そのため、「外観」‐「メニュー」メニューで、新たなメニューを作成するためにメニュー名を入力(1)して「メニューを保存」ボタンをクリック(2)します。
![カスタム分類用のメニューを作成](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-10-48-17.jpg)
クリックして開閉させるためのダミーの見出しを追加します。そのため、「リンク」をクリックして(1)、URLに適当な文字を入力して(2)、「メニューに追加」ボタンをクリック(3)します。
※もう少しスマートな方法があるかもしれませんが。。。
![見出し項目を追加](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-10-45-53.jpg)
追加された項目のURLは空にします。これで、クリックされても何もしない(どこにも移動しない)“親”項目になります。
![見出し項目のURLを空に](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-03-12.jpg)
続いて、メニューに追加したいカスタム分類のタームを選択して(1)、「メニューに追加」ボタンをクリック(2)します。
![タームをメニューに追加](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-04-49.jpg)
追加した項目を少し右にドラッグして、“親子関係”に見えるようにしましょう。
![見出しとタームを親子関係に](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-08-16.jpg)
他のカスタム分類も追加して、「メニューを保存」ボタンをクリックしてメニュー構造を完成させます。
![カスタム分類メニューの完成](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-11-32.jpg)
ひとまず、カスタムメニューをテスト表示するため、「外観」‐「ウィジェット」メニューで「カスタムメニュー」をサイドバーエリアにドラッグアンドドロップします。
![カスタムメニューをサイドバーに](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-18-13-500x219.jpg)
※サイドバーが使えないテーマもあります。その場合は、他のウィジェットエリアでも構いません。
表示するメニュー(ここでは「カスタム分類」)を選択して「保存」ボタンをクリックします。
![カスタム分類メニューを選択](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-22-43.jpg)
ユーザー用のサイトを確認表示すると、カスタム分類のタームがメニューとして一覧表示されるはずです。まだアコーディオンではないので、見出し(ルームタイプ、家具の種類)をクリックしても何も起きません。
![カスタム分類(ターム)の一覧表示](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-24-32.jpg)
アコーディオンメニューの作成・表示
「プラグイン」‐「新規追加」メニューからJQuery Accordion Menu Widgetプラグインをインストール、有効化します。
![プラグインのインストール](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-28-46.jpg)
「外観」‐「ウィジェット」メニューから、JQuery Accordion Menuをサイドバーにドラッグアンドドロップします。
![JQuery Accordion Menuをサイドバーに](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-12-09-57.jpg)
※テスト表示に使った「カスタムメニュー」アイテムは削除してください。
表示するメニュー(ここでは「カスタム分類」)を選択(1)し、メニュー開閉のタイミングに「Click」または「Hover」を選択(2)します。
これでアコーディオンメニューは表示されますが、「Skin」(3)で適当なテーマを選んでおくと、より雰囲気が出るでしょう。
![アコーディオンメニューの設定](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-32-41.jpg)
ユーザー用のサイトを確認表示すると、カスタム分類のタームメニューが閉じた状態で表示されます。
![アコーディオンメニューの表示](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-37-20.jpg)
親メニューに設定した見出しをクリックすると展開されます。
![タームメニューの展開](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-39-01.jpg)
もう一度クリックすると閉じます。デフォルトでは、開いたメニューはそのままですが、他の見出しをクリックしたときに自動で閉じたいときは上記の設定で「Auto Close Open Menus」をチェックします。
![クリックした分類は開いたまま(デフォルト)](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-41-57.jpg)
![他のメニューが閉じる設定(Auto Close Open Menus)](http://www.nishi2002.com/wp-content/uploads/2013/11/2013-11-12-11-43-10.jpg)