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]

猫

conversationViewer のショートコードで囲んでチャット内容を書けばいいのかにゃー

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


猫

おー、チャットが簡単にできたのにゃー

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


猫

ほんとにwhatsappなのにゃー

続いてios


androidです


最後にsnapchat


猫

見た目が簡単に変えられて便利なのにゃー
ところでclickableは何ナノにゃー?

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


猫

なるほどにゃー

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

猫

よくわかったのにゃー
ところでSpeech bubbleみたいにアイコンは使えないのかにゃー?

以前は出来なかったんですが
バージョン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]

猫

Imageが増えたのにゃー
URLでアイコンを指定してあげればいい訳なのにゃー?

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


猫

名前のところにアイコンが増えたのにゃー

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

猫

惜しいのにゃー
それが採用見送った理由なのかにゃー?

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

猫

今となってはいいプラグインなのに見誤ったのにゃー

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

猫

通常のブログだったらアクセントで色々と使い道がありそうなのにゃー

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

猫

なんか、お祈りメールみたいな締めなのにゃー