アコーディオンやタブも一発!ショートコードの詰め合わせプラグイン

WordPressのプラグインShortcodes Ultimateでは、インストールするだけで様々なショートコードがワンタッチで使えるようになります。

以前、ウィンドウを縮小しても大きさが変わらないカラム設定の時にご紹介したShortcodes Ultimateですが、今回はその他の機能についてまとめます。

Shortcodes Ultimateのインストール方法については3カラムを使う際、画面の大きさを変えると画像が1列になる時の対処の記事を参考ください。

アコーディオンやタブも一発!ショートコードの詰め合わせプラグイン
ちょっと宣伝:
脱・執筆嫌い!国語が苦手だった私が筆まめになった5冊の本
の記事を書きあげました。
国語が苦手だったわたしが、読んで実践するだけで「変われた」本。
ブロガーとして文章力をアップするチャンス!
文章を書くのが苦手
目を引くタイトルをつけたい
もっと言葉の引き出しを増やしたい
(タイトル決めに利用しまくってるので、ほんとは内緒にしたい)
一部の本は今ならkindleUnlimitedの無料体験利用で、タダで読めます
目次

プラグイン「Shortcodes Ultimate」の便利機能一覧

タブ

ページ上でタブを切り替えれるCCSです。

デフォルト

[su_tabs][su_tab title=”タブ名” disabled=”no” anchor=”” url=”” target=”blank” class=””]タブコンテンツ1[/su_tab] [su_tab title=”タブ名” disabled=”no” anchor=”” url=”” target=”blank” class=””]タブコンテンツ2[/su_tab] [su_tab title=”タブ名” disabled=”no” anchor=”” url=”” target=”blank” class=””]タブコンテンツ3[/su_tab][/su_tabs]

サンプル

[su_tabs][su_tab title=”表1” disabled=”no” anchor=”” url=”” target=”blank” class=””]

項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

 

[/su_tab] [su_tab title=”表2” disabled=”no” anchor=”” url=”” target=”blank” class=””]

こちらは
サンプル
です
表の見比べなど
便利ですね

 

[/su_tab][/su_tabs]

スポイラー・アコーディオン

スポイラー・アコーディオンは説明ページなどでよくみかけることがある + マークなどで本文を隠すものです。クリックすると中身が表示されるので、ページをすっきり見せることができます。

アコーディオンやタブも一発!ショートコードの詰め合わせプラグイン
説明が不要な方にとっては長々と書かれると読むのをやめたくなるもんね
デフォルト

[su_accordion][su_spoiler title=”スポイラーのタイトル” open=”no” style=”default” icon=”plus” anchor=”” class=””]非表示のコンテンツ[/su_spoiler] [su_spoiler title=”スポイラーのタイトル” open=”no” style=”default” icon=”plus” anchor=”” class=””]非表示のコンテンツ[/su_spoiler] [su_spoiler title=”スポイラーのタイトル” open=”no” style=”default” icon=”plus” anchor=”” class=””]非表示のコンテンツ[/su_spoiler][/su_accordion]

サンプル

[su_accordion][su_spoiler title=”スポイラー・アコーディオンとは?” open=”no” style=”default” icon=”plus” anchor=”” class=””]スポイラー・アコーディオンは説明ページなどでよくみかけることがある + マークなどで本文を隠すものです。クリックすると中身が表示されるので、ページをすっきり見せることができます。[/su_spoiler] [su_spoiler title=”画像を貼り付けたりもできます” open=”no” style=”default” icon=”plus” anchor=”” class=””]ブサ猫の無料配布アイコン[/su_spoiler] [su_spoiler title=”もちろん表も” open=”no” style=”default” icon=”plus” anchor=”” class=””]

項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

 

[/su_spoiler][/su_accordion]

また、style=”default”を変更することによって外見を変えることもできます。

[su_accordion][su_spoiler title=”デフォルト” open=”no” style=”default” icon=”plus” anchor=”” class=””]style=”default”[/su_spoiler] [su_spoiler title=”シンプル” open=”no” style=”simple” icon=”plus” anchor=”” class=””]style=”simple” [/su_spoiler] [su_spoiler title=”ファンシー” open=”no” style=”fancy” icon=”plus” anchor=”” class=””]style=”fancy” [/su_spoiler][/su_accordion]

CSVテーブル

CSVでメディアファイルに保存した表を表示させることができます。WordPressではテーブルも簡単に挿入できるので、いつ使うの?と思いますが、実はトップページなどウィジェットに挿入できるHTMLコードではテーブルのコードを使っても表示されません。

そんなときにCSVテーブルを利用すれば問題なく表として表示されます。

CSVデーブルをWordPressに利用して、文字化けした場合の対処

文字コードを「UTF-8]で保存してみましょう!エクセルのバージョンが古い場合は保存形式で選択できないので、一旦CSVで保存した後に「プログラムから開く」→「メモ張」を選択し、名前を付けて保存で文字コードを変更しましょう。

また、一度WordPressのメディアファイルにアップした名前は、完全に削除したとしてもキャッシュが残っているため、ファイル名を少し変更しアップロードしましょう。

アニメーション

多数のアニメーションをテキストに付属させることができます。

[su_animate type=”flash”]アニメーションコンテンツ[/su_animate]

[su_animate type=”fadeInDownBig”]アニメーションコンテンツ[/su_animate]

[su_animate type=”fadeInUp”]アニメーションコンテンツ[/su_animate]

まとめ

今回は利用頻度の高いものを紹介しましたが、その他にもグーグルマップやユーチューブ、画像加工など様々なショートコードがついてきます。いちいち追加CCSを記載しなくても言い分、とても楽です。[su_animate type=”rollIn”]使わないと損![/su_animate]

Goblog ごぶろぐ
アコーディオンやタブも一発!ショートコードの詰め合わせプラグイン
WordPressのプラグインやカスタマイズ、SEO設定のまとめ | Goblog ごぶろぐ WordPressのおすすめプラグイン WordPressの便利なプラグインをご紹介していきますが、「全部いれろ!」とは言いません。あくまで「自分が必要な機能をもっているプラグイ...

 

この記事が気に入ったら
フォローしてね!

お手数でなければシェアしてください
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ごんのアバター ごん でざいなー

デザイン・パソコン・副業がお好き

Excelやillustratorの使い方
日々の生活で効率をあげる方法など
あらゆることを書いています

目次