【初心者向け】コピペで使える「Shortcode Ultimate」プラグインの代表的なコンテンツの追加方法

役に立つ情報でしたら是非拡散(シェア)をお願いします

WordPressをインストールして、何かを書こうと思っても文章だけをひたすら打つのがやっと・・・なんて方多いのではないでしょうか?

そんな時に使えるのが「Shortcode Ultimate」プラグイン。プラグインの追加で検索すればすぐに出てくる位使っている方の多い便利なプラグインです。

プラグインを有効化した後の基本的な使い方としては編集画面上の【ショートコードを挿入】をクリックするといろいろなメニューが出てきて都度コンテンツを作成できるようになります。

ちなみにこのプラグインを有効化して追加されるボタンがこれ

今回はまだサイトコンテンツの作成に慣れていない、そこへ便利な機能だといわれてもねぇ・・・という方のために、コードをコピーして内容を入力するだけでできるコンテンツ作成例をいくつか紹介します。

※当然ですが「Shortcode Ultimate」プラグインのインストールと有効化は必要です

タブ表示

ブラウザのように本文の中でタブ切り替えして表示するようなコンテンツが作れます

コピーするコード

[su_tabs]
[su_tab title="タブの名前1" disabled="no" anchor="" url="" target="blank" class=""]
タブをクリックしたときに表示される内容1
[/su_tab]
[su_tab title="タブの名前2" disabled="no" anchor="" url="" target="blank" class=""]
タブをクリックしたときに表示される内容2
[/su_tab]
[su_tab title="タブの名前3" disabled="no" anchor="" url="" target="blank" class=""]
タブをクリックしたときに表示される内容3
[/su_tab]
[/su_tabs]

コードを挿入して表示されるコンテンツの例

タブの名前1タブの名前2タブの名前3
タブをクリックしたときに表示される内容1
タブをクリックしたときに表示される内容2
タブをクリックしたときに表示される内容3

タブをクリックしたときに表示される内容には文字・画像などほぼ何でも表示できます

スポイラーとアコーディオン表示

クリックすると内容が表示されるようなコンテンツが作れます

コピーするコード

[su_accordion]
[su_spoiler title=”クリック前のタイトル1” open=”no” style=”default” icon=”plus” anchor=”” class=””]
クリックすると表示されるコンテンツ1
[/su_spoiler]
[su_spoiler title=”クリック前のタイトル2” open=”no” style=”default” icon=”plus” anchor=”” class=””]
クリックすると表示されるコンテンツ2
[/su_spoiler]
[su_spoiler title=”クリック前のタイトル3” open=”no” style=”default” icon=”plus” anchor=”” class=””]
クリックすると表示されるコンテンツ3
[/su_spoiler]
[/su_accordion]

コードを挿入して表示されるコンテンツの例

クリック前のタイトル1
クリックすると表示されるコンテンツ1
クリック前のタイトル2
クリックすると表示されるコンテンツ2
クリック前のタイトル3
クリックすると表示されるコンテンツ3
「クリック前のタイトル」をクリックしたときに表示される内容には文字・画像などほぼ何でも表示できます

スペーサー

通常はどんなに改行しても一行分しか隙間を空けることができませんがこのコードを使うと任意の行間を空けることができます

コピーするコード

スペーサーを入れる前の文章
[su_spacer size=”180″]
スペーサーを入れだ後の文章

コードを挿入して表示されるコンテンツの例

スペーサーを入れる前の文章

スペーサーを入れだ後の文章

180となっている数字を変更することで隙間の量を調整できます

ラベル

左側にマークが表示され、文章全体が囲まれたコンテンツが作成できます

コピーするコード

[su_label type=”important”]重要な項目であることが分かる色合いの背景になります[/su_label]
[su_label type=”success”]成功例であることが分かる色合いの背景になります[/su_label]
[su_label type=”warning”]警告であることが分かる色合いの背景になります[/su_label]
[su_label type=”info”]お知らせ項目であることが分かる色合いの背景になります[/su_label]

コードを挿入して表示されるコンテンツの例

重要な項目であることが分かる色合いの背景になります
成功例であることが分かる色合いの背景になります
警告であることが分かる色合いの背景になります
お知らせ項目であることが分かる色合いの背景になります

ドロップキャップ

海外のサイトに多いコンテンツかと思われます。先頭の1文字が大きくしたいときに便利です。

コピーするコード

[su_dropcap size=”4″]先[/su_dropcap]頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。

コードを挿入して表示されるコンテンツの例

頭の文字だけが大きくなります。先頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。頭の文字だけが大きくなります。

カラム(列)

本文の幅を自動計算して分割表示してくれます

コピーするコード

[su_row]
[su_column size=”1/2″ center=”no” class=””]
1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 
[/su_column]
[su_column size=”1/2″ center=”no” class=””]
1/2の場合の右側コンテンツ 1/2の場合の右側コンテンツ 1/2の場合の右側コンテンツ 1/2の場合の右側コンテンツ 1/2の場合の左側コンテンツ 
[/su_column]
[/su_row]

コードを挿入して表示されるコンテンツの例

1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 1/2の場合の左側コンテンツ 
1/2の場合の右側コンテンツ 1/2の場合の右側コンテンツ 1/2の場合の右側コンテンツ 1/2の場合の右側コンテンツ 1/2の場合の左側コンテンツ 

左側(右側)には文章・画像などほとんど何でも表示できます。

ちなみに3列均等表示する場合は

[su_row]
[su_column size=”1/3″ center=”no” class=””]
1/3の場合の左側コンテンツ 1/3の場合の左側コンテンツ 1/3の場合の左側コンテンツ 1/3の場合の左側コンテンツ 1/2の場合の左側コンテンツ 
[/su_column]
[su_column size=”1/3″ center=”no” class=””]
1/3の場合の中央コンテンツ 1/3の場合の中央コンテンツ 1/3の場合の中央コンテンツ 1/3の場合の中央コンテンツ 1/2の場合の左側コンテンツ 
[/su_column]
[su_column size=”1/3″ center=”no” class=””]
1/3の場合の右側コンテンツ 1/3の場合の右側コンテンツ 1/3の場合の右側コンテンツ 1/3の場合の右側コンテンツ 1/2の場合の左側コンテンツ 
[/su_column]
[/su_row]

というコードになり、表示すると

1/3の場合の左側コンテンツ 1/3の場合の左側コンテンツ 1/3の場合の左側コンテンツ 1/3の場合の左側コンテンツ 1/2の場合の左側コンテンツ 
1/3の場合の中央コンテンツ 1/3の場合の中央コンテンツ 1/3の場合の中央コンテンツ 1/3の場合の中央コンテンツ 1/2の場合の左側コンテンツ 
1/3の場合の右側コンテンツ 1/3の場合の右側コンテンツ 1/3の場合の右側コンテンツ 1/3の場合の右側コンテンツ 1/2の場合の左側コンテンツ 

という感じになります。

応用として1/3と2/3の割合で分ける場合には

[su_row]
[su_column size=”1/3″ center=”no” class=””]
1/3の左側コンテンツ 1/3の左側コンテンツ 1/3の左側コンテンツ 1/3の左側コンテンツ 1/3の左側コンテンツ 
[/su_column]
[su_column size=”2/3″ center=”no” class=””]
2/3の右側コンテンツ 2/3の右側コンテンツ 2/3の右側コンテンツ 2/3の右側コンテンツ 2/3の左側コンテンツ 
[/su_column]
[/su_row]

というコードになります。違いを見つけて応用してくださいね。

※本文幅が割り切りにくい数字の場合には少しどこかの幅が大きくなることがあります

ボタン

クリックすると別のページへ移動するようなボタンを作ることができます

コピーするコード

[su_button url=”遷移先のURL” target=”blank” background=”#113053″ size=”5″ center=”yes” radius=”5″]
ボタンテキスト
[/su_button]

コードを挿入して表示されるコンテンツの例

遷移先のURLにはクリックしたときに移動するURLを、ボタンテキストには自由な文字列を入力します
background・・・ボタンの色です
size・・・ボタンの大きさです
center・・・ボタンを本文の中央に表示するかどうかです(中央表示しない場合にはnoにします)
radius・・・ボタンの周囲の丸め量です

ボックスコンテンツ

色付きの見出しと全体が線で囲まれたコンテンツを作ることができます

コピーするコード

[su_box title=”色付きのタイトル” box_color=”#181794″ radius=”5″]
ボックスのコンテンツ
[/su_box]

コードを挿入して表示されるコンテンツの例

色付きのタイトル
ボックスのコンテンツ

box_color・・・見出しと線の色です
radius・・・外枠の丸め量です

応用例

2列表示にしてそれぞれにボックスコンテンツを置く例です

コード

[su_row]
[su_column size=”1/2″ center=”no” class=””]
[su_box title=”色付きのタイトル” box_color=”#181794″ radius=”5″]ボックスのコンテンツ[/su_box]
[/su_column]
[su_column size=”1/2″ center=”no” class=””]
[su_box title=”色付きのタイトル” box_color=”#181794″ radius=”5″]ボックスのコンテンツ[/su_box]
[/su_column]
[/su_row]

表示例

色付きのタイトル
ボックスのコンテンツ
色付きのタイトル
ボックスのコンテンツ

ノート

全体に色が付いたコンテンツを作ることができます

コピーするコード

[su_note note_color=”#1c14b0″ text_color=”#faf2f2″ radius=”8″]
ノートの内容
[/su_note]

コードを挿入して表示されるコンテンツの例

ノートの内容

note_color・・・背景の色です
text_color・・・文字の色です
radius・・・外枠の丸め量です


「Shortcode Ultimate」で作成できるコンテンツの一例を紹介しました。どうですか?文字だけ、やっとこさ挿入した画像だけだった投稿や固定ページがかなり華やかになりますよね?

他にも編集画面上の「ショートコードを挿入」をクリックしていろいろなコンテンツが作れます。

また、ここで紹介したショートコードもいろいろなオプションがあって別の表現ができるものもありますので、いろいろと試してみてください

トップへ戻る