电话链接：如何将“可通话”链接和 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