WordPress に WhatsApp チャットボックスと共有ボタンを追加する方法

WordPressにWhatsAppチャットボックスとシェアボタンを追加したいですか？

WhatsAppは最も人気のあるメッセージングプラットフォームの一つで、世界中に28億人以上のユーザーがいます。Whatsappシェアボタンを追加することで、ユーザーとカスタマイザーがつながり、ユーザーエンゲージメントを高めることができます。

この投稿では、WordPressにWhatsApp共有ボタンを簡単に追加する方法をご紹介します。

WordPressにWhatsAppボタンを設置するメリット

WhatsAppは、世界中の人々が簡単に連絡を取り合えるインスタントメッセージングアプリです。

WordPressサイトにWhatsAppシェアボタンを追加することで、訪問者は簡単にコンテンツを共有することができます。

さらに、WhatsAppチャットボックスを追加することで、ユーザーとの直接会話が有効化されます。

例えば、オンラインストアの場合、カスタマイザーは WhatsApp チャットボタンを使って、フォームに入力したり、カスタマーサポートに問い合わせたりすることなく、商品のクエリーを行うことができます。

ユーザーのエンゲージメントを高め、お買い物カゴの放棄率を下げることができます。

それでは、WordPressにWhatsApp共有ボタンを追加する方法をご紹介しましょう。

方法1: WordPressにWhatsApp共有ボタンを追加する

WhatsApp シェアボタンをサイトに追加したい場合は、この方法をご利用ください。

まず、Sassy Social Shareプラグインをインストールして有効化する必要があります。より詳細な手順については、WordPressプラグインのインストール方法に関する初心者ガイドをご覧ください。

有効化したら、WordPressの管理サイドバーからSassy Social Shareメニューにアクセスしてください。ここから、上部にある「標準インターフェース」タブに切り替える必要があります。

共有サービスを選択 “セクションまでスクロールし、WhatsApp設定にチェックを入れます。

Facebook、Instagram、Pinterest、Twitterなど、他のソーシャルメディアプラットフォーム用の共有ボタンを追加することもできます。

設定が完了したら、忘れずに「変更を保存」ボタンをクリックして設定を保存し、「テーマ選択」タブに進みます。

共有ボタンのサイズ、形状、ロゴ、背景色などをカスタマイズできます。共有ボタンはWhatsAppのブランドカラーに合わせると、ユーザーに認識されやすくなります。

設定が完了したら、「変更を保存」ボタンをクリックして設定を保存します。

サイトにてWhatsAppシェアボタンの動作をご確認いただけます。

これがデモサイトでの様子です。

全てのページにWhatsAppボタンを追加するのは面倒。プラグインを使えば個別投稿やページにも簡単に追加できます。

ブロックエディターにWhatsApp共有ボタンを追加

特定の投稿日やページにのみWhatsApp共有ボタンを表示させたい場合、まず共有ボタンのグローバル表示をオフにする必要があります。

そのためには、WordPressの管理サイドバーにあるSassy Social Shareページに行き、「標準インターフェース」タブに切り替えるだけです。

次に、「標準共有インターフェースを有効化」オプションのチェックを外す必要があります。

次に、「フローティング・インターフェース」タブに切り替える。

ここから、「フローティング共有インターフェースを有効化」オプションの隣のボックスのチェックを外す。

標準のソーシャル共有ボタンとフローティング共有ボタンを無効化した後は、ショートコードを使ってサイト上のページや投稿に共有ボタンを追加してください。

WhatsApp シェアボタンを表示させたい投稿やページをコンテンツエディターで開きます。

ここから、左上の「ブロックを追加（＋）」ボタンをクリックし、「ショートコード」ブロックを検索するだけです。その後、ブロックをページに追加します。

次に、以下のショートコードをコピー＆ペーストして、「ショートコード」ブロックに貼り付ける。

[Sassy_Social_Share]

完了後、’公開’ または ‘更新’ ボタンをクリックして変更を保存します。WhatsApp共有ボタンはこのように表示されます。

WhatsApp共有ボタンをウィジェットとして追加する

サイトサイドバーにWhatsAppシェアボタンを追加するには、管理画面サイドバーの外観 ” ウィジェットページをご覧下さい。

ここから、左上の「ブロックを追加（＋）」ボタンをクリックし、「ショートコード」ブロックを見つけます。

次に、サイドバーに「ショートコード」ブロックを追加する必要がある。

その後、以下のショートコードをコピー＆ペーストしてブロックに貼り付けるだけです。

[Sassy_Social_Share]

次に、「更新」ボタンをクリックして設定を保存します。

WhatsApp共有ボタンをサイトサイドバーに追加すると、このように表示されます。

フルサイトエディターでWhatsAppシェアボタンを追加する

ブロックテーマを使用している場合は、フルサイトエディターを使用することになり、「ウィジェット」ページにはアクセスできません。

まず、管理サイドバーから外観 ” エディターオプションにアクセスし、完全なサイトエディターを起動する必要があります。

次に、画面上部の「ブロックを追加」（＋）ボタンをクリックし、「ショートコード」ブロックをサイトの適当な場所に追加します。

その後、以下のショートコードをブロックに追加する。

[Sassy_Social_Share]

完了したら、上部にある「保存」ボタンをクリックします。

WhatsApp共有ボタンはデモサイトではこのように表示されました。

方法2: WordPressにWhatsAppチャットボックスボタンを追加する

WordPressにWhatsAppチャットボックスボタンを追加する方法です。

つまり、ユーザーがWhatsAppチャットボタンをクリックすると、あなたのWhatsApp電話番号にダイレクトメッセージが送信されます。

まず、Click to Chatプラグインをインストールして有効化する必要があります。詳しい手順については、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、WordPress 管理ダッシュボードのサイドバーに追加されたClick to Chatメニュー項目に移動します。

まず「WhatsApp番号」フィールドにビジネス電話番号を入力してください。

ユーザーからのメッセージを受信する電話番号になります。

その後、「入力済みメッセージ」フィールドに簡単なメッセージを入力します。これが初期設定メッセージとなり、WhatsAppチャットウィンドウに表示されます。

次に、「スタイル、ポジション」セクションまでスクロールダウンする必要がある。

まずドロップダウンメニューからWhatsAppチャットボックスのスタイルを選択します。初期設定では約8種類のスタイルが用意されています。お好みのスタイルをお選び下さい。

その後、”Position to Place “セクションまでスクロールダウンしなければならない。

ここから、ドロップダウンメニューからチャットボックスの位置とサイズを選択することができます。

次に、「ディスプレイ設定」セクションに行く必要がある。

WhatsAppチャットボックスを表示するオプションの隣にある「グローバル」ボックスにチェックを入れて下さい。

例えば、投稿日、ページ、カテゴリーページにチャットボックスを表示したい場合、「グローバル」オプションを設定する必要があります。

特定のページにWhatsAppチャットボックスを表示したくない場合、「非表示」オプションを設定することもできます。

最後に、「変更を保存」ボタンをクリックして設定を保存することをお忘れなく。

Click to Chat ” Greetings ページでドロップダウンメニューからGreetingダイアログを選択してください。

この挨拶ダイアログはWhatsAppボタンと共にページに表示されます。

選択したら、挨拶ダイアログのヘッダー、メインコンテンツ、コールトゥアクションのコンテンツを入力する必要があります。

その後、「カスタマイズ可能なデザイン」セクションまでスクロールダウンする。

ここで、メインコンテンツ、ヘッダー、メッセージボックスの背景色を選択できます。

その後、「変更を保存」ボタンをクリックするだけで、設定が保存されます。

次に、サイトを訪問する必要がある。

初期設定ではこのように表示されます。

ブロックエディター、ウィジェット、フルサイトエディターでWhatsAppチャットボタンを簡単に追加する方法をご紹介します。

ブロックエディターにWhatsAppチャットボタンを追加

ブロックエディターを使って、WordPressサイトの特定のページや投稿に簡単にWhatsAppボタンを追加できます。

このチュートリアルではWhatsAppボタンをページに追加します。

まず、管理サイドバーからページ ” 新規追加ページにアクセスします。

これでブロックエディターが起動する。

画面左上の「Add Block」（＋）ボタンをクリックし、「Shortcode」ブロックをクリックします。

ショートコード」ブロックが追加されたら、以下のショートコードをコピー＆ペーストしてブロックに貼り付ける。

[ht-ctc-chat]

その後、上部にある「公開する」ボタンをクリックするだけです。

デモサイトでのWhatsAppボタンの表示です。

WhatsApp チャットボタンをウィジェットとして追加

この方法では、WhatsAppボタンをサイトのサイドバーにウィジェットとして簡単に追加する方法をご紹介します。

まず、WordPressのサイドバーから外観 ” ウィジェットのページに移動します。

サイドバー」タブをクリックして展開し、上部にある「ブロックを追加」（＋）ボタンをクリックします。次に、「ショートコード」ブロックを探してサイドバーに追加します。

次のショートコードをコピー＆ペーストしてブロックに貼り付けるだけです。

[ht-ctc-chat]

最後に「更新」ボタンをクリックし、設定を保存することをお忘れなく。

デモサイトのサイドバーにWhatsAppボタンが追加された様子です。

フルサイトエディターに WhatsApp チャットボタンを追加

フルサイトエディター付きのブロックベースのテーマを使っている場合は、この方法が適している。まず、外観 ” エディターページに行き、フルサイトエディターを起動します。

画面左上の「ブロックを追加」（＋）ボタンをクリックします。ここで、「ショートコード」ブロックを探し、サイトのお好きな場所に追加します。

ブロックが追加されたら、以下のショートコードをコピー＆ペーストしてブロックに貼り付けるだけです。

[ht-ctc-chat]

最後に、上部の「更新」ボタンをクリックして変更を保存することをお忘れなく。

これがサイト上のWhatsAppボタンの様子です。

ボーナス：WordPressにソーシャルシェアボタンを追加する

WhatsApp以外にも、Facebook、Instagram、Twitterなどのシェアボタンを追加することができます。これにより、ユーザーが各自のソーシャルメディアプロフィールでコンテンツをシェアし、リーチを拡大することができます。

Social Snapプラグインを使用してこれを行うことができます。有効化した後、Social Snap ” Settingsにアクセスし、’Inline Buttons’タブを選択します。

ボタンを表示する場所を選択し、サイト上のどこに表示するかを選択できます。

設定が完了したら、「変更を保存」ボタンをクリックして設定を保存します。詳しくは、WordPressにソーシャルシェアボタンを追加する方法のチュートリアルをご覧ください。

WordPress に WhatsApp シェアボタンを設置する方法をご紹介しました。WordPress ユーザー向けソーシャルメディアモニタリングツールや初心者向けメールリスト作成ガイドもご覧ください。

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.