プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【WordPress】記事内で表示、非表示を切り替えるトグルの実装「Arconix Shortcodes」

基本情報一問一答でWordpressの記事内にトグルボタンをつけて、回答を表示、非表示にする機能を追加しようということで、
jQueryでコードを書こうと思いました。しかし、そこに少しでも時間を使うくらいならプラグインでサクッと追加したほうがいいなという結論に。

探してみると、トグルボタンだけでなく、アコーディオンメニューやタブ、ボタン、ボックスなどを記事内に簡単に挿入できるプラグインがありました。

「Arconix Shortcodes」

インストール


プラグインの画面から「Arconix Shortcodes」を検索し、上記画像のものをインストール→有効化

使い方

詳しい使い道については以下にデモサイトがある。
http://demo.arconixpc.com/arconix-shortcodes/
上記を見ると、Bootstrapと馴染みやすいデザインだけど、よりカラフルな感じだなぁ。
・・・と思った瞬間に、「あれ、Toggleボタンくらい100%Bootstrapでもあるじゃん。」
と気付きました。が、とりあえずこのまま進みます。

※Bootstrapでtoggleを使うにはこちら↓
http://www.bootstraptoggle.com/

使い方はこっちのほうがわかりやすい↓
https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

toggleボタンを記事に挿入する方法

アコーディオンやボタンなどはとりあえず今回は必要ないため、早速Toggleボタン挿入の方法を紹介。

記事内の任意の場所でで以下のタグを挿入
[toggle title=”タイトルや見出しなど見えていい部分をここに”]トグルによって切り替えたい内容をここに[/toggle]
これだけです。
※大カッコは半角で

上記の記述をプレビューするとこうなります。
[toggle title=”タイトルや見出しなど見えていい部分をここに”]トグルによって切り替えたい内容をここに[/toggle]

若干使い方について迷ったのが、プラグインの設定や使い方がwordpress管理メニューの「ツール」や「設定」に追加されるのではなく、投稿画面に追加されるのでそれに気付くのに少し時間がかかりました^^;

以上、とっても簡単なのでオススメのプラグインです。