WordPress 吹き出しプラグイン ConversationViewer

WordPress テーマ Cocoonの吹き出し機能について書きましたが
いい機会だったので
以前使用を検討していたプラグインを振り返ってみました

はじめに検討したのはSpeech bubble (ふきだしプラグイン)です

吹き出しプラグインでググるとだいたいこのプラグインの使い方のページに行き着きます

でも採用しませんでした

まず3年前以上アップデートがないことです
吹き出しコンテンツがメインのサイトにしようと思ってましたから
長く使っていけるものが良いですからね

使わなかったからよくわかりませんが
別途イメージファイルをアップロードするのも面倒くさいな
と思ったので手を出しませんでした

次にTestimonial 系のプラグインも良さそうだったのですが
イマイチどれが良いのか絞りきれませんでした

Testimonial 系も止めて別のプラグインを見つけることが出来ました
今回紹介するのがそのプラグインです

これです

そうなんです
イメージは正にそれです
使い方も簡単です

公式プラグインなのでインストール方法は省略します
インストールしたらこんな感じで書き込めばOKです。

[conversationViewer style="messenger" clickable="yes" background="#f0f0f0" ]

// Me: Me の書き込みです。 Hello!!

// 猫: 猫の書き込みですにゃー Yes, we can!

// Me: 誰か来たようです

// Command: 犬 has joined the conversation. 犬が参加しました

// 犬: 犬の書き込みです Yeah!!!!!

// 猫: にゃー にゃー にゃー

// 犬: ワン ワン ワン

// Me: うるさいー

[/conversationViewer]

そうです
区切りがスラッシュ２つで自分と相手の名前を入れてコロンの後に会話内容入れます

見やすいようにbackgroundをセットしました
テーマの色に合わせて調整してみて下さい
また表現形式も変えることができます
styleの値を変えると見た目が変更されます
最初のstyleはデフォルトのmessenger です
whatsappだとこうなります

続いてios

androidです

最後にsnapchat

これを設定しておくと
クリックした会話の人物のものだけ強調表示してくれます
複数人で構成した時に見やすくなります

clickableの設定値はなんでも良いみたいです
値があれば機能オンになるようです

以前は出来なかったんですが
バージョン1.1からできるようになりました
さっきのサンプルに数行加えてみましょう

[conversationViewer style="ios" clickable="yes" background="#f0f0f0" ]

// Image: [Me] [https://placeimg.com/200/200/people]
// Image: [猫] [https://placeimg.com/200/200/animals]
// Image: [犬] [https://placeimg.com/200/200/nature]

// Me: Me の書き込みです。 Hello!!

// 猫: 猫の書き込みですにゃー Yes, we can!

// Me: 誰か来たようです

// Command: 犬 has joined the conversation. 犬が参加しました

// 犬: 犬の書き込みです Yeah!!!!!

// 猫: にゃー にゃー にゃー

// 犬: ワン ワン ワン

// Me: うるさいー

[/conversationViewer]

そうです
結果はこうなります

はい、いい感じに追加されます
ただMe、自分に対してはアイコン設定できないみたいですね

いや、まだ1.1が出ていなかったのでアイコン無しの時点で不採用でした

それだけでなくRSSに会話内容が表示されないとか他にも理由がありますよ

ここでは紹介していない細かい設定は本家サイトでご確認下さい
いやーほんとにいいプラグインだと思います
もっと早くアップデートしていてくれれば・・・
末筆ながら他のサイトでの今後一層の活躍を祈念致しております