如何在您的網站上添加 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 常見問題插件。