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

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

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


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

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

質問者:おかちゃん様

はじめまして!
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
などでしょうか。

参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。