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"]

吹き出し

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

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

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

[/talk]

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

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

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

[/talk]

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

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

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

[/talk]

他の色も設定できます。

[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"]

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