Latest SeedProd News

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

WordPressでクリックコールリンクを作成する方法

WordPressでクリックして電話をかけるリンクを作成する方法 

Written By: 著者アバター Stacey Corrin
著者アバター Stacey Corrin
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.
    
Reviewed By: レビュアーアバター Turner John
レビュアーアバター Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

要するに:WordPressでクリックして電話をかけるリンクを作成する方法

WordPressにクリック可能な電話番号を追加する3つの方法。いずれもコーディング不要で5分以内に完了します。

  1. プラグイン方式 – WP Call Buttonをインストールし、電話番号を入力して、スティッキー(スクロール)またはスタティックボタンのスタイルを選択します。
  2. HTML方式 – tel:リンクを含むカスタムHTMLブロックを追加します。例:<a href="tel:+15555551212">お電話はこちら</a>
  3. メニュー方式 – 外観 > メニューに移動し、カスタムリンクを追加して、URLとしてtel:+1XXXXXXXXXXを使用します。
  4. SeedProdランディングページ – SeedProdでボタンブロックを追加し、リンクをtel:+1XXXXXXXXXXに設定して、専用のタップして電話をかけるページを作成します。
  5. ローカルSEOのヒント – tel:リンクをLocalBusinessスキーマで囲むと、Googleがローカル検索結果に電話番号を表示するのに役立ちます。

電話番号が連絡先ページの最下部に埋もれており、モバイル訪問者はそこまでスクロールしません。WordPressでクリックして電話をかけるリンクを使用すると、訪問者がすでにいる場所に、ワンタップで表示できます。

このガイドでは、WordPressにクリックして電話をかけるリンクを追加する3つの方法、つまりプラグイン、簡単なHTMLスニペット、またはナビゲーションメニューを使用する方法を説明します。手順を追うのに技術的なスキルは必要ありません。また、SeedProdで構築している場合は、ランディングページに直接通話ボタンを追加する方法も紹介します。

クリックして電話をかけるリンクを追加する方法:

WordPressで電話番号をクリック可能にする理由

現在、ほとんどのビジネスは、ライブチャット、サポートチケット、メール、お問い合わせフォームを通じて顧客とオンラインでコミュニケーションをとっています。しかし、特定の質問があったり、助けが必要な場合、人々はしばしば人間と話すことを好みます。その人間的なつながりは、個人的なレベルで聞かれていると感じさせ、顧客満足度を高めることができます。

したがって、ユーザーの視点からすると、素早くタップして電話をかけることができると、多くの時間を節約できます。メールのやり取りをする代わりに、ほぼ即座に誰かと話すことができます。

クリックして電話をかけるとはどういう仕組みですか?

クリックして電話をかける(クリックして話すとも呼ばれる)とは、ユーザーがボタンまたはテキストをクリックして、リアルタイムで他の誰かと接続することです。したがって、通話を開始するために番号を入力すると、仲介サービスがtelプロトコルを使用して、会話を開始するために連絡しようとしているビジネスにダイヤルします。

また、クリックして電話をかけるテクノロジーを使用するためにソフトウェアをダウンロードする必要もありません。手元にあるデバイスを使用するだけです。

始めたばかりのビジネスでは、いくつかのビジネス電話サービスを検討する価値があります。そうすれば、次のような多くの機能を利用できます。

  • 通話転送
  • 番号共有
  • どこからでも電話に応答
  • 通話使用状況の統計情報を追跡する
  • VoIPサービス

始めましょう!

WordPressでクリックして電話をかけるボタンを追加する方法(プラグイン方式)

このオプションでは、WordPressの電話番号プラグインを使用して、サイトにクリック可能な通話リンクを追加します。WP Call Buttonプラグインは使いやすく、WordPressの次の領域に通話ボタンを追加できます。

  • WordPressのクラシックエディターとブロックエディターの両方を使用して投稿およびページを作成する。
  • 組み込みウィジェットを使用して、サイドバーとウィジェット対応エリアに追加する。
  • ユーザーと一緒にスクロールするフローティングボタンを使用して、サイトの他の場所に追加する。

これを念頭に置いて、セットアップの手順を見ていきましょう。

ステップ1:WP Call Buttonプラグインをインストールする

WP Call Button プラグインをダウンロードしてインストールする

WP Call Buttonプラグインをダウンロードし、WordPressウェブサイトにアップロードするのが最初のステップです。

これを行う方法に慣れていない場合は、WordPressプラグインのインストール手順ガイドを参照してください。

ステップ2:スティッキーまたはスタティックな通話ボタンを設定する

プラグインをインストールして有効化したら、プラグインの設定を構成するために設定 » WP Call Buttonに移動します。

WordPress ダッシュボードの WP Call Button プラグイン設定ページ

このプラグインを使用して電話番号ボタンを表示するには、スティッキー通話ボタンスタティック通話ボタンの2つの方法があります。スティッキーボタンはユーザーがサイトをスクロールすると一緒にスクロールしますが、スタティックボタンは1つの場所に留まります。

WP Call Button の固定表示と静的表示の通話ボタンのオプション

デフォルトの設定ページには、スティッキー通話ボタンを作成するための次の一般的な設定が含まれています。

  • 通話ボタンのテキスト – ハイパーリンクされた電話番号が表示されるテキスト。
  • ボタンの位置 – スティッキー通話ボタンがサイトに表示される方法。
  • 通話ボタンの色 – 通話ボタンの色を選択します。
  • 表示設定 – 特定のページでボタンを非表示にするオプションを選択します。

モバイルデバイスでのみ通話ボタンを表示するオプションもあります。これは、モバイルユーザーエクスペリエンスを最適化したいサイトに便利です。

これらの設定を使用するには、ページの上部にあるテキストフィールドに電話番号を入力します。

WP Call Button の設定で国コード付きの電話番号を入力する

スマートフォンフィールドでは、ドロップダウンリストから国を選択でき、国コードが正しい形式で自動的に追加されます。

次に、ボタンの配置、色、表示設定を行います。

WP Call Button プラグインの設定でのボタンの位置と色の設定

デフォルトでは、クリックして通話するボタンがウェブサイトのすべてのページに追加されます。ただし、前述のように、表示する特定のページを選択したり、ボタンをモバイルページのみに表示したりできます。

設定が完了したら、[今すぐ電話]ボタンのステータスをアクティブに設定し、[変更を保存]をクリックします。これにより、ウェブサイトに[今すぐ電話]ボタンがライブで表示されます。

WordPress ウェブサイトのライブ固定表示クリックコールボタン

ステップ3:ボタンのテキスト、色、表示設定をカスタマイズする

WordPressにスタティックなクリックして通話するボタンを含めたい場合は、設定ページからスタティック通話ボタンオプションを選択します。ここでは、ボタンのテキストと色を再度設定したり、ボタンから電話アイコンを非表示にしたりできます。

静的通話ボタンの設定

しかし、これらの設定が異なるのは、サイトにボタンを公開する方法です。従来のWordPressエディターのユーザーは、生成されたショートコードをコピーして、投稿、ページ、またはウィジェットに貼り付けることができます。

一方、最新のWordPressエディターでは、組み込みのWordPressブロックを使用できます。

ステップ4:ページまたは投稿にクリックコールボタンを追加する

WordPressブロックを使用してクリックコールボタンを公開する方法を見てみましょう。

まず、電話番号を追加したい投稿またはページを開くか、WordPress管理エリアから「投稿 » 新規追加」を選択します。

次に、プラスアイコンをクリックして、ページに新しいWordPressブロックを追加します。

新しい WordPress コンテンツブロックを追加する

次に、「WP Call Button」を選択してページに追加します。

WordPressブロックエディターのWP Call Buttonブロック

クリックすると、右側にボタンの色、フォントサイズ、位置などを変更するためのオプションが表示されます。

GutenbergエディターのWP Call Buttonのブロックサイドバーオプション

レイアウトに満足したら、「公開」をクリックします。次にそのページに移動すると、以下の例と同様の外観になります。

WordPressページに公開された静的なクリックコールボタン

ステップ5:サイドバーウィジェットにコールボタンを配置する

最後のステップは、WordPressのウィジェット対応エリアにクリック可能な電話番号を追加したいサイトオーナー向けです。

これを行うには、「外観 » ウィジェット」に移動します。次にサイドバーエリアを選択し、プラス(+)アイコンをクリックしてWP Call Buttonウィジェットを検索し、クリックしてサイドバーに追加します。

クリックコールボタンサイドバーウィジェットを追加する

次に、タイトル、説明、ボタンの色などを編集します。

クリックコールボタンウィジェットの設定

設定を保存し、「完了」をクリックします。サイトに移動すると、以下の画像と同様の外観になります。

WordPressウィジェットエリアの「電話をかける」ボタン

ご覧のとおり、このWordPressプラグインを使用することは、サイト訪問者がWebおよびモバイルブラウザからクリックして電話をかけられるようにするための最も簡単な方法の1つです。100%無料であるだけでなく、Google Analyticsともシームレスに統合されています。

次に、MonsterInsightsと連携して、電話をかけてくる人の数や、どのページが最も多くのリードを生み出しているかを追跡できます。さらに、これらすべてをWordPressダッシュボードを離れることなく行うことができます。

しかし、WordPressプラグインを使用せずにこのテクノロジーを活用したい場合はどうでしょうか?次のオプションで説明します。

WordPressウェブサイトにクリック可能な電話番号やリンクを手動で追加するには、簡単なコードスニペットをコピーして貼り付けるだけで済みます。

このオプションでは、モバイルアプリ、モバイルデバイス、PC、Macコンピューターで電話リンクを開くHTMLコードスニペットを使用します。Macでは、リンクはFaceTimeで開きますが、Windows 10ではSkypeで開きます。

まず、電話番号を追加したい投稿またはページを開きます。この例では、編集する既存の投稿を使用します。

新しいWordPressエディターを使用している場合は、新しい「HTMLブロック」を追加します。

新しいHTMLブロックを追加する

次に、次のコードスニペットをコピーしてHTMLブロックに貼り付けます。

<!-- Works on Android and iPhone. Desktop users may see a calling app open, or nothing if no app is connected. -->

<a href="tel:+15555551212">+1 (555) 555-1212</a>
<a href="tel:+15555551212">Call Me</a>

常に+記号と国コードを番号の前に含めてください。例:tel:+15555551212。+プレフィックスにより、リンクはデバイスや国際的に正しく機能します。

電話の延長番号を使用している場合、一時停止コード形式(tel:+15555551212p123)を使用して含めることができます。pという文字は、ダイヤラーに内線番号を入力する前に短く一時停止するように指示し、自動化システムが接続する時間を与えます。

<a href="tel:+15555551212p123">Call Us (Ext. 123)</a>

次に公開をクリックし、ライブ投稿に移動して結果を確認します。

WordPressで手動クリックコールハイパーリンクを追加する

LocalBusinessマイクロデータを電話リンクに追加する

サイトがローカルエリアを対象としている場合、tel:リンクをSchema.org LocalBusinessマイクロデータでラップできます。Googleはこのマークアップを使用して、電話番号をローカル検索結果に直接表示します。

<div itemscope itemtype="https://schema.org/LocalBusiness">
  <span itemprop="name">Your Business Name</span>
  <a href="tel:+15555551212" itemprop="telephone">+1 (555) 555-1212</a>
</div>

tel:リンクにitemprop=”telephone”属性を追加し、LocalBusinessコンテナでラップします。標準のtel:リンクと同じ+国コード形式を使用してください。

tel:リンクは、テーマのデフォルトのリンクスタイルを継承します。表示をカスタマイズするには、a[href^=”tel:”] CSSセレクターを使用して電話リンクのみを対象にします。

a[href^="tel:"] {
  color: #0073aa;
  text-decoration: none;
  font-weight: bold;
}

これをテーマの追加CSS(外観 » カスタマイズ » 追加CSS)に追加するか、コードスニペットプラグインを使用してください。サイトのデザインに合わせて色とスタイルを調整してください。

ヘッダーまたはメニューにクリックして電話をかけるリンクを追加する方法

WordPressのヘッダーまたはナビゲーションメニューに電話リンクを追加することも非常に簡単です。

これを行うには、外観 » メニューに移動し、右側の列からカスタムリンクをクリックします。

カスタムメニューリンクを追加する

次に、URLフィールドに、次の形式で電話番号を追加します。

tel:+15555551212

そして、リンクテキストフィールドに、通話リンクに付けたいラベルを入力します。次に、メニューに追加ボタンをクリックし、メニューを保存してウェブサイトで有効にします。

ヘッダーの通話リンクがどのようになるかの例を次に示します。

WordPressヘッダーの電話リンク

SeedProdランディングページにクリックして電話をかけるボタンを追加する方法

ランディングページを作成するためにSeedProdを使用している場合、ビジュアルドラッグアンドドロップエディターに直接タップして通話ボタンを追加できます。私はこれを専用の連絡先ページや見積もりページで使用しており、訪問者に電話をかけることを主なアクションとしてほしいと考えています。

ランディングページの通話ボタンは、WP Call Buttonプラグインが作成するサイト全体のスティッキーボタンとは異なる動作をします。人がすでにアクションを起こす準備ができているページに着地した場合、目立つ通話ボタンは、意図と実際の会話の間の最後のステップを削除します。

SeedProdでランディングページを開き、プラス(+)アイコンをクリックして新しいブロックを追加します。ボタンブロックを検索し、通話ボタンを表示したい場所にレイアウトにドラッグします。

WordPressのランディングページにSeedProdボタンブロックを追加する

ボタンをクリックして設定を開き、ボタンリンクをtel:形式の電話番号に設定します。例:tel:+15555551212。+国コードを含めて、番号をご自身のものに置き換えてから、ページを保存して公開してください。

SeedProdを使用してWordPressでクリックコールボタンを追加する

WordPressでクリックして電話をかけるボタンを作成するためのFAQ

WordPressで電話番号をクリック可能にするにはどうすればよいですか?

最も簡単な方法は、投稿またはページにHTMLブロックを追加し、tel:リンク(<a href=”tel:+15555551212″>お電話はこちら</a>)を使用することです。+国コードプレフィックスを含めて、番号をご自身のものに置き換えてください。通常のリンクではなく、スタイル設定されたボタンが必要な場合は、WP Call Buttonプラグインをインストールするか、SeedProdのボタンブロックを使用してください。

クリックして通話するリンクとは何ですか?

クリックコールリンクとは、訪問者がタップまたはクリックすると自動的に電話番号を発信するハイパーリンクのことです。tel: プロトコルを使用し、デバイスに電話ダイヤラーを開き、番号を事前入力するように指示します。モバイルでは、これは即座に行われます。デスクトップでは、Skype や FaceTime のように既定として設定されている通話アプリが開きます。

クリックコールリンクはデスクトップで機能しますか?

はい、ただし結果はデバイスの設定によって異なります。モバイルでは、リンクはすぐに電話ダイヤラーを開きます。デスクトップでは、Skype や FaceTime のような通話アプリを開くか、アプリが設定されていない場合は何も行いません。WP Call Button では、必要に応じてモバイルでのみボタンを表示できます。

WordPress のメニューにクリック可能な電話番号を追加するにはどうすればよいですか?

「外観」→「メニュー」に移動し、「カスタムリンク」をクリックします。URL フィールドに、tel:+15555551212 のように tel: 形式で番号を入力します。リンクテキストフィールドにラベルを追加し、「メニューに追加」をクリックして保存します。電話リンクがナビゲーションに表示され、モバイルデバイスでクリックするとダイヤラーが開きます。

WordPress で通話ボタンのクリックを追跡できますか?

はい。WP Call Button プラグインは Google Analytics および MonsterInsights と統合されているため、通話ボタンをクリックした人数や、どのページが最も多くの通話を生成しているかを追跡できます。 MonsterInsights では、追加の設定なしで、通話ボタンのクリックがダッシュボードのイベントとして表示されます。

WordPress にクリックコールリンクを追加することは、サイトをよりモバイルフレンドリーで顧客中心にするための最も簡単な方法の 1 つです。プラグイン、HTML コード、または簡単なメニューリンクのいずれを使用しても、セットアップは数分で完了します。

さらに進みたい場合は、WP Call Button や SeedProd のようなツールを使用すると、通話ボタンを最も重要な場所に正確に配置できます。コーディング不要、混乱なし。

訪問者とのつながりを深める他の方法をお探しですか?以下の次のステップを確認してください。

お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTubeX および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

著者アバター
Stacey Corrin Content Marketing Specialist
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]