WordPressでユーザー向けのチャットルームを作成する方法（2つの方法）

活気のあるオンラインコミュニティを構築することは、あなたのウェブサイトを変えることができますが、ほとんどのチャットソリューションは問題を引き起こすだけです。多くのサイトオーナーは、チャットルームを初めて試すときに苦労してこれを学びます。すべてのオプションは高額な月額料金を必要とするか、外部プラットフォームに訪問者を誘導することを強制します。

それがまさに、最も人気のあるオプションをすべてテストし、WordPressウェブサイトの所有者にとって実際に機能するチャットルームソリューションを見つけた理由です。

高額な月額サブスクリプションやサードパーティサービスに依存したり、SlackやDiscordのような外部チャットクライアントにユーザーを誘導したりすることなく、WordPressウェブサイトに魅力的なセルフホスト型チャットルームを追加する方法を説明します。

WordPressにチャットルームを追加する理由

メンバーシップサイトやオンラインフォーラムを運営している場合は、ユーザー向けのインスタントメッセージチャットルームを作成したい場合があります。

一部のウェブサイト所有者は、Slack、WhatsApp、Facebookグループ、Discordなどのサードパーティサービスの使用を選択します。しかし、これらの方法は人々をあなたのサイトから遠ざけるため、ページビューと直帰率にとっては悪いニュースです。さらに、チャット体験を完全に制御することはできません。

ウェブサイトにチャットルームを埋め込むことで、人々をより長く引きつけ、より強いコミュニティ意識を築くことができます。さらに良いことに、自己ホスト型のチャットルームを作成することで、しばしば高価な継続的なサブスクリプション料金を回避できます。

それでは、WordPressのブログやウェブサイトにチャットルームを追加する方法を見ていきましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

方法1. Simple Ajax Chat（無料WordPressプラグイン）を使用する

プレミアムWordPressプラグインや継続的なサブスクリプションの予算をかけずに、サイトにシンプルなチャットルームを追加したいですか？Simple Ajax Chatを使用すると、1セントも支払うことなく、任意のページ、投稿、またはウィジェット対応エリアにシンプルなセルフホスト型チャットルームを追加できます。

また、ログインユーザーにアクセスを制限したり、完全に公開されたチャットルームを作成したりすることもできます。詳細については、Simple Ajax Chatのレビューをご覧ください。

ステップ1.シンプルなAjaxチャットを設定する

まず、プラグインをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、設定 » シンプルAjaxチャットに移動してチャットルームを設定してください。

開始するには、「プラグイン設定」セクションをクリックして展開し、「デフォルト名」を好きなものに変更します。

また、「デフォルトメッセージ」を入力することもできます。これは、誰かがチャットルームに初めてアクセスしたときに表示されます。

次に、ユーザーがチャットルームを使用するためにログインする必要があるかどうかを決定できます。ユーザー登録を要求することは、スパムや荒らしに対処するのに役立ちますが、公開チャットルームの方が多くのユーザーを獲得できる可能性があります。

この決定を下すには、「チャットボックスを表示および使用するにはユーザーのログインが必要です」の横にあるボックスをチェックまたはチェック解除します。

WordPressがチャットでその人のユーザー名を表示するように、「ログイン中のユーザー名」の横にあるチェックボックスをオンにすることもできます。

その他のオプションとして、登録していない訪問者がチャットを閲覧することは許可するが、対話は許可しないという方法もあります。

表示されている内容を気に入った人は、会話に参加するためにアカウントを作成するかもしれません。そのため、「チャットメッセージを読み取り専用で表示する」の横にあるチェックボックスをオンにすることをお勧めします。

ステップ2.チャットルームをカスタマイズする

それが完了したら、チャットルームをカスタマイズできます。たとえば、独自のロゴ、カスタムカラー、ブランディングを追加できます。これは、Discordのような別のプラットフォームと比較して、Simple Ajax Chatのようなセルフホスト型ソリューションを選択する大きな利点です。

これらの変更を行うには、「時間と色」および「外観」ボックスの設定を使用するだけです。

デフォルトの通知アイコンを独自の画像に置き換えることもできます。たとえば、Canvaのようなウェブデザインソフトウェアを使用して作成したロゴ、アイコン、またはその他の画像を使用できます。

独自のグラフィックを追加するには、「デフォルトの通知アイコン」フィールドを見つけて「アップロード」をクリックします。

WordPressメディアライブラリから画像を選択するか、コンピューターからファイルをアップロードできます。

このセクションで変更を加えた場合は、「設定を保存」をクリックすることを忘れないでください。

ステップ3. モデレーション機能を追加する

その後、「禁止フレーズ」セクションをクリックして展開し、チャットに表示してはならない単語を入力できます。競合他社の名前、攻撃的な言葉、または訪問者のエクスペリエンスや評判を損なう可能性のあるその他の言葉が含まれる場合があります。

セルフホスト型ソリューションであるため、表示したい単語とコミュニティ内に場所がない単語を完全に制御できます。

単語をカンマで区切ってください。

再度、変更を保存するには「設定の保存」をクリックすることを忘れないでください。

さらに多くの設定を探索できるため、それらを確認してどのような変更ができるかを確認する価値があります。ただし、これでシンプルなチャットルームを作成するために必要なすべてが揃いました。WordPressウェブサイトに追加する方法を見てみましょう。

ステップ4. WordPressでチャットルームを表示する

Simple Ajax Chatを使用すると、チャットルームを表示する場所を正確に制御できるため、任意のページ、投稿、またはウィジェット対応エリアに追加できます。

チャットルームの設定が完了したら、ショートコードとテンプレートタグの領域までスクロールしてクリックして開きます。ここに、使用できるショートコードが表示されます。

チャットルームをページに追加するには、WordPressダッシュボードでPages » Add Newに移動するだけです。

これで、タイトルを入力し、アイキャッチ画像をアップロードし、カテゴリとタグを追加し、ページに表示したいその他のコンテンツを追加できます。

さらに一歩進んで、UserFeedbackのようなプラグインを使用してユーザーエクスペリエンスフィードバック調査を追加することもできます。

これは、チャットルームを改善する方法に関する貴重な提案やアイデアを得るのに役立ちます。

この柔軟性も、堅苦しいサードパーティ製ソフトウェアと比較して、Simple Ajax Chatのようなプラグインを使用することを常に推奨する理由の1つです。

チャットルームを埋め込むには、「+」記号をクリックしてから「ショートコード」と入力します。表示されたら、適切なブロックを選択できます。

その後、単に[sac_happens]ショートコードをショートコードブロックに追加します。

チャットルームを公開するには、「公開」または「更新」をクリックできるようになりました。

もう1つのオプションは、チャットルームをウィジェット対応エリアに追加することです。これは、複数のページにチャットウィンドウを表示する簡単な方法です。

新しいブロックベースのテーマのいずれかを使用している場合は、標準のWordPressコンテンツエディターでは編集できないサイトの領域にチャットルームを追加することもできます。

ステップバイステップの説明については、ウィジェットの追加と使用方法に関するガイドをご覧ください。

チャットルームをWordPressに追加する方法に関係なく、ウェブサイトのモバイルバージョンをテストすることで、すべてのデバイスで見た目が良く、正しく機能することを確認することが重要です。

このトピックの詳細については、モバイルフレンドリーなウェブサイトの作成に関する専門家のアドバイスをご覧ください。

方法2. BuddyBossを使用する（オンラインコミュニティ構築に最適）

人々が何度も戻ってきたくなるような、活気のあるオンラインコミュニティを作成したいですか？チャットルームは素晴らしいスタートですが、成功するデジタルコミュニティを構築するための一部分にすぎません。

メンバープロフィール、検索可能なディレクトリ、フォーラム、ソーシャルグループ、アクティビティフィードのような強力な機能が役立つのはこのためです。

良いニュースは？この種のエクスペリエンスを提供するために、さまざまなプラグインを組み合わせる必要がないことです。BuddyBossには、これらのすべての機能が含まれています。

BuddyBossは、市場で最高のWordPressコミュニティ構築プラットフォームです。実際、それが私たちの好きなコミュニティプラグインであるすべての理由を概説した完全なBuddyBossレビューもあります。

このガイドでは、BuddyBossを使用してサイトにライブメッセージングを追加する方法を説明します。

その他のソーシャル機能の使用方法の詳細については、WordPressで独自のプライベートコミュニティを作成する方法に関するガイドをご覧ください。

ステップ1. Pusherアカウントを作成する

BuddyBossは、ユーザーがリアルタイムでコミュニケーションできるサービスであるPusher Channelsを使用して、サイトにライブメッセージングを追加できます。 

BuddyBossを始める前に、Pusherアカウントを作成する必要があります。幸いなことに、Pusherには1日あたり最大20万通のメッセージを送信できる無料プランがあり、ほとんどのWordPressブログやウェブサイトで十分です。ただし、アップグレードが必要な場合は、月額49ドルで1日あたり最大100万通のメッセージを送信できます。

開始するには、Pusherのウェブサイトにアクセスし、「サインアップ」ボタンをクリックしてください。

次に、画面の指示に従って無料アカウントを作成できます。 

これが完了すると、Pusherダッシュボードに自動的にリダイレクトされます。この画面で、「Channels」の下にある「Get started」ボタンをクリックしてください。

これで、Pusherアプリの名前を入力できます。これはPusherダッシュボードでアプリを表すものなので、分かりやすい名前を使用することをお勧めします。

クラスターを選択することもできます。これは、Pusherアプリからのリクエストを処理するサーバーの物理的な場所です。場所を選択する際は、欧州のデータ保護規制により、個人ユーザーデータはEUの国境を越えることができないことに留意してください。

ユーザーまたはご自身のサーバーのいずれかに地理的に近い場所を選択することも理にかなっています。これにより、メッセージの送受信時に発生する可能性のある遅延が軽減されます。 

場所を選択するには、「クラスターを選択」ドロップダウンを開き、リストからオプションを選択します。 

これが完了したら、「アプリを作成」をクリックします。

アプリの設定を完了するには、左側のメニューから「アプリの設定」を選択します。次に、「クライアントイベントを有効にする」セクションまでスクロールし、スイッチをクリックして有効にします。

次に、「認証済み接続を有効にする」セクションまでスクロールします。

もう一度、このスイッチを有効にするにはクリックしてください。

アプリは現在稼働していますので、左側のメニューにある「App Keys」をクリックしてください。ここには、BuddyBossプラグインに追加する必要のあるすべての情報が含まれています。

この点を考慮して、次のいくつかの手順の間、この画面を別のタブで開いたままにしてください。

ステップ2. BuddyBossプラグインとテーマをインストールする

ライブメッセージングを設定するには、コアのBuddyBossプラグイン、BuddyBoss Platform Pro、およびBuddyBossテーマが必要です。したがって、BuddyBossのウェブサイトにアクセスして、Webパッケージまたはバンドルにサインアップしてください。

購入が完了したら、サイトにBuddyBossおよびBuddyBoss Platform Proプラグインをインストールする必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

プロンプトが表示されたら、製品ライセンスキーを入力します。この情報はBuddyBossウェブサイトのアカウントで確認できます。

次に、すべてのWebおよびバンドルパッケージに含まれているBuddyBossテーマをインストールする必要があります。 

詳細なステップバイステップの説明については、WordPressテーマのインストール方法に関するガイドをご覧ください。

ステップ3.プライベートメッセージを有効にする 

BuddyBossには多くの機能があるため、物事を簡単にするために、プラグインはこれらの機能を異なるコンポーネントに分離しています。必要な機能に応じて、これらのコンポーネントを有効または無効にできます。

これを行うには、BuddyBoss » Componentsページに移動します。 

ここで、使用できるさまざまなコンポーネントが表示されます。

WordPressにライブメッセージングを追加したいので、プライベートメッセージングコンポーネントを見つけて、「アクティベート」リンクをクリックします。

ステップ4. Pusherチャネルとの統合

次に、BuddyBoss » Integrations に移動して、WordPressサイトとPusherアカウントをリンクする準備ができました。ここで、「Pusher」リンクをクリックします。 

Pusher IDとキーを追加できる領域が表示されます。 

Pusherタブの各情報のかたまりをコピーし、WordPressダッシュボードの対応するフィールドに貼り付けるだけです。

Pusherアカウントで選択したクラスターと一致するように、「Pusherクラスター」フィールドを変更する必要がある場合もあります。 

それが完了したら、WordPressダッシュボードで「設定を保存」をクリックします。すべてが正常に機能している場合、画面の上部に緑色の「接続済み」メッセージが表示されます。

「ライブメッセージング」フィールドも新しく表示されます。

このオプションの横にあるチェックボックスをオンにしてください。

最後に、「設定を保存」をクリックして変更を保存します。 

ステップ5.ライブチャットをテストする 

すべてが正常に機能していることを確認するために、新しいチャット機能をテストすることをお勧めします。これを行うには、ブラウザのシークレットモードを使用して、2つの異なるメンバーアカウントにログインする必要があります。

次に、BuddyBossが自動的に作成する「メンバー」ページに移動します。このページがどこにあるかわからない場合は、通常、BuddyBossはそれをあなたのウェブサイトURL/membersに作成します。

このページで、テストに使用している別のメンバーアカウントを見つけ、「メッセージを送信」ボタンをクリックします。  

その人がオンラインであることを示す緑色のアイコンが表示されるはずです。

メッセージを入力して、「送信」をクリックしてください。

さて、別のブラウザウィンドウに切り替えると、タブを更新する必要なく、すぐにこのメッセージを受信するはずです。

追加ガイド

ウェブサイトでチャットルームを作成する方法を学んだので、オンラインコミュニティとユーザーエクスペリエンスを改善するためのヒントをさらに学びたいかもしれません。

• コホートベースのオンラインコースの提供方法 — WordPressグループ学習
• WordPressで独自のプライベートコミュニティを作成する方法
• Google Analyticsを使用してWordPressでユーザーエンゲージメントを追跡する方法
• Google Lighthouseとは？サイトのUXをどのように改善できるか？
• WordPressでウェブサイトデザインのフィードバックを得る方法（ステップバイステップ）
• WordPressでビジュアルリグレッションテストを簡単に行う方法

この記事がWordPressユーザー向けのチャットルームの作成方法を学ぶのに役立ったことを願っています。また、エンゲージメントを高めるためのリアクションボタンの追加方法やWordPressウェブサイトのUX監査の実行方法に関するガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。