Shortcodes Ultimate のショートコード記法の覚え書き

2017年6月1日2018年3月24日WordPress,ウェブサイト作成

ボタンやリスト、タブなどを実現するのにCSSを編集してスクリプトを設置して、とやるのは面倒。という人向けのWordpress用プラグインが Shortcodes Ultimate です。

Shortcode Ultimate を使うとショートコードを入力するだけで、有料テンプレートについているようなデザインのものが簡単に作れます。Bootstrapで使えるものが基本になっているようですが、個別にスタイルを設定できるなど使いやすいです。

更新も頻繁に行われているので当分は安心して使えます。

ショートコードでボタンやタブを設置できるプラグインとしては Arconix Shortcodes が有名で、解説サイトも多いので、支障がなければArconix Shortcodesでいいと思います。うちではうまく動かないので、結果としてShortcodes Ultimateを利用しています。

メディアを追加の横に表示されるボタンからショートコードを作れますし、チートシートも完備してます。しかし量が多すぎて探すのもわずらわしい。

ということで、自分で参照することの多いショートコードをピックアップして置いてます。

よく使うショートコードの使い方

• 接頭辞[su_]は設定で変えられる
• クラス名も自分でつけられるので、カスタムCSSとして変更も簡単

記事をIDで挿入

• 投稿記事のIDを入力
• そのIDの記事タイトルを変えると、ショートコードを書いたページのタイトルも変わる
• パーマリンクを変更しても影響を受けない（はず）

[su_permalink id="この記事のID" target="self" class=""]

コンテンツのタブ表示

• [su_tabs]　[/su_tabs]でくくる
• tabsの間に[su_tab title=""]文章[/su_tab]でタブ項目を追加
• active="番号"の番号で、デフォルトでアクティブなタブを指定
• tabs の vertical="yes"で縦タブ、"no"で横タブ

コンテンツのタブ表示サンプル

ソース

[su_tabs style="default" active="2" vertical="yes" class=""]
[su_tab title="タブ１"]コンテンツ 1[/su_tab]
[su_tab title="タブ２"]コンテンツ 2[/su_tab]
[su_tab title="タブ3"]コンテンツ 3[/su_tab]
[/su_tabs]

アコーディオン

• [su_accordion][su_spoiler style="simple" icon="caret"]内容[/su_spoiler][/su_accordion]の形
• 表示／非表示、デザインはsu_spoilerスポイラーで
• title="好きな名前"
• open="yes"　デフォルトはno
• style="simple"　default, fancy, simple
• icon="caret"　plus, plus-circle, plus-square-1, plus-square-2, arrow, arrow-circle-1,arrow-circle-2, chevron, chevron-circle, caret, caret-square, folder-1, folder-2
• anchor="アンカー名"　必要に応じて
• class="クラス名"　任意のカスタムCSSクラス

アコーディオンサンプル

ソース

[su_accordion]
[su_spoiler title="デフォルトスタイル"]デフォルト[/su_spoiler]
[su_spoiler style="simple" icon="caret" title="スタイルシンプル"] style="simple" icon="caret"[/su_spoiler]
[su_spoiler style="fancy" icon="chevron" title="スタイルfancy"] style="fancy" icon="chevron"[/su_spoiler]
[/su_accordion]

ボックス（要約や説明書き）

• [su_box title="要約や説明タイトル"]本文[/su_box]でくくる
• class指定OK
• box_color="背景色"　カラーコード#333333
• title_color="文字色" カラーコード#FFFFFF"
• radius="ピクセル（px不要）"　角を丸っこくする範囲
• style="default"　default, soft, glass, bubbles, noise

ボックスサンプル

ソース

[su_box title="ボックスタイトル" style="glass" box_color="#333333" title_color="#FFFFFF" radius="3" class=""]style="glass"[/su_box]
[su_box title="ボックスタイトル" style="soft" box_color="#333333" title_color="#FFFFFF" radius="3" class=""]style="soft"[/su_box]
[su_box title="ボックスタイトル" style="bubbles" box_color="grey" title_color="#FFFFFF" radius="3" class=""]s style="noise"[/su_box]
[su_box title="ボックスタイトル" style="noise" box_color="blue" title_color="#FFFFFF" radius="3" class=""]s style="noise"[/su_box]

強調表示（マーカー）

強調表示、いわゆるマーカー。普段はあまり使わないからクラスを登録するのも面倒という人がワンポイントで使うのに最適。

• [su_highlight]～[/su_highlight]
• background="背景色"
• color="文字色"

強調サンプル

[su_highlight background="#fffd99" color="#ed727e"]強調表示するテキストの背景色[/su_highlight]。普通にインラインで並べられます。[su_highlight]マーカー。強調表示するテキストの背景色[/su_highlight]

ノート（メモっぽい枠線ボックス）

• [su_note]本文[/su_note]でくくる
• note_color="背景色"　カラーコード#aacc22
• text_color="文字色" カラーコード#333333
• radius="ピクセル"　角を丸っこくする範囲

ノートサンプル

ソース

[su_note note_color="#aacc22" text_color="#333333" radius="3" class=""]メモや注意書き[/su_note]

レスポンシブカラム

レスポンシブの横並び。スマホなら縦並びに

等幅に並べたい時に使える。

• [su_row class=""][/su_row]はなくても機能。
• column size="1/3″　分割数　1/1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6

2分割

[su_row class=""]
[su_column size="1/3"]コンテンツ１[/su_column]
[su_column size="1/3"]コンテンツ２[/su_column]
[su_column size="1/3"]コンテンツ３[/su_column]
[/su_row]
[su_column size="1/2" center="no" class=""]列横並び1[/su_column]
[su_column size="2/2" center="no" class=""]列横並び2[/su_column]

丸囲いの文字

• style="default"　可能な値: default, flat, light, simple
• size="3″ サイズ1～5

[su_dropcap style="default" size="3" class=""]注[/su_dropcap] default
  
[su_dropcap style="flat" size="3" class=""]F[/su_dropcap]　flat
  
[su_dropcap style="light" size="4" class=""]light[/su_dropcap]　light
 
   
[su_dropcap style="simple" size="5" class=""]S[/su_dropcap]　simple

ラベル

バッジに近いかも。垂直方向に中央(vertical-align:center;)には位置しないのが難。

• type　default, success, warning, important, black, info　デフォルト値: default
• class　ユーザークラス

ソース

[su_label type="default" class=""]default[/su_label]
[su_label type="success" class=""]success[/su_label]
[su_label type="warning" class=""]warning[/su_label]
[su_label type="important" class=""]important[/su_label]
[su_label type="black" class=""]black[/su_label]
[su_label type="info" class=""]info[/su_label]

ノート（su_note）と併用

[su_note note_color="#833" text_color="#fff" radius="3" class=""][su_label type="important" class=""]important[/su_label]重要！これはとっても重要[/su_note]

iframe（インラインフレーム）でリンク先ドキュメント表示

• url　対象ファイル
• width　幅200～1600　デフォルト値: 600
• height　高さ200～1600　デフォルト値: 600
• responsive　レスポンシブ　yes | no　デフォルト：yes

[su_document url="https://yaruzou.net/css/gstv-map-t.css" width="400" height="200" responsive="yes" class=""]

QRコード

• 文字列のQRコードを表示
• data　QRコード表示したいテキスト文字列
• title　タイトル
• size　サイズ10～1000　デフォルト値: 200
• margin　マージン　0～50　デフォルト値: 0
• align　位置　none, left, center, right　デフォルト値:none
• link　リンク先
• target　ターゲット指定 self, blank　デフォルト値: blank
• color　色指定　#RGB and rgba() colors　デフォルト値: #000000
• background　背景色　#RGB and rgba() colors　デフォルト値: #ffffff
• class　独自クラス

[su_qrcode data="https://yaruzou.net/shortcodes-ultimate-shortcodes-memorandum" 
title="" size="200" margin="0" align="none" link="https://yaruzou.net/shortcodes-ultimate-shortcodes-memorandum"
 target="blank" color="#000000" background="#ffffff" class=""]