サイトにクリック・トゥ・コールボタンを追加すると、ユーザーはスマートフォンから簡単に連絡できるようになり、エンゲージメントの向上とコンバージョンの増加につながります。
私たちは、日々顧客とコミュニケーションをとる様々なオンラインストアやビジネスを運営してきました。これにより、電話、メール、オンラインを通じてビジネスがユーザーとつながるための最善の方法を学びました。
実際、私たちはこのチュートリアルで最初に紹介されたプラグインを開発しました。なぜなら、シンプルで効果的なクリックして電話するソリューションに対する需要が高まっていることに気づいたからです。
この記事では、WordPressウェブサイトにクリック・トゥ・コールボタンを簡単に追加する方法をご紹介します。
WordPressにクリックコールボタンを追加する理由
多くの小規模ビジネスのウェブサイトは、見積もり、販売前の情報、またはサポートのために顧客からの連絡に依存しています。
そのため、すべてのウェブサイト所有者には問い合わせフォームの追加をお勧めします。
ただし、業界によっては、すぐに担当者と話したいユーザーもいるかもしれません。
世界中でモバイルウェブトラフィックが増加するにつれて、ユーザーは情報を得るためにタップして電話をかける方が便利だと感じることがよくあります。
さらに、クリックコールボタンを追加することで、WordPressサイトをよりモバイルフレンドリーにすることで、SEOを改善することもできます。
ビジネスを始めたばかりの場合は、プロフェッショナルなビジネス電話サービスを検討することをお勧めします。これにより、コール転送、従業員との番号共有、どこからでも携帯電話で電話に応答することができます（固定電話の代わりに）。
それでは、WordPressにクリック・トゥ・コールボタンを簡単に追加する方法を見てみましょう。
- 方法1：WordPressにクリック・トゥ・コールボタンを追加する
- 方法2：WordPressにクリックして電話するボタンを手動で追加する
- WordPressナビゲーションメニューにクリックコールリンクを追加する
- ボーナス：WordPressにWhatsAppチャットボックスを追加する
- 動画チュートリアル
方法1：WordPressにクリック・トゥ・コールボタンを追加する
この方法は簡単で、すべてのユーザーにおすすめです。Gutenberg、クラシックエディター、WordPressサイドバーウィジェットでクリックして電話するボタンを簡単に作成できるだけでなく、固定のフローティング通話ボタンも作成できます。
まず、サイトにWP Call Buttonプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化後、WordPress管理画面のサイドバーにある設定 » WP Call Buttonページにアクセスして、プラグインの設定を構成してください。
最初の設定ページは、最も一般的に要求される機能である、ユーザーがウェブサイトを閲覧する際に一緒にスクロールするスティッキーコールボタン用です。
このコンバージョン最適化された機能は、より多くの電話を受け、より速く取引を成立させるのに役立ちます。
まず、人々が電話をかけるビジネスの電話番号を入力する必要があります。
WP Call Buttonプラグインはスマートフォンフィールドを使用しているため、国を選択するだけで、国コードが適切な形式で自動的に追加されます。
☝ 注: ビジネス用電話番号をお持ちでない場合は、Nextiva から取得できます。当社では、ビジネスVoIP電話のニーズにNextivaを利用しています。
次に、コールボタンのテキストを追加し、配置を選択し、ボタンの色を選択するオプションがあります。
デフォルトでは、プラグインはすべてのページとデバイスにクリックして電話をかけるボタンを追加します。ただし、特定のページのみ、またはモバイルデバイスのみに表示することを選択できます。
完了したら、上部のアクティベートトグルをクリックし、「変更を保存」ボタンをクリックして設定を保存するだけです。
その後、ウェブサイトにアクセスして、通話ボタンが機能していることを確認できます。
WordPressのお問い合わせページ、会社概要ページ、またはその他の投稿/ページに、固定の通話ボタンを追加したい場合、2つの選択肢があります。
WordPressブロックエディターを使用している場合は、既存のページを作成または編集するだけです。
次に、画面左上の「ブロックを追加」ボタンをクリックしてブロックメニューを開きます。ここから、WPコールボタンブロックをページに追加します。
WordPressコールボタンブロックには、ボタンの色、ボタンのテキスト、フォントサイズ、電話アイコンの表示/非表示などのカスタマイズオプションが多数用意されています。
ボタンを追加すると、ユーザーはWP Call Buttonの設定ページで指定した電話番号をクリックして発信できるようになります。
ボタンのカスタマイズが完了したら、「公開」または「更新」ボタンをクリックするだけで設定が保存されます。
WordPressクラシックエディターを使用している場合は、ショートコードを取得するために静的コールボタンジェネレーターを使用する必要があります。
設定 » WPコールボタンにアクセスし、上部にある「静的コールボタン」メニューをクリックしてください。
次に、コールボタンのテキストと色をカスタマイズし、電話アイコンを表示するか非表示にするかを選択できます。
その後、下にスクロールして、ページや投稿に通話ボタンを追加するためのショートコードをコピーします。
次に、ボタンを追加したいページまたは投稿を開き、そこにショートコードを貼り付けます。
クラシックエディターにコールボタンを正常に追加しました。
WP Call Buttonプラグインでは、サイドバーウィジェットブロックを使用して、ウェブサイトのサイドバーに通話ボタンを追加することもできます。
これを行うには、WordPress管理画面から外観 » ウィジェットページにアクセスし、「+」ボタンをクリックしてブロックメニューを開く必要があります。
ここから、WPコールボタンブロックをウィジェット対応エリアに追加します。
次に、右側のブロックパネルから通話ボタンの外観をさらにカスタマイズできます。
例えば、ボタンサイズの変更、電話アイコンの非表示、ボタンの中央揃え、背景色やテキスト色の編集などのオプションがあります。
変更が完了したら、「更新」ボタンをクリックすることを忘れないでください。
これを読めば、WP Call Buttonが市場で最も簡単で包括的なWordPressクリック・トゥ・コールボタンプラグインである理由がわかるでしょう。
最も良い点は、それが100%無料であり、Googleアナリティクスとのシームレスな統合を備えていることです。
MonsterInsightsプラグインを使用するだけで、何人が通話ボタンをクリックしたか、どのページが最も多くのリードを獲得しているかを自動的に追跡できるため、ビジネスをより速く成長させるために効果的なものに集中できます！
方法2：WordPressにクリックして電話するボタンを手動で追加する
この方法では、WordPressブログのどこにでもクリックして電話するボタンやリンクを手動で追加できます。
ウェブサイトにクリック可能な電話番号を追加する最も簡単な方法は、次のように追加することです。
<!--This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked -->
<a href="tel:+15555551212">+1 (555) 555-1212</a>
<a href="tel:15555551212">Call Me</a>
これらのリンクは、モバイルデバイスで電話アプリを開きます。デスクトップコンピューターでは、MacユーザーはFaceTimeでリンクを開くオプションが表示され、Windows 10/11ユーザーはSkypeで開くオプションが表示されます。
HTMLを使用して、クリック・トゥ・コールテキストリンクの隣に画像またはアイコンを追加することもできます。
これがどのように行われるか見てみましょう。
まず、メディア » 新規追加ページにアクセスし、使用したい画像をアップロードする必要があります。画像をアップロードしたら、続行するには「編集」リンクをクリックする必要があります。
これによりメディア編集画面が表示され、ファイルURLをコピーする必要があります。次のステップで必要になります。
クリック・トゥ・コール電話アイコンを表示したい投稿、ページ、またはカスタムHTMLウィジェットを編集できるようになりました。編集エリアで、tel:リンクで囲まれた電話アイコン画像を追加できます。
<a href="tel:+15555551212"><img src="https://example.com/wp-content/uploads/2018/10/phoneicon2.png" alt="Call us" /></a>
完了したら、ウェブサイトにアクセスして、アップロードした画像付きのクリック・トゥ・コールリンクを確認できます。
リンクの前後にさらにテキストを追加したり、カスタムCSSを使用してスタイルを設定することで、さらにカスタマイズできます。
デモウェブサイトではこのようになります。
WordPressナビゲーションメニューにクリックコールリンクを追加する
WordPressナビゲーションメニューにクリックして電話するリンクを追加することもできます。
単純に外観 » メニューページにアクセスし、右側の列にあるカスタムリンクタブをクリックします。次に、以下の形式でリンクフィールドに電話番号を追加できます。
tel:+155555555
その後、表示したいテキストを追加し、「メニューに追加」ボタンをクリックします。
次に、ウェブサイトにアクセスして、クリックして電話するリンクが機能していることを確認してください。
ただし、ブロックベースのテーマを使用している場合は、WordPress管理サイドバーから外観 » エディターページにアクセスする必要があります。
これにより、フルサイトエディターが起動します。ここで、編集したいテンプレートパーツとして「ヘッダー」を選択する必要があります。
その後、次の画面に移動し、WordPressのヘッダーが表示されます。
ここから、「編集」アイコンをクリックしてナビゲーションメニューのカスタマイズを開始します。
次に、ナビゲーションメニューの「+」ボタンをクリックして、「リンクを追加」プロンプトを開きます。
ここで、電話番号を入力し、「Enter」ボタンを押してナビゲーションメニューに追加します。
これが完了したら、画面の右隅にあるブロックパネルからラベルを変更できます。
最後に、上部にある「保存」ボタンをクリックして設定を保存します。
これで、ナビゲーションメニューの「電話をかける」リンクをクリックしたユーザーは、あなたに連絡できるようになります。
ボーナス：WordPressにWhatsAppチャットボックスを追加する
顧客からの電話に出る時間がない場合は、ウェブサイトにシンプルなWhatsAppチャットボックスを追加して、訪問者がメッセージを残せるようにすることができます。その後、電話ではなくテキストで返信できます。
20億人以上の人々がメッセージングにWhatsAppを使用しているため、これは顧客の問い合わせに役立ちます。
WhatsAppチャットボックスを追加するには、Click to Chatプラグインをインストールして有効化する必要があります。詳細は、WordPressプラグインのインストール方法の初心者向けガイドをご覧ください。
有効化したら、WordPressダッシュボードからクリックしてチャットメニュータブにアクセスし、ビジネスの電話番号を入力してください。この番号にユーザーからのメッセージが届きます。
次に、チャットボックスをカスタマイズし、顧客に表示したい投稿またはページを選択できます。完了したら、ブロックエディターにアクセスして、WhatsAppチャットボックスのショートコードを追加するだけです。
その後、「更新」または「公開」ボタンをクリックして設定を保存します。
これで、電話に出たくないユーザーがメッセージを残せるWhatsAppチャットボックスが正常に追加されました。
詳細な手順については、WordPressにWhatsAppチャットボックスと共有ボタンを追加する方法のチュートリアルをご覧ください。WordPressにWhatsAppチャットボックスと共有ボタンを追加する方法。
動画チュートリアル
文章での説明がお好みでない場合は、ビデオチュートリアルをご覧ください。
この記事がWordPressにクリックコールボタンを追加する方法を学ぶのに役立ったことを願っています。また、5分で無料のビジネスメールアドレスを作成する方法の初心者向けガイドや、最高のSMSマーケティングプラグインの専門家によるピックもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
共有したいことの1つは、クリック・トゥ・コールボタンを追加する前にコールトラッキング番号を設定することです。各マーケティングチャネルに異なる番号を使用するだけです。これにより、電話のリードがどこから来るのかが正確にわかります。
モイヌディン・ワヒード
この情報がずっと探し求めていたものだったので、大変大変役立つ記事でした。
クリックコールボタンは、ユーザーがあなたの製品やサービスに積極的に参加し、連絡を取るための効果的な方法です。
生徒たちが様々なコースに関する質問を簡単にできるように、私のコーチングウェブサイトにクリックコールボタンを実装する必要があります。
Dayo Olobayo
この役立つチュートリアルに感謝します。10分以内にウェブサイトにクリックして電話するボタンを追加できました。ユーザーエクスペリエンスを向上させるための、非常にシンプルでありながら効果的な方法です。モバイル訪問者はワンタップで私に電話できることを喜んでいます。
WPBeginnerサポート
Glad our guide could help
管理者
Branka
こんにちは、ボタン内のテキストのサイズを変更するにはどうすればよいですか？
WPBeginnerサポート
フォントサイズを変更するにはCSSを使用する必要があります。以下の記事は、ボタンを追加する方法に応じて、正しいセレクターを見つけて追加するのに役立つはずです！
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Uko eben
中古の携帯電話ガジェットのみを販売するeコマースウェブサイトを作成したいのですが、販売者に連絡するための「チャットボタンと電話番号ボタン」を追加することは非常に重要です。私のニーズに関連する記事を検索しましたが、あなたのウェブサイトでは解決策が見つかりませんでした。解決策が必要です。
WPBeginnerサポート
そのカスタマイズについては、サイトにECオプションを追加するために使用しているプラグインを確認する必要があります。通常、それを行う方法があります。
管理者
Mona
ページごとに異なる電話番号を持つコールボタンはありますか？また、相手が通話中かビジーかを表示する機能はありますか？
WPBeginnerサポート
現時点ではできません。
管理者
Kelly D.
参照したGutenbergエディターのドキュメントを参照またはリンクしていただけますか？フッター内の「お問い合わせ」ページにWP Callを追加したいと思います。
WPBeginnerサポート
Any guides we mention should normally be linked if you click the orange text in the article
管理者
rajneesh
素晴らしい記事に感謝します！まさに必要としていた情報です。訪問者と直接連絡を取るために私のサイトで利用します。素晴らしい仕事です！
WPBeginnerサポート
Glad you found our content helpful
管理者
スペンサー・ピアソン
素晴らしい投稿です！CTAボタン（ウェブサイト自体にある）は、色やフォーマットなどで明確に目立つようにすべきであることも言及したいと思います。
WPBeginnerサポート
Thank you for sharing your recommendation
管理者
スペンサー・ピアソン
素晴らしい記事を共有していただきありがとうございます
WPBeginnerサポート
You’re welcome, glad our article could be helpful
管理者
Alan
「外観 » メニューページに移動するだけ…」 見つからないので、始めることすらできません。おそらく古いインターフェース用でしょう。
WPBeginnerサポート
サイトにログインしていて、wp-adminエリアにいれば、そこにあるはずです。表示されない場合は、WordPress.comをご利用の可能性があります。比較ガイドはこちらです。
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
マイケル・ウィリアム
記事を投稿していただきありがとうございます。本当に役立ち、有益です。
WPBeginnerサポート
Glad you found our article helpful
管理者
ヘレン
素晴らしい記事をありがとうございます！まさに必要としていた情報です。訪問者と直接連絡を取るために私のサイトで使用します。素晴らしい出来栄えです！
WPBeginnerサポート
You’re welcome, glad you like our article
管理者
Masoud
こんにちは、
この役立つ記事をありがとうございます。
それで、私は家電修理に関するウェブサイトを持っています。
そして、各項目には独自のページがあります。
例えば、冷蔵庫修理には独自のページがあり、エアコン修理には独自のページがあります。
私はこれをしたいです：各ページに電話番号を定義します。そして、ページビューアがボタンをタッチすると、関連するマスターが電話に出ます。
何かアイデアはありますか？
ありがとうございます
WPBeginnerサポート
現時点ではプラグインではそれができません。使用できる方法の1つは、各ページにウィジェットを用意し、ウィジェットでボタンを手動で作成し、表示したいウィジェットを条件付きで表示することです。これは、この記事の方法と同様です：https://www.wpbeginner.com/plugins/how-to-show-or-hide-widgets-on-specific-wordpress-pages/
管理者
Quy
素晴らしい記事をありがとうございます！
WPBeginnerサポート
Glad you like our content
管理者
トム
ウェブサイトのフッターに複数の連絡先番号がありますが、3つの電話番号（固定電話1台＋携帯電話2台）すべてをClick-to-Call（クリックして電話）対応にすることはできますか？
よろしくお願いします！
WPBeginnerサポート
これらの数値を編集できる場合は、手動でクリックして電話をかける方法を使用できます。
管理者
イオヌット
プラグインでアナリティクスを有効にした後、通話回数を確認するにはどこに行けばよいですか？
WPBeginnerサポート
トラッキングにはGoogle Analyticsを使用します。プラグインのサポートに連絡すれば、具体的な場所を教えてくれるはずです。
管理者
ユージーン
このプラグインは、「コールバックトラッカー」プラグインのようなコールバック機能に対応していますか？訪問者がリクエストからわずか数秒で私から電話を受けることができる方が便利だとわかりました。
WPBeginnerサポート
現時点では、このプラグインはモバイル訪問者があなたに電話するためのボタンを追加するものです。
管理者
Stiven
こんにちは、その人の場所によって番号を変更する可能性はありますか？つまり、米国には番号、スペインには別の番号ですか？
WPBeginnerサポート
Stiven様
このプラグインではそれはできないようです。
管理者
デビッド・コーニッシュ
タイムリーな記事です。コールボタンをクリックして電話をかける方法についての情報がまさに必要でした。完璧です！！！！本当にありがとうございます。
Kamran awan
素晴らしい記事を共有していただきありがとうございます。これからも良い仕事を続けてください。