WordPress サイトにチャットルームを追加することは、エンゲージメントを高め、ブランドを中心としたコミュニティを構築する素晴らしい方法です。
残念ながら、多くのチャットソフトウェアは月額サービスとして販売されているため、この費用を無期限に予算化する必要があります。
いくつかのチャットサービスは、サードパーティのサイトに登録するように要求することさえあり、チャットルームを完全にコントロールすることはできません。さらに悪いことに、いくつかのチュートリアルは、ユーザーをSlackやDiscordのような外部チャットクライアントに転送するように指示します。
この投稿では、WordPress サイトにインストール型のチャットルームを追加する方法を紹介します。これは、高価な毎月のサブスクリプションを支払ったり、サードパーティのサービスに依存したり、サイトからの訪問者を追い出したりする必要がないことを意味します。

なぜWordPressにチャットルームを追加するのですか?
会員制サイトや オンラインフォーラムを運営している場合、ユーザー用のインスタントメッセージングチャットルームを作成することをお勧めします。
サイトオーナーの中には、Slack、WhatsApp、Facebookグループ、Discordのようなサードパーティのサービスを利用する人もいます。しかし、これらの方法は、あなたのサイトから人々を遠ざけるので、ページビューと直帰率には悪いニュースです。さらに、チャット体験を完全にコントロールすることはできません。
あなたのサイトにチャットルームを埋め込むことで、人々をより長くサイトに滞在させ、コミュニティーの強い感覚を構築することができます。さらに良いことに、ホスティング型のチャットルームを作成することにより、多くの場合、費用のかかる継続的な購読料を避けることができます。
注:チャットルームは、ユーザーの小規模なコミュニティに最適です。ライブ カスタマ サポートを提供したい場合は、最高のライブ チャット サポート ソフトウェアのリストをご覧ください。
それでは、WordPressブログやサイトにチャットルームを追加する方法を見てみましょう。以下のクイックリンクから、お好きな方法にジャンプしてください:
方法 1.Simple Ajax Chat (無料 WordPress プラグイン) を使用する。
プレミアム WordPress プラグインや継続的なサブスクリプションに予算を割くことなく、あなたのサイトに簡単なチャットルームを追加したいですか?Simple Ajax Chat を使用すると、1セントも支払うことなく、任意のページ、投稿、またはウィジェット対応エリアにシンプルなインストール型のチャットルームを追加することができます。
また、ログイン中のユーザーにアクセスを制限したり、完全に公開されたチャットルームを作成することもできます。詳細については、Simple Ajax Chat のレビューを参照してください。

注: このガイドでは、無料の Simple Ajax Chat プラグインを使用しています。しかし、あなたが複数の異なるチャットルームを作成したい場合は、Plugin Planet Simple Ajax Chatにアップグレードする必要があります。
ステップ 1.簡単な Ajax チャットを設定する
まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
有効化したら、設定 ” Simple Ajax Chatでチャットルームを設定してください。

まず、「プラグイン設定」セクションをクリックして展開し、「初期設定名」を好きな名前に変更します。
また、’初期設定メッセージ’を入力することもできます。この初期設定メッセージは、誰かがあなたのチャットルームに初めて訪問したときに表示されます。

次に、ユーザーがチャットルームを使用するためにログインする必要があるかどうかを決定することができます。ユーザー登録を必須とすることは、スパムや荒らしに対抗するのに役立ちますが、公開チャットルームはより多くのユーザーを得るかもしれません。
この決定を行うには、「チャットボックスを表示および使用するユーザーにログインを必須にする」の横にあるチェックボックスをオンまたはオフにします。
ログイン中のユーザー名」にチェックを入れると、WordPressがその人のユーザー名をチャットに表示します。

もう一つのオプションは、登録されていない訪問者がチャットを読むが、対話しないことを許可することです。彼らが見るものを好む人々は、会話に参加するためにアカウントを作成するかもしれません。
ステップ 2.チャットルームのカスタマイズ
これで、チャットルームをカスタマイズすることができます。例えば、独自のロゴ、カスタムカラー、ブランディングを追加することができます。これは、Discord のような区切りのプラットフォームと比較して、 Simple Ajax Chat のようなインストール型のソリューションを選択する大きな利点です。
これらの変更を行うには、’Times and Colors’ と ‘Appearance’ ボックスの設定を使用するだけです。

初期設定の通知アイコンを自分の画像に置き換えることもできます。例えば、あなたのロゴやアイコン、Canvaなどの ウェブデザインソフトウェアで作成した画像を使用することができます。
独自のグラフィックを追加するには、「初期設定通知アイコン」フィールドを見つけ、「アップロード」をクリックします。

WordPressのメディアライブラリから画像を選択するか、コンピューターからファイルをアップロードすることができます。
このセクションで変更した場合は、忘れずに「設定を保存」をクリックしてください。
ステップ3.モデレーション機能を追加する
その後、’禁止フレーズ’ セクションをクリックして展開し、チャットに決して表示されるべきでない単語を入力することができます。これは、競合他社の名前、攻撃的な言葉、または訪問者の経験やあなたの評判を損なう可能性のある他のものかもしれません。
インストール型のソリューションであるため、表示させたい単語や、コミュニティ内にふさわしくない単語を完全にコントロールすることができます。
各単語をコンマで区切ります。

この場合も、「設定を保存」をクリックして変更を保存することを忘れないでください。
この他にもたくさんの設定がありますので、一通り目を通して、どのような変更ができるか見てみる価値があります。しかし、簡単なチャットルームを作成するのに必要なものはすべて揃っていますので、WordPress サイトに追加する方法を見てみましょう。
ステップ 4.WordPress でチャットルームを表示する
Simple Ajax Chat では、チャットルームを表示する場所を正確にコントロールすることができるので、どのページ、投稿、ウィジェット対応エリアにもチャットルームを追加することができます。
チャットルームの設定に満足したら、ショートコード&テンプレートタグのエリアまでスクロールダウンし、クリックして開きます。ここに、使用できるショートコードが表示されます。

ページにチャットルームを追加するには、WordPressダッシュボードのページ ” 新規追加をクリックします。
タイトルを入力し、アイキャッチ画像をアップロードし、カテゴリーとタグを追加し、その他ページに表示したいコンテンツを追加することができる。

さらに一歩進んで、チャットルームを改善するための貴重な提案やアイデアを得るためにユーザー体験フィードバックアンケートを追加することもできます。このような柔軟性は、サードパーティの厳格なソフトウェアと比較して、Simple Ajax Chat のようなプラグインを使用することをお勧めするもう一つの理由です。
チャットルームを埋め込むには、「+」記号をクリックし、「ショートコード」と入力してください。これで、外観が表示されたら、適切なブロックを選択できます。

その後、ショートコードブロックに[sac_happens]
ショートコードを追加するだけです。
公開する」または「更新する」をクリックして、チャットルームをライブにすることができます。

もう一つのオプションは、ウィジェット対応エリアにチャットルームを追加することです。これは、複数のページにわたってチャットウィンドウを表示する簡単な方法です。
新しいブロックベースのテーマを使用している場合、標準の WordPress コンテンツエディターを使用して編集できないサイトのエリアにチャットルームを追加することもできます。
ステップバイステップの手順については、ウィジェットの追加と使用方法に関するガイドを参照してください。

どのようにWordPressにチャットルームを追加しても、 あなたのサイトのモバイルバージョンをテストすることによって、それがよく見え、すべての端末で正しく動作することを確認することが重要です。
このトピックについては、モバイルフレンドリーなサイトを作成するための専門家のヒントをご覧ください。

方法2.BuddyBossを使う (オンラインコミュニティ構築に最適)
人々が何度も訪れるような活気あるオンラインコミュニティを作りたいと思いませんか?チャットルームは素晴らしいスタートですが、成功するデジタルコミュニティ構築のほんの一部に過ぎません。
そこで、メンバープロフィール、検索可能なディレクトリ、フォーラム、ソーシャルグループ、有効化フィードなどの強力な機能が登場します。
新規:良いニュースだ。このようなエクスペリエンスを提供するために、様々なプラグインを組み合わせる必要はありません。BuddyBossは、これらすべての機能を備えています。

BuddyBossは、市場で最高のWordPressコミュニティ構築プラットフォームです。実際、BuddyBossのレビューでは、BuddyBossが私たちのお気に入りのコミュニティプラグインである理由をすべて紹介しています。
このガイドでは、BuddyBossを使ってサイトにライブメッセージを追加する方法を紹介します。 その他のソーシャル機能の使い方については、WordPressでプライベートコミュニティを作成する方法をご覧ください。

ステップ1.Pusherアカウントを作成する
BuddyBossは、ユーザーがリアルタイムでコミュニケーションできるサービスであるプッシャーチャンネルを使って、サイトにライブメッセージングを追加することができます。
BuddyBossを始める前に、Pusherのアカウントを作成する必要があります。ありがたいことに、Pusherには無料プランがあり、1日あたり200kのメッセージを送信することができます。しかし、アップグレードが必要な場合は、月額49ドルで1日100万メッセージまで送信することができます。
まずはPusherのサイトへ行き、「サインアップ」ボタンをクリックする。

その後、画面の指示に従って無料アカウントを作成してください。
これで、自動的にPusherのダッシュボードにリダイレクトされます。この画面で、「チャンネル」の下にある「始める」ボタンをクリックしてください。

Pusherアプリの名前を入力します。これはPusherのダッシュボードでアプリを表すので、説明しやすい名前にするとよいでしょう。
また、クラスター(Pusherアプリからのリクエストを処理するサーバーの物理的な場所)を選択することもできます。場所を選択する際は、欧州のデータ保護規制により、個人ユーザーデータがEU枠線から出ることができないことに留意してください。
また、ユーザーや自社のサーバーに地理的に近い場所を選ぶことも理にかなっています。そうすることで、メッセージの送受信時に発生する遅延を減らすことができます。
場所を選択するには、’Select a cluster’ ドロップダウンを開き、リストからオプションを選択します。

それが終わったら、「アプリを作成」をクリックする。
アプリの設定を終了するには、左側のメニューから「アプリ設定」を選択します。そして、「クライアント・イベントを有効化」セクションまでスクロールし、クリックしてそのスイッチを有効化する。

次に、「有効化」セクションまでスクロールします。
もう一度、クリックしてこのスイッチを有効化する。

左メニューの’App Keys’をクリックしてください。左メニューの’App Keys’をクリックしてください。BuddyBossプラグインに必要な情報がすべてコンテナで表示されます。
それを念頭に置いて、次の数ステップの間、この画面を区切りタブで開いたままにしておく。

ステップ 2.BuddyBossプラグインとテーマをインストールする
ライブメッセージングの設定には、BuddyBossプラグイン、BuddyBoss Platform Pro、BuddyBossテーマが必要です。BuddyBossのサイトへ行き、WebパッケージかBundleにサインアップしてください。

ご購入後、BuddyBossとBuddyBoss Platform Proのプラグインをサイトにインストールする必要があります。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。
ライセンスキーを入力してください。ライセンスキーは、BuddyBossサイトのアカウントに記載されています。

次に、BuddyBossテーマをインストールします。BuddyBossテーマは、Webパッケージとバンドルパッケージにすべて含まれています。
詳しい手順については、WordPressテーマのインストール方法をご覧ください。

ステップ 3.プライベートメッセージの有効化
BuddyBossにはたくさんの機能がありますが、プラグインはこれらの機能をコンポーネントごとに区切っています。必要な機能に応じて、コンポーネントを有効化/無効化することができます。
そのためには、BuddyBoss ” Components のページにアクセスしてください。

ここでは、使用できるさまざまなコンポーネントがすべて表示されます。
WordPressにライブメッセージングを追加したいので、Private Messagingコンポーネントを見つけ、その「有効化」リンクをクリックする。

ステップ4.プッシャーチャンネルと統合する
これで、BuddyBoss ” Integrationsにアクセスして、WordPressサイトとPusherアカウントをリンクする準備ができました。ここで、’Pusher’リンクをクリックします。

プッシャーIDとキーを追加するエリアが表示されます。
Pusherタブから各情報をコピー&WordPressダッシュボードの対応するフィールドにペーストするだけです。

また、’Pusher Cluster’フィールドを変更し、Pusherアカウントで選択されているクラスタと一致させる必要があるかもしれません。
設定が完了したら、WordPressダッシュボードの「設定を保存」をクリックします。すべてがうまくいっていれば、画面上部に緑色の「接続されました」というメッセージが表示されます。

また、新しい「ライブメッセージ」フィールドも表示されます。
この設定にチェックを入れてください。

最後に「Save Settings」をクリックして変更を保存します。
ステップ5.ライブ チャットをテストする
新チャット機能が正常に動作していることを確認するために、テストすることをお勧めします。これを行うには、ブラウザーでシークレットモードを使用して2つの異なるメンバーアカウントにログインする必要があります。
次に、BuddyBossが自動的に作成する’メンバー’ページに移動します。もし、このページがどこにあるかわからない場合は、BuddyBossは通常your-website-url/membersに
ページを作成します。
このページで、テストで使用している他のメンバーアカウントを見つけて、「メッセージを送信」ボタンをクリックします。

その人がオンラインであることを示す緑色のアイコンが表示されるはずです。
メッセージを入力し、『送信』をクリックする。

これで、他のブラウザー・ウィンドウに切り替えると、タブを更新しなくてもすぐにこのメッセージが表示されるはずだ。
ボーナスガイド
あなたのサイトにチャットルームを作成する方法を学んだので、オンラインコミュニティとユーザーエクスペリエンスを向上させるためのヒントをさらに詳しく学びたいと思うかもしれません:
- コホート型オンラインコースを提供するには – WordPress Group Learning
- WordPressでプライベート・コミュニティを作成する方法
- Google アナリティクスでWordPressのユーザーエンゲージメントをトラッキングする方法
- Google Lighthouseとは?サイトのUXを向上させるには?
この投稿が WordPress ユーザーのためにチャットルームを作成する方法を学ぶのにお役に立てば幸いです。また、エンゲージメントを高めるためにリアクションボタンを追加する方法やWordPressサイトのUX監査を行う方法についてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Aks
Hey, does everyone who wants to partake in the chat require a wordpress account?
WPBeginner Support
The users do not need a WordPress account but you can require an account on your site if you wanted.
Admin
Alexi
Wow, great article!
WPBeginner Support
Thank you
Admin
Maja
It’s a pity that you can not embed room
on any page, e.g. shordcode, widget etc.
WPBeginner Support
We will be sure to look into alternatives with that option for future updates
Admin
Ahshan
a how can i delete chatbox pragraph
Tijjani Isah
Really Appreciate It
Ahmed Barwari
I installed and activated the plugin but its not working.
403 Forbidden
The website’s configuration prevents you from accessing this page.
Saminu Eedris
This is great.
I just got a job for an online bar, not really and online bar but there would be a platform where the visitors can interact with some of the brand ambassadors.
I think I will try out this plugin to see how it works.
Thanks,
Saminu!
asad ali
Hi
i have chat room site and i want to use wordpress chat room their is any plugin that i can use on my blog right now i am using someone else chat room scrpit but i want to add mine chat room please suggest if their is any good chat room thanks
anand kjha
how many users can use the facility of chat room at a time?
Giorgios
I used that plugin on my website – it works fine but is too simple. Mainly no file sharing feature so I switched to Chatwee. It suits me better.
HappyMoon
Hello. How do I create something like the top of your site, such as HOME »BLOG» WORDPRESS PLUGINS »HOW TO CREATE CHAT ROOMS …
Editorial Staff
Its a plugin called Breadcrumb NavXT. You can see more about it on our Blueprint page.
https://www.wpbeginner.com/blueprint/
Admin
HappyMoon
Thank you so much
Khürt L. Williams
I’m always looking for way to increase the use of our organization’s WordPress install. We have a bulletin board running on another system but I want to centralize systems. Perhaps bbpress with this plugin is the way forward.
ivica
Did you see this WP chat plugin? One of the best, if not THE best:
http://wordpress.org/extend/plugins/quick-chat/
Made in Croatia
Ivica
Editorial Staff
Didn’t know about that one. Will have to take a look at it.
Admin
Thomas
Have to agree with this. Looked into both and the one you posted is way better! I’ve been looking for something JUST like this for my site at NE1UP.com so I really appreciate it!
No worries, @WPBeginner, still love your site and it’s so beautiful.
Wouldn’t have figured this out if you hadn’t posted about WordPress chat in the first place!
Thanks guys!