電話鏈接：如何將“可通話”鏈接和 CTA 添加到您的網站

已發表: 2019-01-14

許多商業網站都會顯示電話號碼，以便客戶可以與他們聯繫。當台式機是訪問網站的最流行方式時，用戶會記下電話號碼並從單獨的設備撥打電話。當然，大多數用戶現在訪問該網站並從同一設備撥打電話。這為添加呼叫鏈接提供了機會——創建可點擊的 HTML 電話號碼。

在本文中，我們將了解如何添加呼叫鏈接以及其他一些可點擊鏈接，例如電子郵件和其他 CTA。

訂閱我們的 YouTube 頻道

呼叫鏈接的工作原理

使用 HTML 可以輕鬆地使電話號碼可點擊。 HTML5 包括瀏覽器可以使用的協議，例如 tel: 和 mailto:。瀏覽器對這些協議的反應不同。有些人會啟動電話應用程序並將號碼添加到顯示屏上，同時等待您單擊“呼叫”按鈕。其他人會打電話，而其他人會先詢問是否可以。

由於它是 HTML，您可以在站點的任何位置添加協議，包括頁眉、頁腳、側邊欄、帖子和頁面的內容以及小部件內。

將 HTML 電話號碼呼叫鏈接添加到您的網站

將代碼作為文本添加到您希望鏈接出現的位置：

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

Href=tel：創建呼叫鏈接。這會告訴瀏覽器如何使用該號碼。

“電話：123-456-7890”創建 HTML 電話號碼。引號內的號碼是它將調用的號碼。

>< 標籤內的數字是可視部分，它可以是您想要的任何內容，包括電話號碼、一行文本，例如“點擊呼叫”或“立即呼叫”，或任何其他號召性用語想。它應該描述點擊時會發生什麼。

顯示一條消息而不是數字看起來像這樣：

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

您的訪問者會看到文本，但是當他們點擊它時，他們會看到他們電話的撥號屏幕和您的號碼，他們可以點擊呼叫按鈕。

添加擴展

有些電話號碼有分機號。您可以添加代碼，在撥打分機號碼之前創建一個短暫的停頓。在擴展名前添加P將添加一秒鐘的停頓。代碼可能如下所示：

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

這將撥打號碼，等待一秒鐘，然後撥打分機號。

您可以使用w而不是p讓它等待撥號音。

添加國家/地區代碼

可以通過在電話號碼前加上+和您的國家/地區代碼來添加國家/地區代碼。一個示例可能如下所示：

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

為本地 SEO 添加微數據

我最喜歡隨身攜帶智能手機的便利之一是，當我搜索本地商家時，谷歌的結果會為我提供一個可點擊的電話號碼。我可以單擊號碼撥打電話，而無需寫下或嘗試記住它。此功能現在是必需品。幸運的是，您可以將其添加到您的網站，以便 Google 可以在本地搜索中提供您的電話號碼。

這是通過微數據完成的。微數據通知搜索引擎這些號碼是電話號碼，因此它們顯示為可點擊的呼叫鏈接。您可以通過為本地搜索添加一些標籤來豐富標記來創建它。

例如，代碼可能如下所示：

<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 協議包括：

電話： – 撥打電話
mailto: – 打開一個電子郵件應用程序
呼叫：打開Skype
短信： – 發送短信
傳真： – 發送傳真

所有這些協議的使用方式與我們上面看到的相同。讓我們看幾個例子。

將代碼添加到您的聯繫頁面

添加呼叫鏈接的最佳位置之一是在“聯繫我們”頁面上的聯繫信息中。

無論您使用的是經典編輯器還是新的古騰堡編輯器，您都需要查看頁面的文本版本。在經典編輯器中單擊文本選項卡。在 Gutenberg 中，單擊右上角的三個點並選擇Code Editor 。

添加代碼代替您的電話號碼。

退出代碼編輯器或預覽頁面，您將看到您的電話號碼現在是一個可點擊的鏈接。

為電子郵件鏈接或 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>

這是 Spa 佈局包的聯繫頁面中的示例。我添加了一個帶有圖標和文本發送電子郵件的簡介模塊。我選擇了文本選項卡並添加了電子郵件 HTML。該文本現在可點擊，並將打開您的電子郵件應用程序。

添加代碼以打開 URL

您可以使用 HTML 來打開您想要的任何 URL。如果您想將讀者發送到新聞通訊註冊、活動等頁面，這很好。為了鏈接到它們，您的 HTML 代碼將包含 URL。例如：

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

我添加了另一個帶有代碼的簡介以查看事件頁面。

在台式機和平板電腦上禁用

呼叫鏈接的一個問題是它們對台式機或平板電腦沒有用。您可以通過創建特定於每種類型設備的模塊，然後在其他設備上禁用它們來使用 Divi 解決此問題。

在這裡，我使用電話號碼創建了兩個模塊：一個包含 HTML 電話號碼，另一個不包含。我在平板電腦和台式機上禁用了帶有可點擊號碼的那個，所以他們永遠不會看到鏈接。我還禁用了沒有手機鏈接的模塊，因此手機用戶只能看到帶有鏈接的模塊。

將代碼添加到頁眉或頁腳

您可以使用主題編輯器將代碼添加到頁眉或頁腳。始終使用子主題，否則更新主題時您的 PHP 代碼將被覆蓋。這將需要一些 CSS 樣式才能看起來不錯。

在您的儀表板中，轉到外觀 > 編輯器 > 主題頁眉（或主題頁腳）。將代碼放在代碼的 <body> 部分中。我查找了一個結束標記 </a>，單擊 Enter 以添加一些額外的行，然後粘貼到我的代碼中。您可以在此處查看第 28 和 29 行的代碼。

這是我將呼叫鏈接和電子郵件鏈接放置在二十九主題的標題中時的樣子。它在那裡並且有效，但它不是很漂亮。這可以通過添加顏色和邊距空間來解決，這樣它們就會彼此分開。當然，這是在 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>

此示例僅顯示文本。

在這個中，我添加了電話號碼和文本。

在移動設備上測試

我建議使用移動設備測試鏈接以確保其正常工作。如果您無法使用智能手機，則可以使用 Google Chrome 的開發人員工具。

右鍵單擊您的主頁並選擇Inspect 。在屏幕的左上角，您會看到一個設備列表。選擇一個以查看您的網站在該屏幕上的外觀。單擊 HTML 電話號碼鏈接應打開一個對話框，要求您選擇一個應用程序。如果您看到這一點，則該鏈接有效。我仍然建議在實際的智能手機上嘗試它，但這是一個很好的跡象，表明它的鏈接正在發揮作用。

使用插件添加呼叫鏈接

您還可以使用插件將呼叫鏈接添加到您的標頭。它們通常包括樣式功能、添加多個號召性用語以及根據訪問者的設備打開或關閉的功能。它們也易於設置和使用。如果您不想處理代碼，這些都是不錯的選擇。以下是一些最佳選擇。

立即呼叫按鈕

立即呼叫按鈕為您的移動訪問者在屏幕底部添加了一個點擊呼叫按鈕。它不會在其他設備上顯示。如果需要，您還可以添加文本。該按鈕是一個電話圖標，因此很容易理解它的用途。您所要做的就是啟用按鈕並輸入您的電話號碼。您可以在高級設置中更改默認行為。

更多信息

粘性側按鈕

這個插件可以讓你添加按鈕，這些按鈕粘在網站的一側，並在用戶滾動時保持在屏幕上。您可以添加可點擊的電話號碼、電子郵件地址、社交媒體圖標和商店位置。將它們設置在右側或左側，選擇動畫和翻轉樣式，自定義顏色，並選擇它們的顯示位置。

更多信息

速度接觸棒

這個添加了一個聯繫欄，其中包括電話號碼、傳真號碼、標題、地址、電子郵件、社交網絡和自定義 URL 的可點擊鏈接。將欄設置在頂部或底部，並調整文本和鏈接的大小、顏色、顏色以及欄的反應方式。您還可以調整大小。您可以使用過濾器掛鉤添加更多內容。

更多信息

移動聯繫欄

在移動設備上查看時，此插件會添加指向您網站的鏈接。您可以從 13 個選項中選擇顯示哪些鏈接，包括電話、電子郵件、Skype、自定義 URL 和社交網絡。它具有用於圖標的 FontAwesome 集成。您可以設置鏈接樣式並選擇大小、邊框、不透明度等。在屏幕頂部或底部設置菜單。當用戶滾動時，菜單會保留在屏幕上。它還包括滾動到頂部和帶有項目計數器按鈕的 WooCommerce 購物車。

更多信息

最後的想法

使用智能手機訪問網站的普及率每天都在增加。這種流行使呼叫鏈接從簡單的便利變為完全必需。添加可點擊的電話號碼可以使致電您的公司或您的競爭對手的用戶有所不同。幸運的是，創建可點擊的鏈接以將 HTML 電話號碼添加到 WordPress 網站的頁眉、頁腳、小部件、頁面和帖子並不困難。

我們希望聽到您的意見。 您是否已將呼叫鏈接添加到您的網站？ 在下面的評論中讓我們知道您的體驗。

精選圖片來自 Jane Kelly/shutterstock.com