WordPressテーマ「ストークSE」登場!

テーマ専用ショートコード

ショートコード

STORK SEでは、従来のOPENCAGE製テーマのショートコードも利用できます。

ほとんどの機能はブロックで使用できます

このページで紹介しているショートコードの機能の多くは、標準ブロックもしくはカスタムブロック(STORK BLOCKS)で代用できます。

関連記事リンク

ショートコードのパラメータで記事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とタブレットのみで改行しています。

これは段落ブロックです。
ここはスマホのみで改行しています。

▼投稿下部のウィジェットエリア

▼投稿下部のウィジェットエリア

さらに洗練された
究極のモバイルファーストテーマ

WordPressテーマSTORK SEストークSE

これまでに5万回以上ダウンロードされたWPテーマのシリーズ最新版「STORK SE」です。さらに洗練されたデザイと機能で「誰が使っても美しいデザイン」のサイトを作成できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ABOUT US
アバター画像
OPENCAGEテーマ開発者
オープンケージは「誰もが簡単に美しいデザインのサイトを」をテーマにデザイン性に優れたテーマを配信しています。