WordPress shortcodes ultimate ショートコード一覧

こんにちは!トビログ管理人のとびうおです!本日はWordPressのプラグインの「shortcodes ultimate」にて使えるショートコードをプレビューと共に紹介します!

shortcodes ultimateでできること

shortcodes ultimateでは次のようなものが簡単に作れます!

それでは一つずつコードとともに紹介をします!

見出し

見出しスタイル

見出しテキスト
[su_heading style="default" size="13" align="center" margin="20" id="" class=""]見出しテキスト[/su_heading]

タブ

コンテナタブ

タブ名タブ名タブ名
タブコンテンツ
タブコンテンツ
タブコンテンツ
[su_tabs style="default" active="1" vertical="no" mobile="stack" anchor_in_url="no" class=""]
  [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
  [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
  [su_tab title="タブ名" disabled="no" anchor="" url="" target="blank" class=""]タブコンテンツ[/su_tab]
[/su_tabs]

スポイラー

コンテンツが非表示のスポイラー

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

アコーディオン

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

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

仕切り

トップに戻るリンクの仕切り

[su_divider top="yes" text="ページのトップへ" anchor="#" style="default" divider_color="#999999" link_color="#999999" size="3" margin="15" class=""]

スペーサー

調節可能な空きスペースの高さ

[su_spacer size="20" class=""]

ハイライト

強調表示するテキストの背景色

 強調表示するテキストの背景色 

[su_highlight background="#DDFF99" color="#000000" class=""]強調表示するテキストの背景色[/su_highlight]

ラベル

ラベルスタイル

ラベル

[su_label type="default" class=""]ラベル[/su_label]

引用

代替 Blockquote

引用
[su_quote style="default" cite="" url="" class=""]引用[/su_quote]

プルクオート

プルクオート

プルクオート
[su_pullquote align="left" class=""]プルクオート[/su_pullquote]

Dropcap

Dropcap

D

[su_dropcap style="default" size="3" class=""]D[/su_dropcap]

カラム

フレキシブルカラムの列

カラムコンテンツ
カラムコンテンツ
[su_row class=""]
  [su_column size="1/2" center="no" class=""]カラムコンテンツ[/su_column]
  [su_column size="1/2" center="no" class=""]カラムコンテンツ[/su_column]
[/su_row]

リスト

番号の付かないリスト

<ul> <li>並び項目</li> <li>並び項目</li> <li>並び項目</li> </ul>
[su_list icon="" icon_color="#333333" indent="0" class=""]<ul>
<li>並び項目</li>
<li>並び項目</li>
<li>並び項目</li>
</ul>[/su_list]

ボタン

ボタンスタイル

ボタンのテキスト

[su_button url="https://tobilog.net" target="self" style="default" background="#2D89EF" color="#FFFFFF" size="3" wide="no" center="no" radius="auto" icon="" icon_color="#FFFFFF" text_shadow="none" desc="" download="" onclick="" rel="" title="" id="" class=""]ボタンのテキスト[/su_button]

サービス

サービスボックスのタイトル

サービスタイトル
サービスの説明
[su_service title="サービスタイトル" icon="icon: star" icon_color="#333333" size="32" class=""]サービスの説明[/su_service]

ボックス

カラーボックスの見出し

ボックスタイトル
ボックスのコンテンツ
[su_box title="ボックスタイトル" style="default" box_color="#333333" title_color="#FFFFFF" radius="3" class="" id=""]ボックスのコンテンツ[/su_box]

メモ

カラーボックス

ノートテキスト
[su_note note_color="#FFFF66" text_color="#333333" radius="3" class="" id=""]ノートテキスト[/su_note]

拡大

拡張可能なテキストブロック

[su_expand more_text="続きを表示" less_text="小さい表示" height="100" hide_less="no" text_color="#333333" link_color="#0088FF" link_style="default" link_align="left" more_icon="" less_icon="" class=""]このテキストブロックを拡大できます[/su_expand]

Lightbox

カスタムコンテンツとLightboxのウィンドウ

[su_lightbox type="iframe" src="" mobile="yes" class=""]クリックして Lightbox を表示[/su_lightbox]

ツールチップ

カスタムコンテンツとウィンドウのツールチップ

マウスオーバーしてツールチップを表示
[su_tooltip title="" text="ツールチップコンテンツ" position="top" background="#222222" color="#FFFFFF" font_size="16" text_align="left" max_width="300" radius="5" shadow="no" behavior="hover" class=""]マウスオーバーしてツールチップを表示[/su_tooltip]

非公開

非公開のメモ

[su_private class=""]プライベートメモ[/su_private]

YouTube

YouTubeの貼り付け

[su_youtube url="" width="600" height="400" responsive="yes" autoplay="no" mute="no" title="" class=""]

YouTube 詳細設定

YouTube の動画プレーヤーの高度な設定

[su_youtube_advanced url="" playlist="" width="600" height="400" responsive="yes" controls="yes" autohide="alt" autoplay="no" mute="no" loop="no" rel="yes" fs="yes" modestbranding="no" theme="dark" wmode="" playsinline="no" title="" class=""]

Vimeo

Vimeo 動画

[su_vimeo url="" width="600" height="400" responsive="yes" autoplay="no" mute="no" dnt="no" title="" texttrack="" class=""]

Dailymotion

Dailymotion 動画

[su_dailymotion url="" width="600" height="400" responsive="yes" autoplay="no" background="#FFC300" foreground="#F7FFFD" highlight="#171D1B" logo="yes" quality="380" related="yes" info="yes" title="" class=""]

音声

カスタムオーディオプレーヤー

[su_audio url="" width="100%" autoplay="no" loop="no" class=""]

動画

カスタム動画プレーヤー

[su_video url="" poster="" title="" width="600" height="300" controls="yes" autoplay="no" loop="no" class=""]




テーブル テーブル
テーブル テーブル
[su_table responsive="no" alternate="yes" fixed="no" class=""]<table>
<tr>
→  <td>テーブル</td>
→  <td>テーブル</td>
</tr>
<tr>
→  <td>テーブル</td>
→  <td>テーブル</td>
</tr>
</table>[/su_table]

CSV テーブル

CSVのフォール

[su_csv_table url="" delimiter="," header="no" responsive="no" alternate="yes" fixed="no" class=""]

パーマリンク

指定された投稿/ページのパーマリンク

[su_permalink id="1" target="self" title="" class=""]

会員

ログインメンバーのみのコンテンツ

このコンテンツは登録ユーザーにだけ許可されています。ログインしてください。
[su_members message="このコンテンツは登録ユーザーにだけ許可されています。%login%してください。" color="#ffcc00" login_text="ログイン" login_url="" class=""]ログインメンバー向けコンテンツ[/su_members]

ゲスト

ゲストのみのコンテンツ

このコンテンツは、ログインしていない閲覧者のみに表示されます
[su_guests class=""]このコンテンツは、ログインしていない閲覧者のみに表示されます[/su_guests]

RSS フィード

フィード取込み

[su_feed url="" limit="3" target="self" class=""]

メニュー

名前によるカスタムメニュー

[su_menu name="" class=""]

サブページ

サブページのリスト

[su_subpages depth="1" p="" class=""]

兄弟

現在のページ兄弟のリスト

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

Google map

Google マップ

[su_gmap width="600" height="400" responsive="yes" address="" zoom="0" title="" class=""]

Image carousel

[su_image_carousel source="none" limit="20" slides_style="default" controls_style="dark" crop="4:3" columns="1" adaptive="yes" spacing="yes" align="none" max_width="none" captions="no" arrows="yes" dots="yes" link="none" target="blank" autoplay="5" speed="medium" image_size="large" outline="yes" random="no" class=""]

ギャラリー

カスタマイズ可能な画像ギャラリー

[su_custom_gallery source="none" limit="20" link="none" target="self" width="90" height="90" title="hover" class=""]

投稿

カスタム投稿はカスタマイズ可能なテンプレートを用いることで、直感的な投稿へのリンクを表示します。

トビログ テクノロジー単発記事

急にdocker-compose: No such file or directory とでてしまう

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 こんにちは!トビログ管理人のとびう […]

コメントなし

時々錯誤 7/18 多分、駄文

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 難解な算数の問題を解くところから始 […]

コメントなし

写真から天気を教えてくれるiOSアプリ ウェザフォトを紹介!

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 こんにちは! この度、写真から天気 […]

コメントなし

時々錯誤 7/12 時が過ぎるのは

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車  時が過ぎるのは早いものであるが、 […]

コメントなし

時々錯誤 6/21 上手いことを

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 昔から、気を病むと物語の世界に逃げ […]

コメントなし

時々錯誤 5/29 案山子

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 矯正器具なしで運転ができるほどの視 […]

コメントなし

Laravel 10でWebアプリケーションポートフォリオを作れる本を出品しました

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 こんにちは!トビログ管理人のとびう […]

コメントなし

写真から天気を知れる!iOSアプリ、ウェザフォト

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 この写真を撮った時、どんな天気だっ […]

コメントなし

みんなでyoloアノテーションができるツール「みんなでアノテーション」を作成しました

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 このたび、トビログでは、みんなでy […]

コメントなし
過去の写真からその日の天気を教えてくれるアプリ ウェザフォトを紹介します

写真から天気を予測するアプリを作成しました

Tobilog-Selection・Laravel 8にてenvファイルが反映されない場合の対処法・現代錯誤 吾輩はトビウオである。名前はトビログ。・久々の鉄道模型 SBB 簡易寝台車 あの写真の天気の日、どんな天気だっ […]

コメントなし
[su_posts template="templates/default-loop.php" id="" posts_per_page="10" post_type="post" taxonomy="category" tax_term="" tax_operator="IN" author="" meta_key="" offset="0" order="DESC" orderby="date" post_parent="" post_status="publish" ignore_sticky_posts="no"]

ダミーテキスト

テキストプレースホルダー

Etiam in sapien et arcu ultricies rhoncus sed vitae libero. Praesent tempus urna vel tincidunt viverra. Duis sodales augue mi, commodo aliquam justo laoreet ac. Fusce consequat, justo non dictum condimentum, massa ex iaculis nulla, id facilisis dui massa eget orci. Vivamus varius nunc orci, at suscipit quam euismod a. Vestibulum nec velit luctus, lacinia ex in, aliquam elit. Curabitur dictum, sem ac imperdiet accumsan, diam risus egestas arcu, vel tincidunt enim arcu a augue. Duis lobortis, diam vitae mollis blandit, augue lorem vestibulum sem, a iaculis erat metus nec metus. Curabitur id mauris mi. Morbi sagittis vehicula lobortis. Curabitur nisi tortor, convallis non condimentum eu, consequat in orci. Pellentesque luctus aliquam purus, ullamcorper ullamcorper nisl rhoncus a. Nunc id sollicitudin eros. Morbi a justo non neque congue blandit. Praesent ut aliquet sapien. Quisque et malesuada risus, quis imperdiet mauris.

[su_dummy_text what="paras" amount="1" cache="yes" wrapper="yes" class=""]

ダミー画像

ランダムな画像による画像プレースホールダー

ダミー画像
[su_dummy_image width="500" height="300" theme="any" class=""]

アニメーション

アニメーションのラッパーです。任意のネストされた要素はアニメーションになります。

アニメーションコンテンツ
[su_animate type="bounceIn" duration="1" delay="0" inline="no" class=""]アニメーションコンテンツ[/su_animate]

メタデータ

投稿メタ

[su_meta key="" default="" before="" after="" post_id="" filter=""]

ユーザーデータ

ユーザーデータ

[su_user field="display_name" default="" before="" after="" user_id="" filter=""]

投稿データ

その投稿の投稿データ

WordPress shortcodes ultimate ショートコード一覧
[su_post field="post_title" default="" before="" after="" post_id="" post_type="post" filter=""]

テンプレート

テーマのテンプレート

[su_template name=""]

QR コード

高度な QR コードジェネレータ

[su_qrcode data="" title="" size="200" margin="0" align="none" link="" target="blank" color="#000000" background="#ffffff" class=""]

スケジューラ

指定した期間にコンテンツを表示することができます。

[su_scheduler time="" days_week="" days_month="" months="" years="" alt=""]スケジュールされたコンテンツ[/su_scheduler]

おわりに

筆者はこの「トビログ」の管理人をやっているのですが、こんなにも多くのショートカットがあるなんて知りませんでした!今後はショートカットを活用し、みなさんにもっと楽しんでいただけるようなブログを書いていきます!!

とびうお
ブログ管理人です!
swimaneというアプリをリリースしました!

コメント

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