dialog ショートコードのマニュアル
画像と吹き出しで会話しているかのように見せる機能を追加しました。
これを dialog ショートコードと呼びます。
dialog: 対話
社員の顔写真を使う場合
基本編
[dialog member="加藤 寛大" message="山田くん、座布団一枚あげちゃって!"]
こうすることで下記のように表示されます。
とても簡単ですね。
ポイントは、[ , ” , = , 英字 には特別な意味がありますので、必ず半角文字にすることです。
” と ” の間でのみ全角文字が使用可能です。
member: メンバー名の指定
では山田くんの返しを作ってみましょう。
こんなふうに作るときは、例えば下記のように入力します。
[dialog member="山田" message="は~い、ただいまお持ち致します!"]
あれ?フルネームを使いませんでしたね。
山田くんの下の名前は難しい字ですので出すのが大変です。そういう場合は、苗字だけでもOKです。
他にも下記のような指定方法が使えます。
- 姓 + 半角スペース + 名(例:member=”加藤 寛大”)
- 姓のみ(例:member=”加藤”)
- 名のみ(例:member=”寛大”)
- ローマ字表記(例:member=”Tomohiro Katoh”)
position: 写真の表示位置を変更
写真を左右交互に置くことで対話ができているように見えます。
右側に配置する際はposition=”right” という記述を追加すると可能です。
[dialog member="山田" message="は~い、ただいまお持ち致します!" position="right"]
メッセージを任意の箇所で改行する
単純にそこで改行してみましょう。
ちょっと変に見えますけれど。
[dialog member="山田" message="は~い、
ただいまお持ち致します!" position="right"]
number: 2枚目の写真を使う
プロフィール画像が2枚登録されている場合があります。
2枚めの写真を呼び出す際は number=”2″ と指定します。
[dialog member="持田 周平" message="ぴゅーぴゅー♪" number="2"]
2枚めの写真がない場合は、1枚めの写真が表示されます。
caption: 写真下に出る名前を変更する
通常はそのメンバーのフルネームが表示されますが、変更したい場合は caption で自由に指定が可能です。
[dialog member="持田 周平" message="ぴゅーぴゅー♪" caption="もっちー" number="2"]
なお、文字を表示したくない場合は caption=”” と指定します。
オプションの指定順序について
順序はどの順に指定しても構いません。
下の3つはすべてまったく同じとして解釈されます。
[dialog member="持田 周平" message="ぴゅーぴゅー♪" caption="もっちー" number="2"]
[dialog number="2" caption="もっちー" message="ぴゅーぴゅー♪" member="持田 周平"]
[dialog caption="もっちー" member="持田 周平" number="2" message="ぴゅーぴゅー♪"]
ただし先頭の dialog だけは最初に置くようにしてください。
応用編: メンバー写真以外を使う場合
imgsrc: 画像URLを指定する
memberオプションの代わりに imgsrcオプションにURLを指定します。
[dialog imgsrc="https://kaminarimagazine.com/wp-content/uploads/2016/10/cat-255307_640.jpg" message="にゃ~ん🐾"]
画像の縦横比は調整されません。
imgid: 画像IDを指定する
画像にはIDとしてそれぞれ番号が付加されていますので、それで指定する方法です。
[dialog imgid="2459" message="にゃ~ん🐾"]
縦横比は自動調整されます。
画像IDは、WordPressの左メニューから【メディア】を開き、目的の画像を開くとURLが
.php?item=2459 となっています。
これが画像IDです。
超応用編
HTMLタグやインラインスタイルシートを使用する
HTMLやCSSの知識があれば、messageオプションや captionオプションにHTMLやCSSを使用できます。
[dialog member="加藤" message="<p style='margin-top: 1.4em; font-size: 1.4em; text-align:center;'>座布団全部持っていっちゃって!</p>" caption="<span style='color:orange; font-size: 1.2em; font-weight:bold;'>怒りの加藤</span>"]
” と ‘ をきちんと使い分けるようにしてください。
質問コーナー
Q. 吹き出しの枠線の色を変えたいんだけど?
A. 変更できません。
結構複雑なスタイルシートを使っているのでなかなか難しいんです(´・ω・`)