WordPress 吹き出しプラグイン ConversationViewer

2018-04-19

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

テーマ使わなくても吹き出しをプラグインで実装できるのにゃー

無料WordPressテーマ「Cocoon（コクーン）」

無料WordPressテーマ「Cocoon（コクーン）」を公開しました WordPressテーマSimplicityの作者の方が新 ...

//possiblytrue.com/インターネット/無料wordpressテーマ「cocoo...

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

定番なのにゃー

Speech bubble (ふきだしプラグイン) – WordPress プラグイン | WordPress

Easy to add Speech bubbles in your post.

https://ja.wordpress.org/plugins/speech-bubble/

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

それほど定番なのにゃー

でも採用しませんでした

なんでにゃー？

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

将来動かなくなったら困るにゃー

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

面倒は嫌なのにゃー

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

いっぱいあるからにゃー
それでどうしたのにゃー？

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

どんなのにゃー？

これです

Conversation Viewer – Display Chat Bubbles – WordPress プラグイン &#

A plugin for displaying chat bubbles on your site, like in their original messaging apps.

https://ja.wordpress.org/plugins/conversation-viewer-display...

スマホアプリみたいなのにゃー

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

サンプル見せてくれなのにゃー

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

[conversationViewer style="messenger" clickable="yes" background="#f0f0f0" ]
// Me: Me の書き込みです。 Hello!!
// 猫: 猫の書き込みですにゃー Yes, we can!
// Me: 誰か来たようです
// Command: 犬 has joined the conversation. 犬が参加しました
// 犬: 犬の書き込みです Yeah!!!!!
// 猫: にゃーにゃーにゃー
// 犬: ワンワンワン
// Me: うるさいー
[/conversationViewer]

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

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

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

見やすいように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]