本になりました「失礼のない英語の話し方」発売中

【SANGO】ショートコードの使い方

SANGOのショートコード

ショートコードは、面倒なHTMLの記述を簡単な短いコード(シュートコード)で書けるようにしたものです。プラグインやテーマ独自で提供しているものがあります。自分で作ることもできますが、ここではテーマSANGOが提供しているショートコードの使い方を説明します。

注意

SANGOのバージョンアップにより、ブロックエディターにSANGOのオリジナルブロックが追加されて、ここで紹介するショートコードを使わなくても同様のデザインが実現できるようになっています。ブロックエディターをご利用の方はそちらの利用をお勧めします。

尚、2021/10/17時点の最新バージョンは次の通りです。

SANGO V2.10.7

SANGO Gutenberg V1.37.1(こちらのプラグインが必要です)

見出し

見出しはショートコードではないですが、クラス名の適用によって見出しを装飾できるのでここで紹介します。

ここのタイトルは背景をSANGOのオリジナルカラーで塗りつぶしています。使い方は、エディターの見出しブロックで見出しを作り、そのあとHTMLの編集にして簡単なコードを追加をします。この表示のためのコードは次の通りです。

<h2 class="hh hh5 pastel-bc">見出し</h2>

上記はh2タグを使っていますが、pタグでも同じように装飾することができます。(下記参照:別のデザイン)

小見出し

この表示のためのコードは次の通り。

<p class="hh hh4 main-c main-bdr">小見出し</p>

上記の2種類を含めて36種類の見出しデザインが紹介されています。全てのデザインが見たい場合はこちらをご覧ください。

SANGOのショートコード(見出し一覧)SANGOのショートコード(見出し一覧)

ボックス(デザイン系)

まずはボックスです。補足説明のように目的に合わせたボックスや、いろいろな用途で使えるボックスがあります。実際のデザインと、そのショートコードを合わせて紹介します。

補足説明(MEMO)

MEMO
これはメモです

この表示のためのショートコードは次の通り。

[memo title="MEMO"]これはメモです[/memo]

注意書き(注意)

注意
これは注意です

この表示のためのショートコードは次の通り。

[alert title="注意"]これは注意です[/alert]

ボックス

  • その1
    補足1
  • その2
    補足2

この表示のためのコードは次の通り。

[box class="box4"]<ul><li>その1<br>補足1</li>
<li>その2<br>補足2</li></ul>[/box]

この例は箇条書きをボックスの中に入れていますが、次の例のように広告(外部リンク)など、なんでもボックスで囲むことができます。

ひと休み 独自ドメインが欲しい方へ

この表示のためのコードは次の通り。

[box class="box26" title="ひと休み 独自ドメインが欲しい方へ"](省略)[/box]
MEMO
SANGOの公式サイトには、上記を含めて33種類のボックスデザインが紹介されています。

箇条書き

箇条書きもボックスになりますが、番号などのデザインも変えられるものを箇条書きとしてまとめられています。

番号を白抜き丸数字にして、メインカラーの枠で囲んだものです。

  1. その1
  2. その2

この表示のためのコードは次の通り。

[list class="ol-circle li-mainbdr main-bc-before"]<ol><li>その1</li><li>その2</li></ol>[/list]

色をアクセントカラーにしたものです。

  1. その1
  2. その2

この表示のためのコードは次の通り。

[list class="ol-circle li-accentbdr acc-bc-before"]<ol><li>その1</li><li>その2</li></ol>[/list]

番号のデザインと背景色を変えたものです。

  • その1
  • その2

この表示のためのコードは次の通り。

[list class="li-niku li-mainbdr main-c-before"]<ul><li>その1</li><li>その2</li></ul>[/list]
MEMO
SANGOの公式サイトには、上記を含めて38種類の箇条書きデザインが紹介されています。

ボックス(リンク系)

関連記事/サイトへのリンク

関連記事へのリンクです。

おすすめのテーマ【おすすめのテーマ】(WordPress)それぞれの特徴比較

この表示のためのコードは次の通り。id は投稿IDです。idは、エディターで記事を編集するときのURLに、post=nnn で表示されているものです。

[kanren id="346"]

他サイトへのリンクです。

参考 失礼のない英語の話し方icSPEng アイシースピン

この表示のためのショートコードは次の通り。
サンプルのためリンク先は自サイトです。target=”_blank” を使うと新しいタブで開きます。

[sanko href="https://icspeng.com/" title="失礼のない英語の話し方" site="icSPEng アイシースピン" target="_blank"]
MEMO
SANGOの公式サイトには、上記を含めて4種類のデザインが紹介されています。

ボタン

他の場所へのリンクをボタンで行う場合のデザインです。

ストーリー

このボタンを表示するためのショートコードは次の通り。

プロフィール

このボタンを表示するためのショートコードは次の通り。

MEMO
SANGOの公式サイトには、上記を含めて54種類のボタンデザインが紹介されています。

機能デザイン関連

ここでは、記事のデザイン性を向上させるものを紹介します。線や吹き出しなどです。


この表示のためのショートコードは次の通り。

[sen]
MEMO
SANGOの公式サイトには、点線と合わせて2種類のデザインが紹介されています。

吹き出し

玲奈

玲奈です

この表示のためのショートコードは次の通り。

[say name="玲奈" img="https://icspeng.com/wp-content/uploads/2021/04/icsarena1.jpg"]玲奈です[/say]

同じ吹き出しですが、右に顔があるものです。

ジョーです

ジョー先生

この表示のためのショートコードは次の通り。

[say name="ジョー先生" img="https://icspeng.com/wp-content/uploads/2021/04/icsajoe1.jpg" from="right"]ジョーです[/say]

アコーディオン機能

更新履歴など必要な時だけ見てほしいものを折りたたんでおくときに使えます。

2021/06/14 この記事を追加

この表示のためのショートコードは次の通り。

[open title='更新履歴']2021/06/14 この記事を追加[/open]

横並び2列

横並びはエディターの機能(カラム)でできますが、1行の場合はこちらが手軽で便利です。

This is Yoh.
こちらは洋さんです。

この表示のためのショートコードは次の通り。

[yoko2 responsive][cell]This is Yoh.[/cell][cell]こちらは洋さんです。[/cell][/yoko2]
MEMO
SANGOの公式サイトには、横並び3列と合わせて2種類が紹介されています。

その他

関連記事を出力

同一カテゴリー/タグの一覧、特定カテゴリーだけの新着記事の一覧ができます。新着順ではなく投稿順にすることもできます。

SANGOのショートコード(見出し一覧)SANGOのショートコード(見出し一覧)SANGOのショートコード【SANGO】ショートコードの使い方

この表示のためのコードは次の通り。投稿IDが4(ノウハウ)で記事数2を指定しています。これは新着順ですが、下の例のように order=”ASC” を追加すると投稿順になります。

[catpost catid="4" num="2"]
[catpost catid="4" num="2" order="ASC"]
MEMO
SANGOの公式サイトには、上記を含めて3種類の記事出力が紹介されています。

PC/モバイル/特定出力

PCのみで表示しモバイルでは表示しない、またはその逆、あるいは特定のカテゴリー/タグの記事でのみ表示させることができます。

例えば、このブログのストーリーとレッスンのみに「英語で会話をしたいならこちらのサイトがおすすめ!」と表示させることができます。ウイジェットに次のコードを記入します。カテゴリーIDが2と3(ストーリーとレッスン)のときに表示させる設定です。

[category id="2,3"]英語で会話をしたいならこちらのサイトがおすすめ![/category]
MEMO
SANGOの公式サイトには、上記を含めて4種類が紹介されています。

ソースコードボックス

HTML
[catpost catid="3" num="2"]

この表示のためのショートコードは次の通り。

[codebox title="HTML"]<pre><code>宴会で使う英語乾杯などの宴会で使う英語を紹介!初心者向け英会話観光客との会話どちらから?と外国人観光客との会話!初心者向け英会話</code></pre>[/codebox]

エディターのコードブロックを使ってもソースコードを表示できますが、上記の2つを見比べると枠の表示が違います。「HTML」というタイトルも出せます。

その他

そのほかに、「タイムライン機能」、「画像上に文字をのせる」もの、「YouTube埋め込みをレスポンシブにする」もの、「レビューボックス」がありますが今回は省略します。

まとめ

ショートコードは、面倒なHTMLの記述が不要なのでとても便利です。テーマが提供しているショートコードだけでもデザイン性の高いブログが作れます。有効に使いましょう。
使いたいデザインがあれば、ショートコードをコピー&ペーストしてプレビューすれば同じように表示されます。一度使ってみると、その使い方と便利さがより実感できます。

ここで紹介したものは主にこのサイトで利用しているもので、SANGOのショートコードの一部です。もっと詳しく知りたい方はこちらのSANGO公式サイトをご覧ください。

参考 SANGOカスタマイズガイドサルワカ
SANGOのショートコード
桂浜 高知