【プラグインなし】「STORK」で用意されているショートコードを、コピペですべて登録する！

テーマ「STORK」には、標準でたくさんの便利な「ショートコード」が用意されています。

ショートコードを使用すると、このような色付きのボックスや吹き出しなどを簡単に表示させることができます。

こんにちは～！

記事にこのようなパーツが使われているだけで、グンと記事の質が向上しますよね。

しかし、いくら便利とはいえ使うたびに毎回手で入力していくのは大変です。

ストークの公式ページでは「AddQuicktag」というプラグインを使ってショートコードを呼び出す方法も紹介されていますが、登録や管理をするのが意外と手間がかかります…。

そこで、今回はプラグインを一切使わず、コードをコピペするだけで記事投稿画面の「クイックタグ」に簡単に登録する方法をご紹介します。

ストークに登録されているショートコードがすべて、ワンクリックで呼び出せるようになるので、ぜひ使ってみてくださいね！

STORKのショートコードをコピペだけで簡単に登録する

functions.phpへコードをコピー＆ペースト

以下のコードを「テーマのための関数(functions.php)」にコピペして保存するだけで使用できます。

少し長いですがすべて選択し、コピーして貼り付けてください。

念のため、保存する前にファイルのバックアップを取っておくと安心です。

//STORK用ショートコードを追加
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
function add_my_quicktag() { 
?>
<script type="text/javascript">
QTags.addButton('underline_red','◆【下線】 赤','','')
QTags.addButton('bold_red','◆【太字】 赤','','')
QTags.addButton('maker_red','◇【マーカー】 ピンク','','')
QTags.addButton('box_pink','★【ボックス】 ラベル ピンク','
ラベル名
 テキスト
','')
QTags.addButton('box_gray','★【ボックス】 ラベル 灰色','
ラベル名
 テキスト
','')
QTags.addButton('box_green','★【ボックス】 ラベル 緑','
ラベル名
 テキスト
','')
QTags.addButton('box_red','★【ボックス】 ラベル 赤','
ラベル名
 テキスト
','')
QTags.addButton('box_blue','★【ボックス】 ラベル 青','
ラベル名
 テキスト
','')
QTags.addButton('box_yellow','★【ボックス】 ラベル 黄','
ラベル名
 テキスト
','')
QTags.addButton('box_black','★【ボックス】 ラベル 黒','
ラベル名
 テキスト
','')
QTags.addButton('link_art','★【リンク】 記事 ラベル無し','','')
QTags.addButton('link_art_rabel','★【リンク】 記事 関連ラベル有り','','')
QTags.addButton('baloon_facebook','★【吹き出し】 Facebook風 左','
 定型文
','')
QTags.addButton('baloon_line','★【吹き出し】 LINE風 左','
 定型文
','')
QTags.addButton('baloon_color_left','★【吹き出し】 カラー枠 左','
 定型文
','')
QTags.addButton('baloon_simple_big_left','★【吹き出し】 シンプル ビッグ 左','
 定型文
','')
QTags.addButton('baloon_simple_right','★【吹き出し】 シンプル 右','
 定型文
','')
QTags.addButton('baloon_simple_left','★【吹き出し】 シンプル 左','
 定型文
','')
QTags.addButton('baloon_simple_white','★【枠】 シンプル 白','
タイトル\nシンプルな\n枠\nです\n
','')
QTags.addButton('border_warning','★【枠】 注意 赤','
注意\n注意\n喚起\nです\n
','')
QTags.addButton('border_supple','★【枠】 補足 黄','
補足\n補足\n説明\nです\n
','')
QTags.addButton('button_fill','☆【ボタン】 ベタ塗り','
 テキストリンク
','')
QTags.addButton('button_fill_big','☆【ボタン】 ベタ塗り ビッグ','
 テキストリンク
','')
QTags.addButton('button_border','☆【ボタン】 枠線','
 テキストリンク
','')
QTags.addButton('button_border_big','☆【ボタン】 枠線 ビッグ','
 テキストリンク
','')
QTags.addButton('button_red','☆【ボタン】 目立つ 赤','
 テキストリンク
','')
QTags.addButton('button_red_big','☆【ボタン】 目立つ 赤 ビッグ','
 テキストリンク
','')
QTags.addButton('button_red_bg_gray','☆【ボタン】 目立つ 赤 灰色背景付','
 テキストリンク
','')
QTags.addButton('button_red_bg_yellow','☆【ボタン】 目立つ 赤 黄色背景付・角丸','
 テキストリンク
','')
QTags.addButton('button_solid_pink','☆【ボタン】 立体的 ピンク','
 テキストリンク
','')
QTags.addButton('button_solid_yellow','☆【ボタン】 立体的 黄','
 テキストリンク
','')
QTags.addButton('columns_two','☆【表示】 2カラム','
\n 
カラム1 左
\n 
カラム2 右
\n
','')
QTags.addButton('columns_three','☆【表示】 3カラム','
\n
カラム1 左
\n
カラム2 中央
\n
カラム3 右
\n
','')
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

コピペが完了したらファイルを保存します。

保存ができたら、投稿追加ページに移動して入力エディタをテキストモードにして確認してみましょう。

下記の画像のように、入力エリア上部に、クイックタグのボタンが表示されていれば成功です。

ボタンを1度クリックするとショートコードの開始タグが入力され、もう1度クリックすると終了タグが入力されます。

終了タグが存在しない短縮コードは一度クリックしただけで入力されます。

以上で無事に使えるようになりました。

これで、いつでも簡単にショートコードを呼び出せますね！

続いて、登録したショートコードの使用例を紹介していきます。

「STORK」で使える、ショートコードの使用例

カラーラベルボックス

ラベル名
（テキスト）

ラベル名
（テキスト）

ラベル名
（テキスト）

ラベル名
（テキスト）

ラベル名
（テキスト）

ラベル名
（テキスト）

各ボックスは「ラベル名」「（テキスト）」の部分に、好きな文字を入れて使ってください。

枠

タイトル
シンプルな

枠

です

注意

注意

喚起

です

補足

補足

説明

です

吹き出し

★【吹き出し】 Facebook風（左）

（定型文）

（定型文）

★【吹き出し】 LINE風（左）

（定型文）

（定型文）

★【吹き出し】 カラー枠（左）

（定型文）

（定型文）

★【吹き出し】 シンプル（ビッグ）（左）

（定型文）

（定型文）

★【吹き出し】 シンプル（右）

（定型文）

（定型文）

★【吹き出し】 シンプル（左）

（定型文）

（定型文）

記事へのリンクカード

★【リンク】 記事（ラベル無し）

単一記事の場合：　「“x,x”」の部分を「記事ID」(“1395“)に変更

アチャールのレシピと基本の作り方 スパイスをたっぷり使った インドのピリ辛漬物

2018年10月19日

★【リンク】 記事（関連ラベル有り）

複数記事の場合：　「“x,x”」の部分を「記事ID」(“494,492“)に変更

パーソナルカラー オータム(秋)タイプの人に似合う色とは？

2017年6月8日

パーソナルカラー ウィンター(冬)タイプの人に似合う色とは？

2017年6月7日

カラム表示

☆【表示】 2カラム

 
カラム1（左）
 
カラム2（右）

☆【表示】 3カラム

カラム1（左）
カラム2（中央）
カラム3（右）

参考にさせていただいたサイト様

今回の記事執筆に際して参考にさせていただきました。

【最新版】「STORK」で使えるショートコードを、全部・サクッと、便利に登録！

プラグインAddQuicktagを使用してクイックタグを追加することもできるのですが、その場合には、こちらの記事が非常にわかりやすく参考になるのでおすすめです。