電話リンク：「呼び出し可能な」リンクとCTAをWebサイトに追加する方法

公開: 2019-01-14

多くのビジネスWebサイトには電話番号が表示されているため、顧客は電話番号に連絡できます。デスクトップがサイトにアクセスするための最も一般的な方法であったとき、ユーザーは電話番号をメモし、別のデバイスから電話をかけました。もちろん、ほとんどのユーザーは現在Webサイトにアクセスし、同じデバイスから電話をかけています。これにより、通話リンクを追加する機会が開かれ、クリック可能なHTML電話番号が作成されます。

この記事では、通話リンクを追加する方法と、メールやその他のCTAなどの他のクリック可能なリンクをいくつか紹介します。

私たちのYoutubeチャンネルを購読する

通話リンクのしくみ

電話番号をクリック可能にすることは、HTMLで簡単に行えます。 HTML5には、ブラウザが使用できるtel：やmailto：などのプロトコルが含まれています。ブラウザは、これらのプロトコルに対して異なる応答をします。電話アプリを起動して、[通話]ボタンをクリックするのを待っている間に番号をディスプレイに追加する人もいます。他の人は電話をかけますが、他の人は最初に大丈夫かどうか尋ねます。

HTMLであるため、ヘッダー、フッター、サイドバー、投稿やページのコンテンツ内、ウィジェット内など、サイトのどこにでもプロトコルを追加できます。

あなたのウェブサイトにHTML電話番号の通話リンクを追加する

リンクを表示する場所にテキストとしてコードを追加します。

<a href="tel:123-456-7890">123-456-7890</a>

Href = tel：通話リンクを作成します。これは、ブラウザに番号の使用方法を指示します。

「Tel：123-456-7890」はHTML電話番号を作成します。引用符内の番号は、それが呼び出す番号です。

> <タグ内の番号は視覚的な部分であり、電話番号、「Click to Call」や「CallNow」などのテキスト行、またはその他の召喚状を含めて、任意の番号にすることができます。欲しいです。クリックしたときに何が起こるかを説明する必要があります。

番号の代わりにメッセージを表示すると、次のようになります。

<a href="tel:123-456-7890">CLICK TO CALL</a>

訪問者にはテキストが表示されますが、それをクリックすると、電話のダイヤル画面が表示され、電話ボタンをクリックする準備ができています。

拡張機能の追加

一部の電話番号には内線番号があります。内線番号をダイヤルする前に短い一時停止を作成するコードを追加できます。拡張機能の前にPを追加すると、1秒間の一時停止が追加されます。コードは次のようになります。

<a href="tel:123-456-7890p123">CLICK TO CALL</a>

これにより、番号がダイヤルされ、1秒間待機してから、内線番号がダイヤルされます。

pの代わりにwを使用すると、ダイヤルトーンを待つことができます。

国コードの追加

国コードは、電話番号の前に国のコードと一緒に+を含めることで追加できます。例は次のようになります。

<a href="tel:+1123-456-7890">123-456-7890</a>

ローカルSEO用のマイクロデータの追加

スマートフォンを持ち歩くのが好きな便利な点の1つは、地元のお店やサービスを検索して、Googleで検索した結果にクリック可能な電話番号が表示されることです。番号をクリックすると、書き留めたり暗記したりせずに電話をかけることができます。この機能は今や必要です。幸い、それをWebサイトに追加して、Googleがローカル検索で電話番号を提供できるようにすることができます。

これはマイクロデータを使用して行われます。 Microdataは、番号が電話番号であることを検索エンジンに通知するため、クリック可能な通話リンクとして表示されます。これは、ローカル検索用のいくつかのタグでマークアップを強化することで作成できます。

たとえば、コードは次のようになります。

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

その他の召喚状

HTML5を使用すると、電話番号に制限されません。電子メール、メッセージング、ファックスなど、他の召喚状をアクションに追加できます。HTML5プロトコルには次のものが含まれます。

tel：–電話をかける
mailto：–メールアプリを開く
callto：Skypeを開く
SMS：–テキストメッセージを送信する
ファックス：–ファックスを送信する

これらのプロトコルはすべて、上記で見たのと同じ方法で使用されます。いくつかの例を見てみましょう。

連絡先ページへのコードの追加

通話リンクを追加するのに最適な場所の1つは、お問い合わせページの連絡先情報内です。

クラシックエディタを使用している場合でも、新しいグーテンベルクエディタを使用している場合でも、ページのテキストバージョンを表示する必要があります。クラシックエディタで、[テキスト]タブをクリックします。グーテンベルクで、右上の3つのドットをクリックし、[コードエディター]を選択します。

電話番号の代わりにコードを追加します。

コードエディタを終了するか、ページをプレビューすると、電話番号がクリック可能なリンクになっていることがわかります。

電子メールリンクまたはURLのコードの作成

メールのHTMLコードはmailtoです。メールアドレスは次のように末尾に追加されます。

<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>

電話リンクと同じように、視覚的な部分を使用して、次のようなメッセージを追加できます。

< href="mailto: [email protected]"; Click here to send me an email</a>

これは、スパレイアウトパックの連絡先ページの例です。アイコンとテキスト「メールを送信」を含む宣伝文モジュールを追加しました。 [テキスト]タブを選択し、メールのHTMLを追加しました。テキストをクリックできるようになり、メールアプリが開きます。

開くURLへのコードの追加

HTMLを使用して、任意のURLを開くことができます。これは、ニュースレターの登録やイベントなどのページに読者を送りたい場合に適しています。それらにリンクするために、HTMLコードにはURLが含まれています。例えば：

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

イベントページを表示するコードを含む別の宣伝文を追加しました。

デスクトップとタブレットで無効にする

通話リンクの問題の1つは、デスクトップやタブレットでは役に立たないことです。各タイプのデバイスに固有のモジュールを作成し、他のデバイスでそれらを無効にすることで、Diviでこれを解決できます。

ここでは、電話番号を使用して2つのモジュールを作成しました。1つはHTML電話番号を含み、もう1つは含まないものです。タブレットとデスクトップでクリック可能な番号のあるものを無効にしたので、リンクが表示されません。また、電話のリンクなしでモジュールを無効にしたので、電話ユーザーにはリンク付きのモジュールのみが表示されます。

ヘッダーまたはフッターへのコードの追加

テーマエディタを使用して、ヘッダーまたはフッターにコードを追加できます。常に子テーマを使用してください。そうしないと、テーマを更新するときにPHPコードが上書きされます。これには、見栄えを良くするためにいくつかのCSSスタイルが必要になります。

ダッシュボードで、 [外観]> [エディター]> [テーマヘッダー] （または[テーマフッター] ）に移動します。コードの<body>部分にコードを配置します。終了タグ</a>を探し、Enterキーを押して数行追加し、コードに貼り付けました。ここの28行目と29行目にコードがあります。

TwentyNineteenテーマのヘッダー内に通話リンクとメールリンクを配置したときの様子は次のとおりです。そこにあり、機能しますが、あまりきれいではありません。これは、色と余白のスペースを追加して互いに離れるようにすることで修正できます。もちろん、これはCSSで行われます。

リンクのスタイリング

カスタマイザーの[追加のCSS]フィールドにコードを追加する必要があります。

コードは次のようになります。

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

これは、CSSにtel：およびmailto：のテキストのスタイルを設定する方法を指示します。電話番号のフォントを茶色に、電子メールのフォントをオレンジ色に変更し、各リンクの右側に小さな余白を追加します。

CSSは、コードがウィジェットや投稿などに含まれている場所ならどこでも機能します。テキストの代わりにアイコンを使用することもできます。

Diviセカンダリメニューへのコードの追加

Diviは、ヘッダーの上にあるセカンダリメニューに電話番号と電子メールを含めることができます。メールボタンはデフォルトですでにクリック可能ですが、電話番号はクリックできません。前の例で使用したのと同様のHTML電話番号を使用して、電話番号を通話リンクに変えることができます。

テーマカスタマイザ>ヘッダーとナビゲーション>ヘッダー要素に移動します。これにより、電話番号を追加できるテキストボックスが表示されます。幸いなことに、あなたは数字だけに限定されていません。 HTMLを追加することもできます。前の例のHTMLを追加しました。また、電話番号のフォントサイズを大きくして、画像が見やすくしました。

リンクの視覚的な部分にメッセージを追加することで、クリック可能であることを明確にすることができます。番号をメッセージに置き換えるか、番号の最後にメッセージを追加することができます。これは次のようになります。

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

この例はテキストを示しています。

これには、テキストと一緒に電話番号を追加しました。

モバイルでのテスト

モバイルデバイスでリンクをテストして、機能することを確認することをお勧めします。スマートフォンにアクセスできない場合は、GoogleChromeのデベロッパーツールを使用できます。

ホームページを右クリックして、[検査]を選択します。画面の左上隅に、デバイスのリストが表示されます。いずれかを選択して、その画面でWebサイトがどのように表示されるかを確認します。 HTML電話番号のリンクをクリックすると、アプリを選択するように求めるダイアログボックスが開きます。これが表示された場合、リンクは機能しています。それでも実際のスマートフォンで試してみることをお勧めしますが、これはリンクが何かをしていることを示す良い兆候です。

プラグインを使用した通話リンクの追加

プラグインを使用して、ヘッダーに通話リンクを追加することもできます。これらには通常、スタイリング、複数のアクションコールの追加、および訪問者のデバイスに基づいてオンまたはオフにする機能が含まれています。また、セットアップと使用も簡単です。これらは、コードを処理したくない場合に最適な選択肢です。ここにいくつかの最良のオプションがあります。

今すぐ呼び出すボタン

今すぐ電話ボタンは、モバイル訪問者のために画面の下部にクリックして電話をかけるボタンを追加します。他のデバイスには表示されません。必要に応じてテキストを追加することもできます。ボタンは電話のアイコンなので、その目的を簡単に理解できます。ボタンを有効にして電話番号を入力するだけです。詳細設定でデフォルトの動作を変更できます。

詳しくは

粘着性のあるサイドボタン

このプラグインを使用すると、Webサイトの側面に貼り付けて、ユーザーがスクロールしても画面に表示されたままになるボタンを追加できます。クリック可能な電話番号、メールアドレス、ソーシャルメディアアイコン、店舗の場所を追加できます。それらを右または左に設定し、アニメーションとロールオーバースタイルを選択し、色をカスタマイズして、表示する場所を選択します。

詳しくは

スピードコンタクトバー

これは、電話番号、FAX番号、見出し、住所、電子メール、ソーシャルネットワーク、およびカスタムURLへのクリック可能なリンクを含む連絡先バーを追加します。バーを上または下に設定し、テキストとリンクのサイズ、色、色、およびバーの反応を調整します。サイズを調整することもできます。フィルタフックを使用して、コンテンツをさらに追加できます。

詳しくは

モバイルコンタクトバー

このプラグインは、モバイルデバイスで表示すると、Webサイトへのリンクを追加します。電話、メール、Skype、カスタムURL、ソーシャルネットワークなど、13のオプションから表示するリンクを選択できます。アイコンのFontAwesome統合があります。リンクのスタイルを設定し、サイズ、境界線、不透明度などを選択できます。画面の上部または下部でメニューを設定します。ユーザーがスクロールしても、メニューは画面に残ります。また、上にスクロールしたり、アイテムカウンターボタン付きのWooCommerceカートも含まれています。

詳しくは

最終的な考え

ウェブサイトにアクセスするスマートフォンの人気は日々高まっています。この人気は、コールリンクを単純な便利さから完全な必要性へと導きます。クリック可能な電話番号を追加すると、あなたのビジネスに電話をかけるユーザーと競合他社に違いをもたらすことができます。幸い、WordPress Webサイトのヘッダー、フッター、ウィジェット、ページ、および投稿にHTML電話番号を追加するためのクリック可能なリンクを作成することはそれほど難しくありません。

我々はあなたから聞きたい。 あなたのウェブサイトに通話リンクを追加しましたか？ 以下のコメントであなたの経験について教えてください。

Jane Kelly /shutterstock.comによる注目の画像