ショートコードの使い方まとめ【WordPress Diver】

WordPressのテーマ「Diver」にもショートコードがあるのをご存知でしょうか？
「Diver」には、ショートコードが機能としてあります。
そのため、プラグインを入れる必要がありません。
PHPのプログラムに詳しい方であれば、ショートコードを追加・カスタマイズすることが可能です。
こちらでは、便利なショートコードの使い方についてご紹介します。

ショートコード

「Diver」のショートコードは、10以上あります。
ショートコードを使うことで、記事を書く効率もアップできます。
また、工夫次第では他の記事に比べてクオリティもアップしてオリジナル記事を作成することができます。
PHPなどのプログラムが分からなくても使い方やショートコードの書き方が分かれば問題ありません。
初心者の方でも簡単にショートコードを使うことができますので安心です。

「お知らせ」のショートコードの書き方

「お知らせ」のショートコードの書き方はこちらです。

［aside］お知らせの文章［/aside］

「注意喚起」のショートコードの書き方

「注意喚起」のショートコードの書き方は、「お知らせ」のショートコードに「warning」を付け足すだけです。

［aside type="warning"］注意喚起［/aside］

「ボタン」のショートコードの書き方

「ボタン」のショートコードは、用途に応じて作ることができます。
ボタンの色や大きさ、リンクの指定はコチラです。

type：指定なし or big

url：リンク先を指定

color：指定しなければ青色

target：

_blank 常に名前無しのウィンドウを新規に開いて、そこに表示
_self 自分自身のウィンドウに表示
_top ウィンドウがフレームに分割されていれば、分割を全て解除して、そこに表示
_parent ウィンドウがフレームに分割されていれば、1段だけ分割を解除して、その親フレームに表示

［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］

［btn type="big" url="#botan" color="#F44336" target="_blank"］ボタン［/btn］

［colwrap］
［col2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col2］
［col2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col2］
［col2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col2］
［col2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col2］
［/colwrap］

［colwrap］
［col3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col3］
［col3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col3］
［col3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col3］
［/colwrap］

［colwrap］
［col3_2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col3_2］
［col3_2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col3_2］
［col3_2］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col3_2］
［/colwrap］

［colwrap］
［col4］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4］
［col4］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4］
［col4］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4］
［col4］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4］
［/colwrap］

［colwrap］
［col4_3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4_3］
［col4_3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4_3］
［col4_3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4_3］
［col4_3］［btn type="" url="#botan" color="" target="_blank"］ボタン［/btn］［/col4_3］
［/colwrap］

「会話形式の吹き出し」のショートコードの書き方

「会話形式の吹き出し」のショートコードは、吹き出しの位置や吹き出しの色などを指定することができます。
細かい設定はコチラです。

1. type：吹き出しの位置を指定 left or right ※デフォルトはleft
2. icon：画像URL指定
3. name：キャラクターの名前
4. color：吹き出しの色

［voice icon="https://tabalog.org/wp-content/uploads/2019/09/IMG_0738.jpg" name="左"］voice［/aside］

左

左側に吹き出しサンプル

［voice type="right" icon="https://tabalog.org/wp-content/uploads/2019/09/IMG_0738.jpg" name="右" color="red"］voice［/aside］

右

右側に吹き出しサンプル

「facebook」のショートコードの書き方

「facebook」のショートコードの書き方はコチラです。

［facebook］facebook［/facebook］

「twitter」のショートコードの書き方

「twitter」のショートコードの書き方はコチラです。

［twitter］twitter［/twitter］

「instagram」のショートコードの書き方

「instagram」のショートコードの書き方はコチラです。

［instagram］instagram［/instagram］

「SNS」をまとめて表示するショートコードの書き方

「facebook」や「instagram」、「twitter」のSNSをまとめて表示するショートコードの書き方はコチラです。

［colwrap]
［col4]［facebook]［/col4]［col4]［twitter]［/col4]［col4]［instagram]［/col4]
［/colwrap]

「画像なしの吹き出し」のショートコードの書き方

「吹き出し」だけのショートコードの書き方はコチラです。

［balloon］画像なしの吹き出し［/balloon］

「バッジ」のショートコードの書き方

「バッジ」のショートコードの書き方はコチラです。
バッジの色やリンク先を指定することができます。

［badge］参考［/badge］

［badge name="参考"］<a href="#can_kao">URL</a>［/badge］

［badge name="おすすめ" color="#fff"］WordPress Diver［/badge］

「引用」のショートコードの書き方

「引用」のショートコードの書き方はコチラです。
「bq」は、「blockquote」を略した書き方になります。

［bq］bq［/bq］

bq

「マーカー」のショートコードの書き方

「マーカー」は、ショートコードでも書くことができます。

［marker］marker［/marker］

「フォントサイズ」のショートコードの書き方

ショートコードで「フォントサイズ」を指定することができます。
sizeを指定することでフォントサイズを変更することができます。
sizeを指定しない場合は「size="4"」になります。
数字を大きくすると文字が大きくなります。

［fontsize］フォントサイズ［/fontsize］

［fontsize size="1"］fontsize［/fontsize］

［fontsize size="8"］フォントサイズ［/fontsize］

「フォントカラー」のショートコードの書き方

文字の色はビジュアルエディタでしていることが多いと思います。
ショートコードでも「フォントカラー」を変更できます。
色は、「#ff3333（赤）」の色になります。
プログラムを改修すれば、自由に色を指定することができます。

［color］フォントカラー［/color］

「背景色」のショートコードの書き方

「背景色」はビジュアルエディタでしていることが多いと思います。
ショートコードでも「背景色」を変更できます。
色は、「#eee（グレー）」の色になります。
プログラムを改修すれば、自由に色を指定することができます。

［bgcolor］bgcolor［/bgcolor］

「Q&A」のショートコードの書き方

「Q&A」のショートコードの書き方はコチラです。

［diver_qa q="質問"］diver_qa［/diver_qa］

「レビュー用の星」のショートコードの書き方

「レビュー用の星」のショートコードの書き方はコチラです。

score：0～5の間の数字

size：「指定なし」 or 「small」 or 「big」 の三種類

［star score="0.5" size=""］(0.5)
［star score="2.5" size=""］(2.5)
［star score="4.8" size="small"］(4.8)
［star score="5" size="small"］(5)
［star score="4.8" size="big"］(4.8)
［star score="5" size="big"］(5)

まとめ

Diverのショートコードについてご紹介しました。
ショートコードは、PHPなどの知識がなくても使うことができますので、是非使ってみてください。
プログラムの知識がある方は、独自のショートコードを作成してみるのもいいかもしれません。