サイトにクリック・トゥ・コールボタンを追加すると、ユーザーはスマートフォンから簡単に連絡できるようになり、エンゲージメントの向上とコンバージョンの増加につながります。
私たちは、日々顧客とコミュニケーションをとる様々なオンラインストアやビジネスを運営してきました。これにより、電話、メール、オンラインを通じてビジネスがユーザーとつながるための最善の方法を学びました。
実際、私たちはこのチュートリアルで最初に紹介されたプラグインを開発しました。なぜなら、シンプルで効果的なクリックして電話するソリューションに対する需要が高まっていることに気づいたからです。
この記事では、WordPressウェブサイトにクリック・トゥ・コールボタンを簡単に追加する方法をご紹介します。
💡WordPressにクリックで電話をかけるボタンを追加する方法
お急ぎですか？WordPressにクリックで電話をかけるボタンを追加する最も簡単な3つの方法をご紹介します。
- 方法1：WP Call Button プラグインを使用する – 初心者の方や、固定フローティングバー、Gutenbergブロック、サイドバーウィジェットでカスタム通話ボタンを使用したい方に最適です。
- 方法2：手動でクリックで電話をかけるリンクを追加する – HTMLを使用して、投稿、ページ、またはウィジェットのどこにでもクリック可能な電話番号を埋め込みたい場合に最適です。
- 方法3：ナビゲーションメニューにクリックで電話をかけるリンクを追加する – サイト全体での視認性に最適です。ユーザーは追加のプラグインなしで、デスクトップとモバイルのヘッダーメニューで常に電話番号を見つけることができます。
WordPressにクリックコールボタンを追加する理由
WordPressにクリックで電話をかけるボタンを追加すると、訪問者は特にモバイルデバイスから、すぐにあなたに電話をかけることができます。
これにより、より多くのリードを獲得し、より迅速なサポートを提供できます。
多くの小規模ビジネスのウェブサイトは、見積もり、質問、またはサポートのために電話に依存していますが、フォームの返信を待たずに、すぐに誰かと話したいと思うユーザーもいます。
クリックで電話をかけるボタンを使用すると、ワンタップでそれが可能になります。
ビジネスを始めたばかりの場合は、プロフェッショナルなビジネス電話サービスの利用を検討することをお勧めします。これにより、コールフォワーディング、従業員との番号共有、どこからでも携帯電話での通話応答（固定電話ではなく）が可能になります。
それでは、WordPressにクリック・トゥ・コールボタンを簡単に追加する方法を見てみましょう。
方法1：WordPressにクリック・トゥ・コールボタンを追加する
この方法はより簡単で、すべてのユーザーにおすすめです。WordPressのブロックエディター、クラシックエディター、WordPressサイドバーウィジェット、さらには固定フローティング通話ボタンに、クリックで電話をかけるボタンを簡単に作成できます。
まず、サイトにWP Call Buttonプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化後、WordPress管理画面のサイドバーにある設定 » WP Call Buttonページにアクセスして、プラグインの設定を構成してください。
最初の設定ページは、最も一般的に要求される機能である、ユーザーがウェブサイトを閲覧する際に一緒にスクロールするスティッキーコールボタン用です。
このコンバージョン最適化された機能は、より多くの電話を受け、より速く取引を成立させるのに役立ちます。
まず、人々が電話をかけるビジネスの電話番号を入力する必要があります。
WP Call Button プラグインは国際電話番号フィールドを使用します。これにより、国を選択するだけで、国コードが適切な形式で自動的に追加されます。
☝ 注意： ビジネス用電話番号をお持ちでない場合は、Nextivaから取得できます。これは、当社のビジネスVoIP電話ニーズに利用している会社です。
次に、コールボタンのテキストを追加し、配置を選択し、ボタンの色を選択するオプションがあります。
デフォルトでは、プラグインはすべてのページとデバイスにクリックして電話をかけるボタンを追加します。ただし、特定のページのみ、またはモバイルデバイスのみに表示することを選択できます。
完了したら、上部のアクティベートトグルをクリックし、「変更を保存」ボタンをクリックして設定を保存するだけです。
その後、ウェブサイトにアクセスして、通話ボタンが機能していることを確認できます。
WordPressのお問い合わせページ、会社概要ページ、またはその他の投稿/ページに静的なコールボタンを追加したい場合は、2つのオプションがあります。
WordPressブロックエディターを使用している場合は、既存のページを作成または編集するだけです。
次に、画面左上の「ブロックを追加」ボタンをクリックしてブロックメニューを開きます。ここから、WPコールボタンブロックをページに追加します。
WordPressコールボタンブロックには、ボタンの色、ボタンのテキスト、フォントサイズ、電話アイコンの表示/非表示などのカスタマイズオプションが多数用意されています。
ボタンを追加すると、ユーザーはWP Call Buttonの設定ページで指定した電話番号をクリックして発信できるようになります。
ブロック内でボタンをカスタマイズすると、変更が適用されます。その後、ページまたは投稿の「公開」または「更新」ボタンをクリックするだけで、それらの変更がウェブサイトに保存されます。
次に、WordPressクラシックエディターを使用している場合は、Static Call Buttonジェネレーターを使用してショートコードを取得する必要があります。
設定 » WPコールボタンにアクセスし、上部にある「静的コールボタン」メニューをクリックしてください。
次に、コールボタンのテキストと色をカスタマイズし、電話アイコンを表示するか非表示にするかを選択できます。
その後、下にスクロールして、ページや投稿に通話ボタンを追加するためのショートコードをコピーします。
次に、ボタンを追加したいページまたは投稿を開き、そこにショートコードを貼り付けます。
クラシックエディターにコールボタンを正常に追加しました。
WP Call Button プラグインでは、ウィジェット画面を使用して、ウェブサイトのサイドバーにコールボタンを追加することもできます。
これを行うには、WordPress管理画面から外観 » ウィジェットページにアクセスし、「+」ボタンをクリックしてブロックメニューを開く必要があります。
ここから、WPコールボタンブロックをウィジェット対応エリアに追加します。
次に、右側のブロックパネルから通話ボタンの外観をさらにカスタマイズできます。
例えば、ボタンサイズの変更、電話アイコンの非表示、ボタンの中央揃え、背景色やテキスト色の編集などのオプションがあります。
変更が完了したら、「更新」ボタンをクリックすることを忘れないでください。
これを読めば、WP Call Buttonが市場で最も簡単で包括的なWordPressクリック・トゥ・コールボタンプラグインである理由がわかるでしょう。
最も良い点は、100％無料であり、Google Analyticsとのシームレスな統合を備えていることです。
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>
これらのリンクは、モバイルデバイスで電話アプリを開きます。デスクトップコンピューターでは、これらのリンクをクリックすると、コンピューターの設定に応じて、通常は Facetime や 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のヘッダーが表示されます。
ここから、「編集」アイコンをクリックしてナビゲーションメニューのカスタマイズを開始します。
次に、ナビゲーションメニューの「+」ボタンをクリックして、「リンクを追加」プロンプトを開きます。
ここで、電話番号を `tel:+15555551212` の形式（ご自身の番号を使用）で入力し、「Enter」ボタンを押してナビゲーションメニューに追加します。
これが完了したら、画面の右隅にあるブロックパネルからラベルを変更できます。
最後に、上部にある「保存」ボタンをクリックして設定を保存します。
これで、ナビゲーションメニューの「電話をかける」リンクをクリックしたユーザーは、あなたに連絡できるようになります。
ボーナス：WordPressにWhatsAppチャットボックスを追加する
顧客からの電話に出る時間がない場合は、ウェブサイトにシンプルなWhatsAppチャットボックスを追加して、訪問者がメッセージを残せるようにすることができます。その後、電話ではなくテキストで返信できます。
20億人以上の人々がメッセージングにWhatsAppを使用しているため、これは顧客の問い合わせに役立ちます。
WhatsAppチャットボックスを追加するには、Click to Chatプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
有効化したら、WordPressダッシュボードからクリックしてチャットメニュータブにアクセスし、ビジネスの電話番号を入力してください。この番号にユーザーからのメッセージが届きます。
その後、チャットボックスをカスタマイズし、顧客に表示したい投稿またはページを選択できます。完了したら、チャットボックスを表示したい投稿またはページをブロックエディターで開きます。
次に、「ショートコード」ブロックを追加し、WhatsApp チャットボックスのショートコード（プラグインが提供するもの、例: `[whatsapp]`）を貼り付けます。
その後、「更新」または「公開」ボタンをクリックして設定を保存します。
これで、電話に出たくないユーザーがメッセージを残せるWhatsAppチャットボックスが正常に追加されました。
より詳細な手順については、WordPressにWhatsAppチャットボックスと共有ボタンを追加する方法に関するチュートリアルをご覧ください。
動画チュートリアル
文章での説明がお好みでない場合は、ビデオチュートリアルをご覧ください。
この記事がWordPressでクリックして電話をかけるボタンを追加する方法を学ぶのに役立ったことを願っています。また、無料のビジネスメールアドレスを作成する方法に関する初心者向けガイドや、最高のSMSマーケティングプラグインの専門家によるピックもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
デニス・ムトミ
共有したいことの1つは、クリック・トゥ・コールボタンを追加する前にコールトラッキング番号を設定することです。各マーケティングチャネルに異なる番号を使用するだけです。これにより、電話のリードがどこから来るのかが正確にわかります。
モイヌディン・ワヒード
この情報がずっと探し求めていたものだったので、大変大変役立つ記事でした。
クリックコールボタンは、ユーザーがあなたの製品やサービスに積極的に参加し、連絡を取るための効果的な方法です。
生徒たちが様々なコースに関する質問を簡単にできるように、私のコーチングウェブサイトにクリックコールボタンを実装する必要があります。
Dayo Olobayo
この役立つチュートリアルに感謝します。10分以内にウェブサイトにクリックして電話するボタンを追加できました。ユーザーエクスペリエンスを向上させるための、非常にシンプルでありながら効果的な方法です。モバイル訪問者はワンタップで私に電話できることを喜んでいます。
WPBeginnerサポート
Glad our guide could help
管理者
ブランカ
こんにちは、ボタン内のテキストのサイズを変更するにはどうすればよいですか？
WPBeginnerサポート
フォントサイズを変更するにはCSSを使用する必要があります。以下の記事は、ボタンを追加する方法に応じて、正しいセレクターを見つけて追加するのに役立つはずです！
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
ウコ・エベン
中古の携帯電話ガジェットのみを販売するeコマースウェブサイトを作成したいのですが、販売者に連絡するための「チャットボタンと電話番号ボタン」を追加することは非常に重要です。私のニーズに関連する記事を検索しましたが、あなたのウェブサイトでは解決策が見つかりませんでした。解決策が必要です。
WPBeginnerサポート
そのカスタマイズについては、サイトにECオプションを追加するために使用しているプラグインを確認する必要があります。通常、それを行う方法があります。
管理者
モナ
ページごとに異なる電話番号を持つコールボタンはありますか？また、相手が通話中かビジーかを表示する機能はありますか？
WPBeginnerサポート
現時点ではできません。
管理者
ケリー・D。
参照したGutenbergエディターのドキュメントを参照またはリンクしていただけますか？フッター内の「お問い合わせ」ページにWP Callを追加したいと思います。
WPBeginnerサポート
Any guides we mention should normally be linked if you click the orange text in the article
管理者
ラジニッシュ
素晴らしい記事に感謝します！まさに必要としていた情報です。訪問者と直接連絡を取るために私のサイトで利用します。素晴らしい仕事です！
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
管理者
マスード
こんにちは、
この役立つ記事をありがとうございます。
それで、私は家電修理に関するウェブサイトを持っています。
そして、各項目には独自のページがあります。
例えば、冷蔵庫修理には独自のページがあり、エアコン修理には独自のページがあります。
私はこれをしたいです：各ページに電話番号を定義します。そして、ページビューアがボタンをタッチすると、関連するマスターが電話に出ます。
何かアイデアはありますか？
ありがとうございます
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サポート
現時点では、このプラグインはモバイル訪問者があなたに電話するためのボタンを追加するものです。
管理者
スティブン
こんにちは、その人の場所によって番号を変更する可能性はありますか？つまり、米国には番号、スペインには別の番号ですか？
WPBeginnerサポート
Stiven様
このプラグインではそれはできないようです。
管理者
デビッド・コーニッシュ
タイムリーな記事です。コールボタンをクリックして電話をかける方法についての情報がまさに必要でした。完璧です！！！！本当にありがとうございます。
カムラン・アワン
素晴らしい記事を共有していただきありがとうございます。これからも良い仕事を続けてください。