如何在您的网站上添加 WordPress 点击通话按钮

在 HeroThemes，我们付出了很多努力来创建高质量的 WordPress 知识库主题和插件，这样您网站的访问者就不必打电话给您寻求帮助。

但是，人们仍然总是需要电话支持，并且还有很多非支持原因，您可能希望您的网站访问者可以轻松地给您打电话。

但是当人们在移动设备上浏览时，您最不想做的就是让他们自己输入您的电话号码，或者必须尝试点击一些小电话号码。 相反，点击通话按钮是一个更好的选择。

在这篇文章中，我们将向您展示如何使用一些简单的免费插件或您自己的 HTML 向您的网站添加 WordPress 点击呼叫功能。 无论您的技术知识水平如何，您都可以跟随并创建一个漂亮的点击通话按钮。

您应该使用点击调用插件还是 HTML？

使用插件是创建看起来很棒的东西的最简单方法。 因此，如果您想要立即“正常工作”的东西，那将是采用插件路线的一个很好的理由。 但是，您只能在插件支持的位置显示呼叫按钮。

如果您希望能够在网站的任何位置添加点击通话按钮，或者只是不喜欢使用其他插件，使用您自己的 HTML 添加点击通话功能几乎就像插入超链接一样简单，所以它仍然是一个非常用户友好的方法。 但是，您可能需要添加一些基本的自定义 CSS 以使其看起来不错，这是需要牢记的。

在本指南中，我们将向您展示这两种方法。 让我们开始吧，从插件路由开始……

方法 1：使用免费的 WordPress 点击呼叫按钮插件

有几种不同的 WordPress 点击调用插件，但我们将向您展示其中三个的分步指南：

• 真正简单的点击呼叫栏——这个插件不是添加一个独立的按钮，而是在移动访问者屏幕的底部添加一个完整的栏。 如果您想让人们打电话给您变得非常明显/容易，这是一个不错的选择。
• Call Now Button – 除了像上面的插件一样的完整栏外，这个插件还允许您使用更多的浮动操作按钮式呼叫按钮。
• Call Now Button Ultimate - 这个插件现在添加了相同的呼叫底部栏。 但独特之处在于，它可以让您设置“营业时间”，以便您可以通过电话联系到您。 在下班时间，该按钮将提示访问者发送电子邮件而不是打电话。

真正简单的点击调用栏插件教程

该插件是免费的，可在 WordPress.org 上获得，因此您可以直接从您的 WordPress 仪表板转到插件 → 添加新的来安装它。

安装并激活插件后，转到设置 → 真正简单的单击调用以配置插件。 在那里，您可以：

• 启用点击通话按钮功能
• 在通话按钮旁边添加文字 CTA
• 选择访客将拨打的电话号码
• 配置点击通话按钮使用的颜色

然后，保存您的更改以使您的按钮生效。 此按钮只会向移动访问者显示，因此如果您从台式计算机浏览，您将看不到它。

以下是它在移动设备上的外观示例：

立即呼叫按钮插件教程

正如我们上面提到的，Call Now Button 插件更灵活一点，它还允许您使用除了 call now bar 方法之外的浮动操作 call now 按钮。

与其他产品一样，它在 WordPress.org 上列出，这意味着您可以通过转到Plugins → Add New来安装它。

安装并激活插件后，前往设置→立即调用按钮来配置插件。

在顶部，您可以：

• 启用按钮
• 输入访客将拨打的电话号码
• 选择按钮文本（如果需要）

您还可以通过单击高级设置链接来显示更多设置。 这将使您可以更改定位、颜色、添加点击跟踪等：

启用按钮后，它将仅向移动访问者显示，因此您需要从移动设备预览它才能看到它的实际效果。

这是我们网站上的浮动操作按钮方法示例：

现在呼叫按钮终极插件教程

Call Now Button Ultimate 插件的独特之处在于，您可以选择希望访问者能够给您打电话的时间。 在您的电话号码不可用的下班时间，您可以显示提示，让访问者改为发送电子邮件。

像其他人一样，您可以通过转到 WordPress 仪表板中的插件 → 添加新插件来安装和激活这个免费插件。

完成后，转到 WordPress 仪表板中的Call Now Button Ultimate区域进行设置。

在顶部，您可以启用插件并输入您的电话号码和电子邮件地址：

然后，在页面下方，您可以输入您的营业时间并配置按钮文本和颜色：

与其他插件一样，您的“立即通话”按钮只会向移动访问者显示。

以下是您在营业时间内的样子：

这是在您的营业时间之外的样子：

方法 2：WordPress 点击调用 HTML 按钮

作为单击调用 WordPress 插件的替代方法，您还可以使用自己的单击调用 HTML 来创建按钮。 这种方法的好处是您可以在站点的任何位置添加按钮。

要创建这样的按钮，您只需使用普通的超链接并将您的电话号码包装在tel:模式中。

这是它的样子——您只需将示例电话号码替换为您自己的电话号码并根据需要编辑文本 CTA：

<a href="tel:+1-123-456-7890">Call HeroThemes!</a>

这里的所有都是它的！

如果需要，您可以使用自己的自定义 CSS 来创建按钮，而不是常规的超链接。

例如，您可以使用以下 HTML：

<a href="tel:+1-123-456-7890" class="call-button">Call HeroThemes!</a>

然后，您可以将一些自定义 CSS 添加到您的 WordPress 网站以使其成为一个按钮。 例如：

.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}

您可以通过 WordPress Customizer 或像 Simple CSS 这样的免费插件安全地添加自定义 CSS。

不过请记住。 默认情况下，所有访问者（包括台式计算机上的访问者）都可以看到您单击调用 HTML 按钮。

如果你想改变它，你可以使用 CSS 媒体查询来只在移动设备上显示按钮。 例如，此代码段将隐藏屏幕尺寸大于 600 像素宽的按钮：

@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}

立即开始使用您的 WordPress 点击通话按钮！

无论您使用插件还是您自己的自定义 HTML，都可以轻松地在 WordPress 上创建点击通话按钮。

有了您的按钮，移动访问者将比以往更容易与您取得联系。

请记住——电话对人力资源的影响很大。

如果您想减少接到的电话数量，创建 WordPress 知识库或常见问题解答部分可以让访问者获得他们需要的帮助，而无需一对一的电话支持。 这可以为您节省大量时间和精力。

了解如何开始使用我们的 Heroic 知识库插件、KnowAll 主题或 Heroic 常见问题插件。