基本情報一問一答でWordpressの記事内にトグルボタンをつけて、回答を表示、非表示にする機能を追加しようということで、
jQueryでコードを書こうと思いました。しかし、そこに少しでも時間を使うくらいならプラグインでサクッと追加したほうがいいなという結論に。
探してみると、トグルボタンだけでなく、アコーディオンメニューやタブ、ボタン、ボックスなどを記事内に簡単に挿入できるプラグインがありました。
「Arconix Shortcodes」
インストール
プラグインの画面から「Arconix Shortcodes」を検索し、上記画像のものをインストール→有効化
使い方
詳しい使い道については以下にデモサイトがある。
http://demo.arconixpc.com/arconix-shortcodes/
上記を見ると、Bootstrapと馴染みやすいデザインだけど、よりカラフルな感じだなぁ。
・・・と思った瞬間に、「あれ、Toggleボタンくらい100%Bootstrapでもあるじゃん。」
と気付きました。が、とりあえずこのまま進みます。
http://www.bootstraptoggle.com/
使い方はこっちのほうがわかりやすい↓
https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
toggleボタンを記事に挿入する方法
アコーディオンやボタンなどはとりあえず今回は必要ないため、早速Toggleボタン挿入の方法を紹介。
記事内の任意の場所でで以下のタグを挿入
[toggle title=”タイトルや見出しなど見えていい部分をここに”]トグルによって切り替えたい内容をここに[/toggle]
これだけです。
※大カッコは半角で
上記の記述をプレビューするとこうなります。
[toggle title=”タイトルや見出しなど見えていい部分をここに”]トグルによって切り替えたい内容をここに[/toggle]
以上、とっても簡単なのでオススメのプラグインです。