ストークのショートコードの使い方:AddQuicktagの設定と無料テンプレート配布

WordPressテーマ「STORK(ストーク)」には、いろいろな種類の便利なショートコードがあります。しかし、ショートコードを利用するためには、プラグインを通して自分で環境設定をする必要があります。この記事では、ストークのショートコードを簡単に実装できるプラグイン「AddQuicktag」の使い方と、そのショートコードの機能一覧について紹介します。

また、このブログの読者の方だけに、ストークのショートコードが一発で使えるようになるオリジナルテンプレートも無料配布しています。ショートコードを使いこなすと、記事を書くための時間が短縮できるだけでなく、読者に見やすいデザインにすることができますよ。

ショートコードを使うためのプラグイン「AddQuicktag」

AddQuicktagは、使用頻度の高いHTMLタグやショートコードなどを登録するためのプラグインです。これを使うことで、記事投稿画面で、いつでもストークのショートコードが使えるようになります。

以下に、AddQuicktagの設定方法と使い方について紹介します。

「AddQuicktag」の使い方

1.AddQuicktagをインストールする

まず、AddQuicktagのプラグインをインストールします。WordPress管理画面のプラグイン > 新規追加 で「AddQuicktag」を検索すると、以下のようなプラグインが出てくるのでインストールして有効化します。

2.AddQuicktagの設定を行う

次に、AddQuicktagの設定を行います。設定する項目は、下の画像の①~③の3か所です。

設定①ボタンのラベル

ボタンのラベル名(表示名)をつけます。これは記事投稿画面上で表示されるラベル名です。

わかりやすいラベル名をつけておくといいです。

設定②開始タグ/終了タグ

登録したいタグの「開始タグ」と「終了タグ」を入れます。通常、タグは手打ちで一つひとつ入力する必要がありますが、ここに登録しておくと、ボタン一つでタグ入力を済ませることができます。

ショートコードの場合、一般的に[〇〇]~[/〇〇]と表記されるので、開始タグに[〇〇]、終了タグに[/〇〇]を設定します。

設定③タグを使う場所

登録したタグを使いたい場所にチェックを入れます。例えば、投稿記事と固定ページで使いたい場合は「post」と「page」にチェックを入れておくといいです。

一つひとつ設定するのが面倒な場合は、右端にチェックを入れると、すべて選択されるようになります。

設定項目は以上です。

もし、わからない箇所があれば、以下の動画も参考になります。

ブログマーケッターJUNICHIさんによる「AddQuicktag」設定の解説動画です。

3.「AddQuicktag」を使ってショートコードを入力する

では、実際にAddQuicktagを使ってショートコードを記事内に挿入してみましょう。ここでは、ストークのショートコードの一つである「補足説明」を使ってみます。

下の画像のように、ショートコードを使いたい箇所を選択して、AddQuicktagで登録したラベル名(ここでは「【補足】補足説明」)をクリックしてみます。

すると、以下のようにショートコードを記事内にワンクリックで挿入できます。

プレビューで確認してみると、補足説明がきちんと表示できていることがわかります。

ショートコードを一発で使えるテンプレートを紹介

AddQuicktagはショートコードを簡単に使える便利なプラグインですが、一個ずつしかコードを登録できないというデメリットがあります。すべてのショートコードを登録するためには、一個ずつ登録する作業を何度も繰り返さなければなりません。

なので、ストークを開発したOPENCAGEの公式サイトでは、ショートコードをまとめてAddQuicktagに登録できるサンプルファイルが配布されています。

[ショートコード] AddQuicktagの設定(OPENCAGE)

しかし、このサンプルファイルにはすべてのショートコードが登録されているわけではないので、残りは自分で登録しなければなりません。それもちょっと面倒くさいですよね?

そこで、今回、このブログを読んでくれたあなたには、特別に普段僕が使っているAddQuicktag用のテンプレートファイルを配布します。

ダウンロード
⇒ [AddQuicktag]ストーク専用テンプレートファイル

このテンプレートファイルをAddQuicktagの設定画面の一番下にある「インポート」からアップロードすれば、一発でほぼすべてのストーク用ショートコードが登録できます。(ダウンロードしたファイルはzip形式ですので解凍してお使いください)

これを使って、ぜひストークのショートコードを使いこなしてみてください。記事を書く効率が格段に向上すること間違いなしです。

ストークで使える便利なショートコード一覧

それでは、ここからは、ストークで使えるショートコードを一覧で紹介します。

1.関連記事リンク

関連記事へのリンクをブログ内に表示させます。

WordPress初心者におすすめの必須プラグイン20選(2018年)

2018.02.19

参考)記事IDの調べ方

記事IDとは、WordPressの管理画面 > 投稿 > 投稿一覧 に表示されるブログタイトルにマウスのカーソル(矢印)を乗せるたとき、下の方に表示されるpost=〇〇〇〇に表示される数字のことです。

複数の記事へリンクを貼る場合

記事IDをコンマで複数挿入すると、複数の記事へリンクを貼ることもできます。

WordPress初心者におすすめの必須プラグイン20選(2018年)

2018.02.19

WordPressのセキュリティ対策、初心者にもできる5つの方法

2018.02.15

2.2カラム表示

記事や画像を2カラムで表示させます。(スマホでは1カラム表示)

3.3カラム表示

同じく、3カラム表示(スマホでは1カラム表示)も可能です。

4.補足説明

記事内に補足説明を挿入します。補足説明の見出しは太字にすると見やすいですね。

補足説明
ここに補足説明を書きます

5.注意説明

記事内に注意書きを挿入します。補足説明と同様に使うことができます。

注意書き
ここに注意書きを書きます

6.シンプルな枠

記事内にシンプルな枠を挿入できます。枠で文章や画像などを囲むと、ほかの文章との差別化もでき、見やすいデザインにすることができます。

とてもシンプルな枠ですね

7.ボックス

記事内にボックスを挿入できるショートコードで、僕自身もかなり気に入っている機能です。記事内のポイントや強調したい部分を読者に一目で伝えることができます。

以下のようにカラーの種類も豊富です。

ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です
ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です
ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です
ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です
ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です
ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です
ここにタイトル
ここに読者に強調して伝えたいポイントを書くと効果的です

ボックスのカラー変更について
上記コードの「blue」の部分を「red」「yellow」「green」「pink」「glay」「black」に変えることで好みのカラーに変更することができます。

タイトルなしのボックスのみを使用する場合

コード内の「title=”ここにタイトル”」を消すと、タイトルなしのボックスのみを表示させることもできます。

タイトルなしでボックスを使うことができます

8.ボタン

ストークではテキストつきの豊富な種類のボタンを表示させることができます。以下に、ボタンの種類と使用するコードをそれぞれ紹介します。(下に紹介するボタンリンクには当記事へのリンクが貼られています)

①デフォルトボタン

②シンプルボタン

③シンプルビッグボタン

④リッチボタン(立体的なボタン)

※ボックスと同様、色の変更も可能です。(青/黄/緑/ピンク/オレンジの全5色)

⑤目立つボタン

⑥目立つビッグボタン

⑦背景付き目立つボタン

⑧黄色い背景付き目立つビッグボタン

⑨黄色い背景付き目立つ丸角ビッグボタン

テキストリンクを忘れずに
ボタンを使うときは、必ずテキストリンクをショートコードで囲むようにしてください。リンクがないとボタンが表示されません。

9.吹き出し機能

ストークでは会話のような吹き出しを表示させることもできます。単調な記事内にアクセントをつけるときに役立ちます。

①左にアイコン表示

Kazpa
ここにメッセージを入れます

②右にアイコン表示

Kazpa
ここにメッセージを入れます

③Facebook風

Kazpa
Facebook風の吹き出しです

④LINE風

Kazpa
LINE風の吹き出しです

⑤大きなアイコンを表示させる

Kazpa
アイコンをちょっと大きく表示させることができます。(スマホ表示ではサイズは変わりません)

⑥アイコンの周りに色をつける

コードのtype内に「icon_yellow」「icon_red」「icon_blue」「icon_black」を追記すると、アイコンの周りの色をそれぞれ黄色、赤、青、黒に帰ることができます。

Kazpa
アイコンの周りに色をつけられます。

アイコンの位置は左右に変更可
アイコンの位置はtype内に「l」または「r」を追記することで、それぞれ左側または右側に持ってくることができます。

以上、ストークのショートコードの使い方:AddQuicktagの設定と無料テンプレート配布でした。

なお、今回の記事で配布している以下のテンプレートは、「AddQuicktag」というプラグインにインポートすれば、上記のストーク専用プラグインをすぐに使うことができるようになります。

面倒な設定は簡略化し、ブログは記事を書くことに集中しましょう。




シェア&フォローしてくれるとうれしいです。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

1981年4月、熊本県生まれ。現在、大分市在住。妻と子ども2人(4歳と2歳の男の子)の4人暮らし。趣味はサッカー、読書、インターネット、ブログ、その他面白い話題を見つけること。好きな食べ物はチョコとコーヒーです。よろしくお願いします。