STORK SEでは、従来のOPENCAGE製テーマのショートコードも利用できます。
関連記事リンク
ショートコードのパラメータで記事IDを入力することで、サイト内リンクをサムネイル付きで表示できます。
▼投稿リンク
▼固定ページリンク
記事を取得できませんでした。記事IDをご確認ください。
postidのパラメータで投稿IDを入力すれば、投稿記事のリンクを表示でき、pageidのパラメータで固定ページIDを入力すれば、固定ページのリンクを表示できます。
ショートコードの書き方
▼投稿リンク
[kanren postid="123"]
▼固定ページリンク
[kanren pageid="123"]
関連記事リンクのオプション
その他、下記のようなパラメータを追記して表示内容を指定することもできます。
| date=”none” | 投稿日・更新日を表示しない。 |
| label=”none” | 「関連記事」ラベルを表示しない。 |
| labeltext=”ラベルテキスト” | 「関連記事」ラベルの表記を変更する。 |
| target=”on” | リンクを別ウインドウで開く。 |
新着 / カテゴリー / タグごとの記事リスト
ショートコードを入力するだけで、下記のように新着順の記事リストを表示できます。
ショートコードの書き方
[postlist]
また、catidのパラメータでカテゴリーIDを指定すれば、カテゴリーごとの記事のリストを表示でき、tagidのパラメータでタグIDを指定すれば、タグごとの記事のリストを表示できます。
ショートコードの書き方
▼カテゴリーごとの記事リスト
[postlist catid="1"]
▼タグごとの記事リスト
[postlist tagid="1"]
記事リストのオプション
その他、下記のようなパラメータを追記して表示内容を指定することもできます。
| type=”card” | 記事リストをカード型で表示できます。 |
| show=”4″ | 記事リストの表示件数を指定できます。 |
| ttl=”none” | カテゴリー名などのタイトルを非表示にできます。 |
| btntext=”もっと見る” | 記事リストの下にリンクボタンを表示できます。 ※新着記事リストの場合は「btnlink」の追記が必要 |
| btnlink=”リンク先URL” | リンクボタンのリンク先を指定できます。 |
ショートコードの書き方
[postlist type="card" show="4" btntext="もっと見る" btnlink="ここにリンク先のURL"]
アコーディオン
コンテンツを開閉できるアコーディオンショートコードが利用可能です。
アコーディオンの中の本文です。補足説明であまり空間を使いたくない場合に便利です。
ショートコードの書き方
[open title="ここにラベルテキストを入力"]
ここにアコーディオン内のコンテンツを記述。
[/open]
補足説明
補足説明として、テキストなどのコンテンツを装飾枠で囲むことができます。
補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。
注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。
シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。
ショートコードの書き方
[aside]
補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。
[/aside]
[aside type="warning"]
注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。
[/aside]
[aside type="boader"]
シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。
[/aside]
ボックス
ラベル付きのボックスでテキストなどのコンテンツを囲むことができます。
ショートコードの書き方
[box class="site_color" title="ここにタイトル"]ここにコンテンツを記載[/box]
classのパラメータでボックスカラーを指定して、titleのパラメータにはラベルテキストを入力します。
title=”ここにタイトル” の箇所を削除すれば、ラベルなしのボックスで表示できます。
指定できるボックスカラーは下記の通りです。
| class=”site_color” | ここにタイトル ここにコンテンツを記載 |
| class=”blue_box” | ここにタイトル ここにコンテンツを記載 |
| class=”red_box” | ここにタイトル ここにコンテンツを記載 |
| class=”yellow_box” | ここにタイトル ここにコンテンツを記載 |
| class=”green_box” | ここにタイトル ここにコンテンツを記載 |
| class=”pink_box” | ここにタイトル ここにコンテンツを記載 |
| class=”glay_box” | ここにタイトル ここにコンテンツを記載 |
| class=”black_box” | ここにタイトル ここにコンテンツを記載 |
ボックスのオプション
その他、下記のようなパラメータを追記して表示内容を指定することもできます。
| type=”simple” | ここにタイトル ここにコンテンツを記載 |
| type=”ttl” | ここにタイトル ここにコンテンツを記載 |
ショートコードの書き方
[box class="site_color" title="ここにタイトル" type="simple"]ここにコンテンツを記載[/box]
ボタン
テキストリンクをショートコードで囲むことでリンクボタンで表示できます。
ショートコードの書き方
[btn]デフォルトボタン（リンクテキストにする）[/btn]
classのパラメータを追記して、ボタンの種類を変更することもできます。
ショートコードの書き方
[btn class="big"]デフォルトビッグボタン（リンクテキストにする）[/btn]
その他、指定できるボタンの種類は下記の通りです。
| class=”small” | |
| class=”simple” | |
| class=”rich_yellow” | |
| class=”rich_pink” | |
| class=”rich_orange” | |
| class=”rich_green” | |
| class=”rich_blue” | |
| class=”stk-shiny-button” | |
| class=”stk-bound-button” |
ショートコードの書き方
[[btn class="rich_yellow stk-shiny-button"]立体的なボタン（黄色）＋光るボタン[/btn]]例えば、class=”simple big” のように、複数のクラスを指定することもできます。
吹き出し
アイコン画像と吹き出しテキストを組み合わせて、会話形式のコンテンツを表示できます。
ショートコードの書き方
[voice icon="https://sample.org/wp-content/uploads/2024/08/image01.jpg" name="名前" type="l"]吹き出しの中のコメント。[/voice]
[voice icon="https://sample.org/wp-content/uploads/2024/08/image02.jpg" name="名前" type="r"]吹き出しの中のコメント。[/voice]
iconのパラメータにアイコン画像ファイルのURLを入力して、nameのパラメータにはアイコンの名前を入力します。また、typeのパラメータでアイコン画像と吹き出しテキストの左右配置を入れ替えることもできます。
吹き出しのオプション
その他、下記のようなパラメータを追記して表示内容を指定することもできます。
| type=”l” | アイコン左側 |
| type=”r” | アイコン右側 |
| type=”big” | アイコンを大きく表示。 |
| type=”fb” | 吹き出し背景色（青色） |
| type=”line” | 吹き出し背景色（緑色） |
| type=”icon_yellow” | アイコン枠色（黄色） |
| type=”icon_red” | アイコン枠色（赤色） |
| type=”icon_blue” | アイコン枠色（青色） |
| type=”icon_black” | アイコン枠色（黒色） |
ショートコードの書き方
[voice icon="https://sample.org/wp-content/uploads/2024/08/image01.jpg" name="名前" type="l big"]吹き出しの中のコメント。[/voice]
画面サイズに応じて改行
このショートコードを入力するとソースコードにbrタグが挿入され、それぞれ以下の条件で改行（brタグ）が機能するように設定しています。
- PCとタブレットで改行［pcbr］・・・横幅768px以上でのみ改行される
- モバイルで改行［spbr］・・・横幅767px以下でのみ改行される
ショートコードの書き方
▼PCとタブレットで改行
[pcbr]
▼モバイルで改行
[spbr]
下記の表示サンプルをPCとスマホで確認すると、それぞれで改行結果が異なることが確認できるかと思います。
ブロックツールバーから、画面サイズに応じて改行を指定するショートコードを挿入でき、
ここはPCとタブレットのみで改行しています。
これは段落ブロックです。
ここはスマホのみで改行しています。
このページで紹介しているショートコードの機能の多くは、標準ブロックもしくはカスタムブロック（STORK BLOCKS）で代用できます。