ショートコードの使用方法

2018.08.272018.07.15エディタ

ショートコードは複雑な HTMLマークアップをシンプルな方法で記述することができる WordPress の便利なツールです。

「コンテンツを豊かにしたいが、HTML の記述方法が分からない」という人にとっては非常に助かる機能です。

スクラッチで用意しているショートコード

当テーマスクラッチでは以下のショートコードを用意しています。

テーマUL
チェックUL
テーマOL
カラーテキスト
アンダーライン
注釈
ボーダー
タイトルボックス
追加情報ボックス
注意警告ボックス
大きいリンク
出典（引用）リンク
関連記事リンク
可愛いボタン
上品なボタン
吹き出し
ブログカード
並列画像
ランキング

text-editor-shortcode-buttons

クリックで画像が大きくなります

「アンダーラインテスト」で例を示すと、[underline]アンダーラインテスト[/underline]と記述するだけです。

実際に以上を記事内に書き込むと以下のように表示されます。

アンダーラインテスト

全てのショートコードをごく簡単に説明していきます。

テーマUL

[ul]
あいうえお
かきくけこ
さしすせそ
[/ul]

↓

あいうえお
かきくけこ
さしすせそ

デザイン設定方法：リスト（ul）

チェックUL

[check-ul]
あいうえお
かきくけこ
さしすせそ
[/check-ul]

↓

あいうえお
かきくけこ
さしすせそ

デザイン設定方法：チェックリスト（ul）

テーマOL

[ol]
あいうえお
かきくけこ
さしすせそ
[/ol]

↓

あいうえお
かきくけこ
さしすせそ

デザイン設定方法：ナンバーリスト（ol）

カラーテキスト

[color]あいうえお[/color]

↓

あいうえお

デザイン設定方法：カラーテキスト

アンダーライン

[underline]あいうえお[/underline]

↓

あいうえお

デザイン設定方法：アンダーライン

注釈

[note]あいうえお[/note]

↓

あいうえお

ボーダー

[border]
あいうえお
かきくけこ
さしすせそ
[/border]

↓

あいうえお
かきくけこ
さしすせそ

タイトルボックス

[title-box]
あいうえお
かきくけこ
さしすせそ
[/title-box]

↓

あいうえお
かきくけこ
さしすせそ

デザイン設定方法：タイトルボックス

追加情報ボックス

[info]
<b>補足</b>
あいうえお
かきくけこ
さしすせそ
[/info]

↓

補足
あいうえお
かきくけこ
さしすせそ

注意警告ボックス

[warning]
<b>注意</b>
あいうえお
かきくけこ
さしすせそ
[/warning]

↓

注意
あいうえお
かきくけこ
さしすせそ

大きいリンク

[big-link]<a href=”https://eigo-shutoku.com/” target=”_blank”>英字新聞社で働くプログラマのブログ</a>[/big-link]

↓

英字新聞社で働くプログラマのブログ

デザイン設定方法：大きいリンク

出典（引用）リンク

[ref-link]出典：<a href=”https://eigo-shutoku.com/” target=”_blank”>英字新聞社で働くプログラマのブログ</a>[/ref-link]

↓

出典：英字新聞社で働くプログラマのブログ

デザイン設定方法：出典（引用）リンク

可愛いボタン

[cute-button]<a href=”https://eigo-shutoku.com/” target=”_blank”>英字新聞社で働くプログラマのブログ</a>[/cute-button]

↓

英字新聞社で働くプログラマのブログ

デザイン設定方法：可愛いボタン

上品なボタン

[refined-button]<a href=”https://eigo-shutoku.com/” target=”_blank”>英字新聞社で働くプログラマのブログ</a>[/refined-button]

↓

英字新聞社で働くプログラマのブログ

デザイン設定方法：上品なボタン

吹き出し

[voice image=’https://wp-scratch.com/wp-content/uploads/2018/06/female-good.jpg’ name=’スクラッチちゃん’]一切の勉強なしで、記事の作成を手っ取り早く始めたい！[/voice]

↓

一切の勉強なしで、記事の作成を手っ取り早く始めたい！

デザイン設定方法：吹き出し

吹き出しの入力項目

吹き出しには以下の入力項目があります。

image（必須）
name
side
type

image は吹き出しのアイコンで使用する画像の URL を記入してください。必須なので、存在が確認できない場合は吹き出し自体が表示されません。

name はアイコンの下に表示される名前です。上の例では「スクラッチちゃん」と表示されています。記入がない場合は特になにも表示されません。

side はアイコンの位置です。記入がない場合は左側に表示されます。side=’r’ とすると右側に表示されます。

r は right の略です

type は吹き出しのタイプです。記入がない場合は通常の吹き出しになりますが、type=’t’ とすると以下のような思考タイプになります。

スクラッチは CSS の勉強なしでデザインが設定できるのか！

t は thought の略です

ブログカード

[blog-card]<a href=”https://wp-scratch.com/usage/scratch-config/setup-after-installation/”>インストール後の初期設定</a>[/blog-card]

↓

2018.06.06

関連記事インストール後の初期設定

スクラッチをインストール後の手順を解説します。当テーマを初めて使用する方は必ず読むようにしてください。

デザイン設定方法：ブログカード

ブログカードの補足点

ブログカードで使用する aタグ内のテキストを変更すると、ブログカード内でそれがタイトルとして使用されます。

以下が例です。

[blog-card]<a href=”https://wp-scratch.com/usage/scratch-config/setup-after-installation/”>インストール後の初期設定だよ！！！</a>[/blog-card]

↓

2018.06.06

関連記事インストール後の初期設定だよ！！！

スクラッチをインストール後の手順を解説します。当テーマを初めて使用する方は必ず読むようにしてください。

また aタグ内のテキスト部分を空白にすると、その記事のタイトルが自動で挿入されます。

以下が例です。

[blog-card]<a href=”https://wp-scratch.com/usage/scratch-config/setup-after-installation/”></a>[/blog-card]

↓

2018.06.06

関連記事インストール後の初期設定

スクラッチをインストール後の手順を解説します。当テーマを初めて使用する方は必ず読むようにしてください。

注意
aタグ内のテキスト部分が空白の状態でテキストエディタからビジュアルエディタに切り替えると aタグが消滅してしまうので注意してください。

またブログカードを表示する際には以下が必須の条件となります。

記事ステータスが「公開」のもの
URL がサイト内のもの（内部リンク）

ブログカードで扱う記事が「非公開」の場合はブログカードそのものが表示されません。

また URL はサイト内であることが必須です。外部リンクとしては使用できません。

外部リンクとしても使用したいという要望が多数あれば実装します

並列画像

[parallel-image]
<img class=”image-frame” src=”https://wp-scratch.com/wp-content/uploads/2018/07/mobile-phone-with-blue-screen-on-a-keyboard.jpg” alt=”img1″ />
<img class=”image-frame” src=”https://wp-scratch.com/wp-content/uploads/2018/07/sns-icons-on-a-mobile-screen.jpg” alt=”img2″ />
[/parallel-image]

↓