MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【おかちゃん様】WrodPressで階層のあるカテゴリーをアコーディオン形式で開閉できるようにしたい

質問者:おかちゃん様より、「WrodPressで階層のあるカテゴリーをアコーディオン形式で開閉できるようにしたい」というご質問を頂きました。

wp_list_categories関数の利用+jQueryで行う方法や、プラグインを使う方法があります。

カテゴリのリストをアコーディオンで開閉式にしたい

質問者:おかちゃん様

はじめまして!
Wordpress初心者です。質問させてください。

wp_dropdown_categories にて階層のあるドロップダウンリストを作成したのですが、
これをアコーディオン形式で開閉できるようにしたいです。
↓ イメージです。
例:路線選択

(A)山手線
 ┗(A-1)東京駅
 ┗(A-2)有楽町駅
 ┗(A-3)新橋駅
(B)京浜東北線
 ┗(B-1)東京駅
 ┗(B-2)有楽町駅
 ┗(B-3)新橋駅

(A)をクリックしたら下階層の駅名が開かれて、
他の箇所(B)や再度(A)を選択したら閉じるようなものを実現させたいのですが、
なかなか実現できず、調査も行き詰っています。
ご教授願います。


カテゴリのリストをアコーディオンにする方法

>おかちゃん様
コメントありがとうございます!
wp_dropdown_categoriesは文字通りドロップダウン式でカテゴリを表示させるためのものです。

wp_list_categories関数の利用+jQuery

wp_list_categoriesなど、ul li形式で出力できる関数 + jQueryなどで構築する形の方が良いと思います。

「wp_list_categories アコーディオン」「wp_list_categories 開閉」などで調べた方が良いでしょう。

プラグインの紹介

最初からそのような機能を持ったプラグインもあります。

使った事があるものだと、
Collapsing Categories(排出されるコードはあまりきれいではないです)
https://wordpress.org/plugins/collapsing-categories/
jQuery Categories List Widget(こちらは更新止まってます)
https://ja.wordpress.org/plugins/jquery-categories-list/

デメリットもありますが、ウィジェット形式でも簡単に利用できたり、該当するカテゴリの記事を開いたときに自動でそのカテゴリがハイライトされたりなど、一から実装するとなると頭を悩ませそうな機能も使えたりします。コードも参考になるかもしれませんね。

プラグインを探すコツは
category , categories
+
collapse , jQuery , widget
などでしょうか。

参考になれば幸いです。

おすすめコンテンツ

コメントを残す

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

CAPTCHA