WordPressのテーマSTORK には、便利でおしゃれな「ショートコード」がたくさん用意されています。
例えば、「吹き出し」や
「見出し付きボックス」と「リンクカード」を組み合わせたりすることもできます。
こういったパーツは配置するだけで、ブログ全体が華やかになりますよね!
しかし、いくら便利といっても毎回、手入力するのは大変です。
公式ページでは「AddQuicktag」というプラグインを使ってショートコードを呼び出す方法も紹介されていますが、登録や管理がけっこう手間だったりします・・・。
そこで、今回はコードをコピペするだけでテキストエディタの「クイックタグ」に簡単に登録する方法をご紹介します。
公式ページで紹介されている全てのショートコードがワンクリックで呼び出せるようになりますので、ぜひ使ってみてくださいね。
ついでに、おまけのショートコードも入れておきます♪
このブログでは何度か触れていますが、プラグインを使わなくてもできることは、使わないでやった方が絶対に良いです。
プラグインを不用意に入れすぎるとサイトが重くなる上、不具合や脆弱性のリスクが高まってしまいますからね。
それでは、早速「STORK」で使える「全てのショートコード」の説明と、それをコピペだけで簡単に登録する方法をご紹介していきます!
目次
スポンサードリンク
STORKのショートコードをコピペだけで簡単に登録する方法
functions.phpへコードをコピペ
以下のコードを「functions.php」にコピペするだけ!
ちょっと長いですが、まるっとコピーして貼り付けてみてください。
念のため、ファイルのバックアップは忘れずに!
コピペが完了したらファイルを保存して、エディタをテキストモードにして確認してみます。
下の画像のように、入力エリアの上の部分に、クイックタグのボタンが表示されていれば成功です!
ボタンを1回押すとショートコードの開始タグが入力され、
もう一度押すと終了タグが入力されます。
以上で終わり!
これで、いつでも簡単にショートコードを呼び出しできるようになりました。
続いて、登録したショートコードの解説をしていきます。
「STORK」で使える、全てのショートコードの解説
ラベル付きカラーボックス
青ボックス
[box class="blue_box" title="ここにタイトル"]コンテンツ[/box]
赤ボックス
[box class="red_box" title="ここにタイトル"]コンテンツ[/box]
黄ボックス
[box class="yellow_box" title="ここにタイトル"]コンテンツ[/box]
緑ボックス
[box class="green_box" title="ここにタイトル"]コンテンツ[/box]
桃ボックス
[box class="pink_box" title="ここにタイトル"]コンテンツ[/box]
灰ボックス
[box class="glay_box" title="ここにタイトル"]コンテンツ[/box]
黒ボックス
[box class="black_box" title="ここにタイトル"]コンテンツ[/box]
枠、フレーム
補足説明
[aside type="normal"]補足説明[/aside]
注意説明
[aside type="warning"]注意説明[/aside]
シンプルな枠
[aside type="boader"]シンプルな枠[/aside]
吹き出し
吹き出し(左)
[voice icon="ここに画像アドレス" name="ここに名前" type="l"]コンテンツ[/voice]
吹き出し(右)
[voice icon="ここに画像アドレス" name="ここに名前" type="r"]コンテンツ[/voice]
吹き出し(Facebook風)
[voice icon="ここに画像アドレス" name="ここに名前" type="l fb"]コンテンツ[/voice]
吹き出し(LINE風)
[voice icon="ここに画像アドレス" name="ここに名前" type="l line"]コンテンツ[/voice]
吹き出し(大)
[voice icon="ここに画像アドレス" name="ここに名前" type="l big"]コンテンツ[/voice]
吹き出し(青)
[voice icon="ここに画像アドレス" name="ここに名前" type="l cf icon_blue"]コンテンツ[/voice]
吹き出し(赤)
[voice icon="ここに画像アドレス" name="ここに名前" type="l cf icon_red"]コンテンツ[/voice]
吹き出し(黄)
[voice icon="ここに画像アドレス" name="ここに名前" type="l cf icon_yellow"]コンテンツ[/voice]
吹き出し(黒)
[voice icon="ここに画像アドレス" name="ここに名前" type="l cf icon_black"]コンテンツ[/voice]
ボタン
デフォルトボタン
[btn]テキストリンク[/btn]
シンプルボタン
[btn class="simple"]テキストリンク[/btn]
シンプルビッグボタン
[btn class="simple big"]テキストリンク[/btn]
目立つボタン
[btn class="lightning"]テキストリンク[/btn]
目立つビッグボタン
[btn class="lightning big"]テキストリンク[/btn]
背景付き目立つボタン
[btn class="lightning bg"]テキストリンク[/btn]
黄色い背景付き目立つビッグボタン
[btn class="lightning big bg-yellow"]テキストリンク[/btn]
黄色い背景付き目立つ角丸ビッグボタン
[btn class="lightning big bg-yellow maru"]テキストリンク[/btn]
立体的なボタン(黄色)
[btn class="rich_yellow"]テキストリンク[/btn]
立体的なボタン(ピンク)
[btn class="rich_pink"]テキストリンク[/btn]
リンクカード
[kanren postid="ポストID"]
ポストIDを確認するには、投稿一覧ページで調べたい投稿の「タイトル」のリンクにマウスを当てるとブラウザの下にURLが表示されます。
「post=」の右の数字が「ポストID」になります。
おまけ
ここからは、オリジナルのクイックタグのご紹介です。
ご覧のような、マーカーを簡単に引けるクイックタグになります。
マーカーを引きたいテキスト(青)
マーカーを引きたいテキスト(赤)
マーカーを引きたいテキスト(オレンジ)
適度に使うと効果的に文章を目立たせることができるので、おすすめです。
ぜひ使ってみてくださいね!
functions.phpへコードをコピペ
ショートコードのクイックタグを貼り付けた箇所に、追加でコピペしてください。
<script></script>で囲まれた中であれば、どこでもOKです。
style.cssへコードをコピペ
クイックタグを登録しただけでは、デザインが反映されないため「style.css」にもコードを追加する必要があります。
以下のコードを追加してください。
まとめ
今回追加したクイックタグには、テーマの提供元である「OPENCAGE(オープンケージ) 」さんで紹介されているショートコードが、すべて入っています。
中には使用頻度が低かったり、使わないショートコードもあるかと思います。
そんな時は、クイックタグの表示順を並び変えたり、不要なものは削除したりして自分好みにカスタマイズしちゃってくださいね!
こんばんは
ストークのショートコードをさわっていて、アンダーラインのところで
functions.phpにコピーしたら、画面がなにも表示しなくなりました。
何か解決方法はありますでしょうか
とても困っています。
よろしくお願いします。
昨日は突然のコメントすいませんでした。
あれから、旧データのバックアップで元に戻しました。
よく考えると、phpにコピーする時に失敗したようです。
今は、無事に子テーマを再度登録して復旧しています。
お世話かけました。
cyapuさん
お返事が遅くなってすいません。
すでに復旧できたみたいで何よりです。
僕もよくやるんですが、phpファイルを編集してエラーを出してしまうと管理画面からアクセスする事ができなくなってしまうんですよね。
そうなってしまった場合には、FTPツールなどで編集したファイルをバックアップしていたファイルと置き換えてやることで元に戻すことができます。
phpファイルを編集する場合は、バックアップを取っておけばすぐに元に戻せるので安心ですね^^
ひでほいさん
回答ありがとうござました。
お礼が遅くなり申し訳ございません。
私はFTPツールを使っていないんですよ!
ソフトをインストールするのが嫌でどうやって使うのか良くわからないのが現実です。
私が使っているサーバーはWPXクラウドってとこで、毎日バックアップをとってくれているので、そのデータで復旧しました。
ショートコードを使って見たいのですが
以前のようなことになるのが怖くて今のところショートコードは使っていません。
勇気が出たらまたチャレンジします。
ありがとうございました。