WordPress】Shortcodes Ultimateでスポイラー(開閉アイテム)(アコーディオン)と段組みを試す【プラグイン

WordPressのブログに色んな機能を足したくて多機能プラグイン「ShortcodesUltimate」をインストールしたけど、機能が多くて試すのが面倒!という方へ。「spoiler(スポイラー)」「アコーディオン」と「row(段組み)」を試してみたので参考にして下さい。

さっそく試してみる。

こんにちは(2018/8/4)

解答を隠しておいた方が

閲覧者の方に読みやすいと思うので、「普段は隠しておいた内容をボタン押しで表示する仕組み」を作れるプラグインを探してみました。
見つかったのが「shortcode ultimates」です。ダウンロード・インストールしてみました。

編集画面のここ(①)からアクセスします。

すると選択画面が出てきます…


物凄く大量のショートコードがついていてびっくり!!さすがultimate!www

開閉パネル(Spoiler)

先程の選択画面のコレがスポイラーですね

デフォルトの形式

問題1

はさみのある血液型はなんでしょうか?

[su_spoiler title=”解答を表示する” open=”no” style=”default” icon=”plus” anchor=”” class=””]

(解答)
クワガタ

[/su_spoiler]

形式を変更(シェブロンサークルのボックス)

類題2

サクランボな血液型はなんでしょうか

[su_spoiler title=”解答を表示する” open=”no” style=”fancy” icon=”chevron-circle”]

(解答)
ヤマガタ

[/su_spoiler]

よしよし

うまく行ってる♪この方が読んでいて楽しいのは間違いないですね!

挿入時に何故か3セット入るのが煩わしいな…と思っていたら、それは「アコーディオン(開閉アイテムがセットになっていて一つが開くと別のは閉じる)」というもので単独の開閉アイテムは「スポイラー」というのだった。

追記(2019/5/3)

ずっと「スポイラーを入れ子構造にできないかなぁ」と思っていたのですが、コチラの御サイト様で情報を見つけました。

m(_ _)m アザッス!!

ショートコードの「[」の次に「_」を入れれば良いのですね!(早く言ってよ…w)試しに使ってみます。

鎌倉幕府を開いたのは?
[su_spoiler title=”解答を表示” style=”fancy” icon=”chevron-circle”]

源頼朝です。では、鎌倉に幕府を開いた地理的理由を書きなさい

[_su_spoiler title=”解答を表示” style=”fancy” icon=”chevron-circle”]

山と海に囲まれており、敵から守りやすいから
[_/su_spoiler]

[/su_spoiler]

ただ、先のサイト様では三段階層になさっていましたが、こちらで試したところ三層にはできませんでした。

プラグイン自体は最新版にバージョンアップしましたが、本体をVer5にアップしていないので、そのせいかもしれません(汗)

ボックス表示

ボックス表示というのも試してみる。コレですね

[su_box title=”ボックス表示のテスト”]「デフォルト」スタイル
ボックスコーナーの半径:3(デフォルト) [/su_box]

[su_box title=”ボックス表示のテスト” style=”soft” radius=”6″]「ソフト」スタイル
ボックスコーナーの半径:6 [/su_box]

[su_box title=”ボックス表示のテスト” style=”glass” radius=”6″]「ガラス」スタイル
ボックスコーナーの半径:6 [/su_box]

段組み(二段)

段組みは二種類あって、まずはコチラから

インスタントな二段表示

画像を並べて配置したかったのでちょうどよい
横2列の段組みを試してみる。

[su_row]
[su_column size=”1/2″ center=”no” class=””]
画像1タイトル

画像の説明。画像の説明。画像の説明。画像の説明。画像の説明。[/su_column]
[su_column size=”1/2″ center=”no” class=””]
画像2タイトル

画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明
[/su_column]
[/su_row]

ダウンロードを並べて配置する練習(コレがやりたかった)

[su_row][su_column size=”1/2″ center=”no” class=””]
プリント(000)
[/su_column]
[su_column size=”1/2″ center=”no” class=””]
プリント(000)
[/su_column][/su_row]

段組み(三段)

こっちの段組みはマニュアルで組むようだ

[su_row][su_column size=”1/3″]
画像1

画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明
[/su_column]
[su_column size=”1/3″]
画像2

画像の説明画像の説明画像の説明画像の説明
[/su_column]
[su_column size=”1/3″]
画像3

画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明画像の説明
[/su_column]
[/su_row]

よしよし…編集画面が分かりづらいけど、うまくいくな♪

沢山ありすぎて

全部は試せそうもないですね

追記(2019/1/14)

旧ブログの解説当初には、かなりお世話になりました

タイトルとURLをコピーしました