STILEで利用できるショートコードの使い方

286views

STILEで利用できるショートコードの使い方のアイキャッチ画像

今回は、WordPressテーマ「STILE」で利用できるショートコードの使い方を解説していきます。

ビジュアルエディタでショートコードを呼び出す

ビジュアルエディターのツールバーで、ショートコードを簡単にできるようになっています。

ツールバーが3段ではなく1段のみになっている場合、←これをクリックするとツールバーが3段になります。

内部リンクブログカード

STILEでは、以下のような内部リンクブログカードがショートコードで生成できます。

記事ID、URL、スラッグいずれかで記事を呼び出すことができます。

[card id="20"]
[card url="https://wp-theme-stile.com/feature-stile/"]
[card slug="feature-stile"]

吹き出し

以下のような吹き出しを表示できます。

SHIROMASHIROMA

なんて素敵なデザインのテーマ!

[talk pos="left" name="SHIROMA" img="https://wp-theme-stile.com/wp/wp-content/uploads/2020/05/human-icon.png"]

なんて素敵なデザインのテーマ!

[/talk]

「吹き出し管理」であらかじめ登録しておけば、簡単にアイコン画像と名前を呼び出せます。

[talk set="shiroma" pos="left"]

なんて素敵なデザインのテーマ!

[/talk]

pos="left"pos="right"に変更すると向きを変えることもできます。

レイアウトも自由自在ですってよ!

SHIROMASHIROMA
[talk set="shiroma" pos="right"]

なんて素敵なデザインのテーマ!

[/talk]
SHIROMASHIROMA

なんて素敵なデザインのテーマ!

他の色も設定できます。

[talk set="shiroma" pos="left" color="pink"]

なんて素敵なデザインのテーマ!

[/talk]

横スクロールできるテーブル

画面サイズよりも幅が広くなるテーブルは、以下のコードで横スクロールできるようになります。

横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル
横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル
横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル横に長くなるテーブル
[table]
<table>
〜省略〜
</table>
[/table]

開閉できるボックス

クリックでコンテンツを表示・非表示切り替えられるボックスを生成するショートコード。

この中に記事の中身を入れます。

[toggle text="ネタバレ"]

この中に記事の中身を入れます。

[/toggle]

端末によって表示を変えるショートコード

[mobile]
ここの文章はスマホのみで表示されます。
[/mobile]

ここの文章はPCのみで表示されます。

[pc]
ここの文章はPCのみで表示されます。
[/pc]

点数を付けて星表示

点数を付けて星を表示させるショートコードもあります。

3.5
[rating star="3.5"]

レビュー記事とかで便利です。

おすすめWordPressテーマ

No.1
STILE

デザイン設定が豊富なWordPressテーマ。
プラグインでブロックエディターにも対応。
アドセンスの表示が楽に行えます。

No.2
STILE

高速化機能でページの読み込みを高速化。
カラー設定が豊富で好みのスタイルにできます。
便利なショートコードも多数搭載しています。

No.3
STILE

WordPressテーマ「STILE」なら、カテゴリー周りのカスタマイズも可能。
カテゴリー一覧に好きなテキストを表示させたり、カテゴリーカラーを設定して、記事のカテゴリーによって色を変えることも可能です。

WordPressテーマ「STILE(スティーレ)」14,300円(税込)

CTA画像

デザイン設定が豊富なWordPressテーマ。
記事執筆が効率化できる便利な機能を多数搭載。
ブロックエディター用プラグインも配布しています。

コメントする

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

2 + 3 =