【ワードプレス】開閉パネルをサクッと設置できるプラグイン

【ワードプレス】開閉パネルをサクッと設置できるプラグイン

当記事ではこのような
開閉パネル(アコーディオン)を
すぐに設置できるプラグインを
ご紹介します。

クリックで開くよ!
開いたよ!

avatar

とっても簡単にできます

 

Shortcodes Ultimate

今回導入するプラグインは
Shortcodes Ultimate」です。

まずは

ダッシュボード

プラグイン

新規追加

でプラグインをインストール、有効化します。

 

 

すると、新規投稿画面でビジュアルモードにした際、
「ショートコードを作成」というボタンが現れます。

 

 

クリックするとこのような画面になります。
上列の右端にある「アコーディオン」を
クリックします。

 

 

アコーディオンをクリックすると
このような画面になります。

ショートコードを挿入をクリックします。

 

デフォルトではこのように3つの
開閉パネルを作成できるように
なっています。

スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ

 

 

下記を参考に編集します。

“スポイラーのタイトル”の部分が
+の横に表示される文字になります。

“”を消さないように好みのタイトルに変更します。

 

非表示のコンテンツの部分が
クリックされると開く文章です。

これで記事内に開閉パネル(アコーディオン)が
完成しました!

 

Arconix ShortcodesとSTORK/SANGOの相性

同じように開閉パネルを設置できるプラグインとして
Arconix Shortcodes」があります。

 

ただ、もしワードプレスのテーマを
STORK」や「SANGO」にしている場合は
注意が必要です。

別ブログでOPENCAGEのテーマ「STORK」を
使っているのですが「Arconix Shortcodes」を
有効化するとボックスの表示がおかしく
なってしまいました。

具体的には、ボックスのカラー指定をしているのに
全て黒のボックスになってしまうというエラーが
出ています。

 
ーーーーーーーーーーーーーーーーーーーーーーーー
どうやら「SANGO」でも同様のボックス表示エラーが
出たという記事を見つけたので、WPのテーマを
「STORK」や「SANGO」にしている人は
「Arconix Shortcodes」よりも
「Shortcodes Ultimate」を使うといいと思います

avatar

Shortcodes Ultimateに変更したらちゃんとボックスに色がつきました

 

まとめ

記事内に開閉パネル(アコーディオン)を
つけることによって、

・長文の記事をすっきり見せる
・問題の解答を隠す

といった使い方ができ、ユーザビリティを向上
させることができると思います。

プラグインでサクッと導入できるので
ぜひ試してみてください。

 

 

WordPressカテゴリの最新記事