Accordion-Wpプラグインで、楽々アコーディオン作ってみる

ワードプレスのカスタマイズでメニューをアコーディオン形式(メニューを押したらパラって開くやつ)で処理しないといけないってパターンにぶつかってりました。
時代がレスポンシブル対応が当たり前になってからは、こういう条件がつく事って本当に多いですよ、要所は押さえて可変を予め考えてデザイン発想頑張らないとです。

アコーディオンならすぐに思いつくのはJqueryなのだけど、ワードプレス上でJqueryって結構あれやこれやしないと動かないからコード書きだす前から面倒…でもワードプレスならプラグインでいける気がする!って感じで探してみたのがAccordion-Wpってプラグイン。すごく使い勝手がよくて、カスタマイズも簡単な綺麗なアコーディオンがすぐにできてしまうのです。

プラグインの新規追加でAccordion-Wpで検索してプラグインをインストール&有効化

更新もされているし、評価も星6ですね。

プラグインを有効化したら左のメニューに出てくるので、新規追加をクリック。

開いたページの一番上に自分的になんとなく内容が察せる名前を入力して、その下にあるadd new itemってところをクリックします。(最初unlimited for proってとこにびびって、クリックせずに入力場所を探して困ったのは内緒)
そうするとアコーディオンの中にタイトルと表示したい内容を入れる場所が出てきます。

お金を払ったバージョンだと制限なしってことは、フリーで使うには制限があるってことなんでしょうが、ひとまずこのまま使ってみます。add new itemでどんどん項目が追加できます。

さらに嬉しいのは色の設定ができるところ、テンプレートのデザインもいくつかあって簡単にサイトにあった雰囲気のものが作成出来ます。

あとはショートコードタブをクリックして、そこに出力されているショートコードを貼り付ければ出来上がりです。
do ショートコードでの方まで出力してくれるので手軽にphp側に貼り付けできるのもポイント高いですね!
ほんとに至れり尽くせり(;´・ω・)
出来上がりはこんな感じですよ。一行もJquery書かなくて出来とる!
[tcpaccordion id=”237″]

面倒くさがり屋さんのための、素敵プラグインでした!