WordPress個別サポート

複数のカスタム分類のタームをサイドバーなどにアコーディオンメニューで表示したいこともあります。たとえば、「ルームタイプ」「家具の種類」というカスタム分類名をクリックすると、その分類に含まれるタームが展開されて一覧表示されるメニューです。

カスタム分類のアコーディオンメニュー

カスタム分類のアコーディオンメニュー

このメニュー構成は基礎からのWordPressという本で作成する内容です。

この本では次のようなアコーディオンメニューを使ってサイドバーにカスタム分類のメニューを表示しています。とてもわかりやすい本です。気になる方は、ぜひご一読ください。

基礎からのWordPressのカスタム分類メニュー

「基礎からのWordPress」のカスタム分類メニュー

この記事では、一般的なテーマを使って同じようなメニューを作りたい方に、JQuery Accordion Menu Widgetプラグインを使ってカスタム分類のアコーディオンメニューを作成する方法を紹介します。

※カスタム分類に限らず、普通のアコーディオンメニューを作成したい方も参考にしてください。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

カスタム分類のメニューを作成

まずは、カスタム分類用のカスタムメニューを作成します。カスタム分類名を「親」としてタームを「子」として“階層化”するイメージです。

そのため、「外観」‐「メニュー」メニューで、新たなメニューを作成するためにメニュー名を入力(1)して「メニューを保存」ボタンをクリック(2)します。

カスタム分類用のメニューを作成

カスタム分類用のメニューを作成

クリックして開閉させるためのダミーの見出しを追加します。そのため、「リンク」をクリックして(1)、URLに適当な文字を入力して(2)、「メニューに追加」ボタンをクリック(3)します。

※もう少しスマートな方法があるかもしれませんが。。。

見出し項目を追加

見出し項目を追加

追加された項目のURLは空にします。これで、クリックされても何もしない(どこにも移動しない)“親”項目になります。

見出し項目のURLを空に

見出し項目のURLを空に

続いて、メニューに追加したいカスタム分類のタームを選択して(1)、「メニューに追加」ボタンをクリック(2)します。

タームをメニューに追加

タームをメニューに追加

追加した項目を少し右にドラッグして、“親子関係”に見えるようにしましょう。

見出しとタームを親子関係に

見出しとタームを親子関係に

他のカスタム分類も追加して、「メニューを保存」ボタンをクリックしてメニュー構造を完成させます。

カスタム分類メニューの完成

カスタム分類メニューの完成

ひとまず、カスタムメニューをテスト表示するため、「外観」‐「ウィジェット」メニューで「カスタムメニュー」をサイドバーエリアにドラッグアンドドロップします。

カスタムメニューをサイドバーに

カスタムメニューをサイドバーに

※サイドバーが使えないテーマもあります。その場合は、他のウィジェットエリアでも構いません。

表示するメニュー(ここでは「カスタム分類」)を選択して「保存」ボタンをクリックします。

カスタム分類メニューを選択

カスタム分類メニューを選択

ユーザー用のサイトを確認表示すると、カスタム分類のタームがメニューとして一覧表示されるはずです。まだアコーディオンではないので、見出し(ルームタイプ、家具の種類)をクリックしても何も起きません。

カスタム分類(ターム)の一覧表示

カスタム分類(ターム)の一覧表示

アコーディオンメニューの作成・表示

「プラグイン」‐「新規追加」メニューからJQuery Accordion Menu Widgetプラグインをインストール、有効化します。

プラグインのインストール

プラグインのインストール

「外観」‐「ウィジェット」メニューから、JQuery Accordion Menuをサイドバーにドラッグアンドドロップします。

JQuery Accordion Menuをサイドバーに

JQuery Accordion Menuをサイドバーに

※テスト表示に使った「カスタムメニュー」アイテムは削除してください。

表示するメニュー(ここでは「カスタム分類」)を選択(1)し、メニュー開閉のタイミングに「Click」または「Hover」を選択(2)します。

これでアコーディオンメニューは表示されますが、「Skin」(3)で適当なテーマを選んでおくと、より雰囲気が出るでしょう。

アコーディオンメニューの設定

アコーディオンメニューの設定

ユーザー用のサイトを確認表示すると、カスタム分類のタームメニューが閉じた状態で表示されます。

アコーディオンメニューの表示

アコーディオンメニューの表示

親メニューに設定した見出しをクリックすると展開されます。

タームメニューの展開

タームメニューの展開

もう一度クリックすると閉じます。デフォルトでは、開いたメニューはそのままですが、他の見出しをクリックしたときに自動で閉じたいときは上記の設定で「Auto Close Open Menus」をチェックします。

クリックした分類は開いたまま(デフォルト)

クリックした分類は開いたまま(デフォルト)

他のメニューが閉じる設定(Auto Close Open Menus)

他のメニューが閉じる設定(Auto Close Open Menus)

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート