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

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

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

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

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

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

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

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

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

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

記事をIDで挿入

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

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

コンテンツのタブ表示

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

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

タブ1タブ2タブ3
コンテンツ 1
コンテンツ 2
コンテンツ 3

ソース

[su_tabs style="default" active="2" vertical="yes" class=""]
[su_tab title="タブ1"]コンテンツ 1[/su_tab]
[su_tab title="タブ2"]コンテンツ 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クラス

アコーディオンサンプル

デフォルトスタイル
デフォルト
スタイルシンプル
style="simple" icon="caret"
スタイルfancy
style="fancy" icon="chevron"

ソース

[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]
fancyの角を立たせたい(丸みを0に)したい時は su-spoiler-style-fancyとsu-spoiler-titleの両方 border-radius:0にする

ボックス(要約や説明書き)

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

ボックスサンプル

ボックスタイトル
style="glass"
ボックスタイトル
style="soft"
ボックスタイトル
s style="noise"
ボックスタイトル
s style="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
コンテンツ1
コンテンツ2
コンテンツ3

2分割

列横並び1
列横並び2

 

[su_row class=""]
[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]
[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
 default

 

F flat
 
light light
 
S simple
 
 

[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 ユーザークラス
defaultsuccesswarningimportantblackinfo

ソース

[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)と併用

important重要!これはとっても重要
[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=""]