SANGOのショートコードでできること

このページではSANGOで使用することのできる「ショートコード」を一覧で紹介していきます。

NEWタイムライン機能

ver1.4のアップデートで以下のようなタイムラインをショートコードで簡単挿入できるようになりました。

STEP.1

SANGOのデモサイトを見る

パソコンとスマホ、両方からSANGOのデモサイトをチェックすることをおすすめします。

STEP.2

SANGOを購入する

BOOTHにてSANGOテーマを購入ができます。購入者様が運営するサイトであれば、複数サイトにご利用頂くこともできます。

BOOTHへ

STEP.3

SANGOをインストールする

WordPressでのテーマのインストール手順は簡単です。具体的な手順は、カスタマイズガイドをご覧ください

完了！

SANGOを楽しみましょう！

NEWアコーディオン機能

ver1.4のアップデートで、クリックすると中身が表示される「アコーディオン機能」をショートコードで簡単挿入できるようになりました。

クリックしてみよう

NEWレビュー用ボックス

ver1.2のアップデートで以下のようなレビュー用ボックスをショートコードで簡単挿入できるようになりました。

1. 関連記事を出力する（横長）

WordPressテーマ「SANGO」30の魅力

[kanren id="投稿ID"]

ブログ内の記事へのリンクを貼るときにのみ使用できます。id=の中には投稿IDを入力します（投稿IDは、投稿編集ページのURLを見れば確認できます。post=◯◯の数字が投稿IDとなります。）

2. カードタイプの関連記事を出力

WordPressテーマ「SANGO」30の魅力

[card id="投稿ID"]

こちらもブログ内の記事へリンクを貼りたいときに使用します。半角カンマ（,）区切りで複数の投稿IDを指定できます。
cardをcard2に変えると、下のサンプルようなスタイルのカードを挿入できます（Ver1.4〜追加された機能です）。

2023/02/07WordPressテーマ「SANGO」30の魅力

3. 他サイトへのリンクを出力

参考 力尽きたときの簡単レシピサルワカ

[sanko href="リンク先のURL" title="記事のタイトル" site="サイト名"]

他サイトへのリンクを貼りたいときはこちらを使用します。

4. 線を引く

記事の途中などで横に線を引いて区切りたいときにはこちらを使います。

5. 点線を引く

さきほどの点線バージョンです。

6. 補足説明

[memo title="MEMO"]ここに文章[/memo]

補足したい文章をショートコードで挟んで使用します。このショートコード内でさらに別のショートコードを使用することもできます。title=内の「MEMO」という部分は自由に書き換えることができます。

7. 注意書き

[alert title="注意"]ここに文章[/alert]

注意書きをショートコードではさんで使用します。タイトル部分は自由に書き換えることができます。

8. ソースコードボックス

<div>TEST</div>

[codebox title="HTML"]<pre><code>ソースコード</code></pre>[/codebox]

こちらはあまり使用する方は多くないかもしれませんが…。ソースコードをユーザーのために表示するボックスです。<pre>と<code>タグと合わせて使用します。title=""に記載した文字列がボックス上のタブとして表示されます（空欄だとタブは表示されません）。HTMLを貼り付ける場合には、HTMLエスケープツールなどでエスケープした上でタグを貼り付けるようにしましょう。

9. 吹き出し（左に顔）

[say name="サルワカくん" img="画像のURL"]ここに文章[/say]

名前（name="~"）は省略可能です。いちいち画像のURLを貼るのは面倒だと思うので、画像のURLまで含めたショートコードをプラグイン「AddQuicktag」に登録しておくか、メモ帳などに控えておくと良いでしょう。

10. 吹き出し（右に顔）

[say name="サルワカくん" img="画像のURL" from="right"]ここに文章[/say]

from="right"という文字列を加えると、右側から吹き出しが伸びるようになります。

11. 横並び2列

[yoko2 responsive]
1列目：画像・文章などをここに
2列目：画像・文章などをここに
[/yoko2]

画像や文章、ボックスなどなどを横並び2列で表示できるボックスです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。

12. 横並び3列

[yoko3 responsive]
1列目：画像・文章などをここに
2列目：画像・文章などをここに
3列目：画像・文章などをここに
[/yoko3]

さきほどの横並び3列バージョンです。ブラウザサイズが767px以下になると、縦1列に並ぶレスポンシブ仕様となっています。responsiveというショーコード内の文字列をまるっと消すと、ブラウザサイズに関わらず常に横3列で並んで表示されます。

13. YouTubeをレスポンシブで埋め込み

[youtube]
YouTubeのURL
[/youtube]

WordPressで記事にYouTubeを埋め込む場合、スマホで見た際に動画の左右が若干切り取られて表示されてしまいます。このショートコードで埋め込みコードやURLを挟むことで、それを防ぐことができます

14. モバイルでのみ表示

[mobile]
ここにモバイルでのみ表示させるもの
[/mobile]

こちらのショートコードではさんだものは、PCでは表示されず、モバイル（スマホ/タブレット）でのみ表示されるようになります。

15. PCでのみ表示

[pc]
ここにPCでのみ表示させるもの
[/pc]

こちらのショートコードではさんだものはモバイルでは表示されず、PCでのみ表示されます。

16. 画像上に文字をのせる

GOOD INNOVATION

[texton img="画像のURL" title="画像上にのせる文字"]

こちらのショートコードで「画像のURL」と「テキスト」を指定すると、画像上の中央に簡単に文字を配置することができます。

17. 指定したカテゴリーIDの記事を好きな数だけ出力

SANGOユーザーさんの声 SANGOのショートコードでできること ウィジェットを使いこなす：広告の設置もカンタン

[catpost catid="カテゴリーID" num="出力する記事数"]

「カテゴリーID」と「出力する記事数（例：num="6"）」を指定するだけで、そのカテゴリーの記事へのリンクカードが指定数分だけ出力されます。初期設定だと公開日が近い記事順に表示されます。

参考：カテゴリーIDの調べ方

オプション

[catpost~略~　type="card"]とショートコード内に加えるとリンクカードのデザインが縦長の影付きのものになります。

1カラム（サイドバーなし）を選んだときの表示サンプル

また、[catpost~略~　orderby="rand"]と加えると、指定したカテゴリーの中から記事がランダムに出力されるようになります（初期設定だと日付順）。

18. ボタン

ショートコードの種類が多数あるため、別記事にまとめました。

非公開: 40種類以上のボタンを用意

19. 箇条書き

同じく多数の種類があるため、別記事にまとめました。

非公開: SANGOの箇条書き（20種類以上）と引用のデザイン

20. ボックス

同じく多数の種類があるため、別記事にまとめました。

SANGOで約30種類のボックスを挿入しよう

その他見出しなど

文字の装飾や、SANGOオリジナル見出しの挿入はショートコードではなく、ビジュアルエディタのスタイル設定から行うことができます。詳しくはこちらの記事をどうぞ。

SANGOでテキストを強調する：装飾機能でできることを紹介