• 主頁
  • 文章
  • 主題
  • 如何在 WordPress 中輕鬆地將位置搜索添加到目錄網站

如何在 WordPress 中輕鬆地將位置搜索添加到目錄網站

已發表: 2021-02-15

有許多不同的方法可以改進您的目錄網站，其中之一是啟用基於位置的搜索。 如果您運行的目錄或分類網站類似於 Yelp、TripAdvisor、Craigslist 或任何其他需要基於位置的搜索的類似網站，您可以通過將其與 Google 地圖集成來輕鬆做到這一點。 對於某些用戶來說，這是一項必不可少的功能，因為他們能夠搜索他們所在地區的產品、服務或地點。 此外，谷歌地圖平台有一個免費的每月限制，如果您的網站流量適中，這應該足夠了。

在這個分步教程中，我們將解釋如何將位置搜索添加到您的目錄網站。 我們將使用 HivePress，這是一個免費的 WordPress 插件，可讓您在眨眼之間創建一個目錄網站。 此外，將使用 ListingHive，一個免費的 WordPress 目錄主題，以及 HivePress 地理定位擴展，以與穀歌地圖集成。

但是，如果您已經有一個使用其他插件或主題構建的目錄網站，您可以跳過第一步並滾動到“如何修復”糟糕！ 有些不對勁。 此頁面未正確加載 Google 地圖””部分，用於解決最常見的錯誤。

那麼，讓我們進入第一步吧！

安裝 HivePress

首先，您需要安裝 HivePress。 您可以將其安裝為 WordPress 中的任何其他免費插件。 只需導航到插件 > 添加新部分並使用搜索欄找到它，然後安裝並最後通過單擊“激活”按鈕激活它。 完成安裝後，您可以繼續下一步 - 安裝擴展。

此外，如果您覺得困難，您可以按照下面的截屏視頻直接從 WordPress 儀表板安裝 HivePress。

安裝擴展

下一步是安裝 Geolocation 擴展，以允許用戶按位置搜索列表。 要安裝它，只需將鼠標懸停在 HivePress 部分並單擊“擴展”鏈接。 在列表中找到 Geolocation 擴展，點擊“安裝”按鈕，最後激活該擴展。

此外，以下截屏視頻顯示了安裝 HivePress 擴展的常用過程，因此您可以逐步進行操作。

創建新項目

完成插件安裝和 Geolocation 擴展後，就可以在 Google Cloud Platform 上創建一個項目了。 假設您已經有一個 Google 帳戶，您應該能夠毫無問題地訪問此儀表板。 但是，如果您沒有，則必須註冊一個 Google 帳戶。

現在您需要通過單擊“創建項目”按鈕創建一個項目，然後為其命名，最後單擊“創建”按鈕。

在 Google Cloud Platform 上創建一個新項目。

設置帳單

現在，如果您沒有 Google 計費帳戶，則需要創建一個新帳戶以啟用項目計費。 但是，不用擔心，您現在無需支付任何費用，這只是使用 Google Maps API 的要求之一。 只需點擊鏈接並填寫所有表單字段，包括付款方式詳細信息。

您每月將獲得 200 美元的免費信用額度，在大多數情況下，這足以支付在您的網站上使用 Google 服務的費用。 此外，可以設置限制和通知，因此您永遠不會超過免費信用。 您可以查看定價，以便更好地了解其工作原理並確保您可以免費使用地圖。

添加賬單信息後，您將看到一個彈出窗口，其中包含您要啟用的 API 類型。 如下圖所示選擇地圖和地點，然後單擊“啟用”按鈕。 此外，如果沒有彈出窗口，您可以通過 Google API 庫頁面啟用這些 API。

啟用 Google API。

創建 API 密鑰

下一步是為您的網站創建 API 密鑰。 為此，請導航到 Credentials 頁面並選擇您的項目。

創建 API 密鑰。

在 Credentials 頁面上，您可以看到已經生成的 API Key。 如果您剛剛創建了結算帳戶，則可能會自動生成一個密鑰。 在這種情況下，您只需單擊它即可進行編輯。 但是，如果頁面上沒有 API Key，您可以在Create Credentials > API key部分創建一個新的。

如何創建 API 密鑰的示例。

接下來，您需要通過設置應用程序限制來設置您的 API 密鑰。 這很重要，因為如果您只是嵌入密鑰，它將以純文本形式顯示在您網站的源代碼中。 這就是為什麼您需要限制這一點，以便其他人無法將您的 API 密鑰用於他們的項目。 為此，只需添加 HTTP 引薦來源網址以僅允許來自您網站的 API 請求。 只需設置您的網站地址，但還要在末尾添加“/*”部分以允許來自任何網站子頁面的 API 請求，因此 Google 地圖將適用於您網站的所有頁面。

如何添加應用程序限制的示例。

現在您需要在下一個字段中設置 API 限制。 單擊限制鍵並從下拉菜單中選擇Maps JavaScript API、Places API、Geocoding API 。 如果某些提到的 API 未列出，您需要先在 Maps API 庫頁面上啟用它們。 在下拉菜單中啟用並選擇所有三個 Google API 後，單擊“保存”按鈕。

如何添加 API 限制的示例。

啟用谷歌地圖集成

而已！ 您剛剛創建了一個 API 密鑰，最後的潤色是在您的網站上啟用 Google 地圖。 首先在APIs & Services > Credentials頁面複製 API Key。 現在，如果您使用 HivePress 插件，請導航到您的 WordPress 儀表板，然後轉到HivePress > 設置 > 集成 > Google 地圖部分。 然後只需將您的 API 密鑰粘貼到相應的字段中，然後單擊“保存更改”按鈕即可將位置搜索添加到您的網站。

如何將位置搜索添加到 WordPress 網站的示例。

恭喜！ 從此刻起，您的網站將與 Google 地圖集成，現在您可以在列表部分中將位置添加到現有列表中。 此外，用戶必須為新添加的列表設置位置。 此外，您的網站上還有一個位置搜索字段和一個 Google 地圖，因此您可以嘗試一下並按位置搜索一些列表。

在 WordPress 構建的網站上進行基於位置的搜索。
基於位置的搜索功能示例。

故障排除

如果您創建的 API 密鑰有任何問題，地圖可能會顯示“糟糕！ 有些不對勁。 此頁面未正確加載 Google 地圖”錯誤。 這是一個很常見的錯誤，因為設置 API 密鑰不是一個對用戶非常友好的過程，而且用戶經常會跳過一些設置步驟。 但是，如果您知道問題的根源，您可以立即修復它。

要找出該錯誤的原因，您需要打開 JavaScript 控制台。 您可以通過幾次按鍵打開它，具體取決於您的瀏覽器。 查看 StackOverflow 上解釋如何打開 JavaScript 控制台的答案。 如果您使用 Chrome 瀏覽器，只需按CTRL+Shift+I即可打開它。 打開它後，您應該會看到錯誤消息，類似於此。

如何解決“糟糕！有些不對勁。此頁面未正確加載 Google 地圖”錯誤

準確了解導致錯誤的原因很重要，以便您可以修復它。 可能有幾個不同的錯誤，但我們將展示如何解決最常見的錯誤：

  • MissingKeyMapError;
  • 無效鍵映射錯誤；
  • ApiNotActivatedMapError;
  • RefererNotAllowedMapError。

但是，如果您遇到了上面未列出的錯誤，請查看 Google Maps API 錯誤消息文檔以找出問題所在以及如何修復它。

MissingKeyMapError

此錯誤意味著根本沒有 API 密鑰，因此如果您想在您的網站上啟用 Google 地圖，則需要創建一個。 如果您收到此錯誤，我們建議您從第一步開始遵循本教程，以便創建 API 密鑰並正確設置地圖。

無效鍵映射錯誤

當您使用錯誤的 API 密鑰時會出現此錯誤。 很可能您已經創建了它，但沒有正確地將它添加到您的網站。 要修復此錯誤，請轉到憑據頁面並複制 API 密鑰。

Google API 密鑰的示例。

如果您使用 HivePress 插件及其 Geolocation 擴展，請轉到WordPress 儀表板 > HivePress > 設置 > 集成 > Google 地圖部分，將您的 API 密鑰粘貼到相應的字段中，然後單擊“保存更改”按鈕。

ApiNotActivatedMapError

如果您收到此類錯誤，則表示您未啟用所需的 API。 Google Maps API 庫中有許多不同的 API，因此您需要前往庫並啟用項目所需的 API。 啟用它們後，請記住還將它們添加到憑據部分的 API 密鑰設置中的 API 限制部分。

例如，如果您使用帶有 Geolocation 擴展的 HivePress 插件，並且想要將位置搜索添加到您的目錄網站，則需要啟用並允許訪問以下 Google API： Maps JavaScript API、Places API、Geocoding API 。 您可以查看帶有必要 API 的屏幕截圖。

RefererNotAllowedMapError

如果未正確設置 API 引用者限制，則會發生此錯誤。 例如，如果地圖在您網站的一個頁面上有效，而在其他頁面上無效，那麼您很可能面臨同樣的問題。

好消息是您已經正確設置並輸入了 API 密鑰，並且您只需要修復一個小細節。 轉到憑據頁面並單擊您的 API 密鑰進行編輯。 在“應用程序限制”部分中，選擇“HTTP 引薦來源網址（網站）”。 然後填寫如下所示的網站限制，但將“example”替換為您的域名，然後單擊“保存”按鈕。 設置最長可能需要 5 分鐘才能生效。

如何為 API Key 添加網站限制的示例

在末尾添加“/*”部分以允許來自任何網站子頁面的 API 請求非常重要，因此 Google 地圖可以在您網站的所有頁面上運行。

仍然不起作用

  • 如果您更改 API 密鑰限制中的某些內容 - 最多等待 5 分鐘以使設置生效；
  • 如果仍然有錯誤，請再次檢查 JavaScript 控制台以獲取更多詳細信息。 解決第一個問題後可能會出現錯誤；
  • 您也可以嘗試清除瀏覽器緩存。

結論

而已！ 他們說，有志者事竟成。 您剛剛向目錄網站添加了位置搜索功能，現在您的用戶可以按位置搜索列表。 對於大多數目錄來說，這是一個非常重要的功能。 雖然添加谷歌地圖可能看起來有點複雜，但它是值得的。 一旦您將位置搜索添加到您的網站，它將對用戶體驗產生積極影響。 用戶體驗對於任何網站都非常重要，因為它是良好流量的基石之一。

如您所見，您無需任何編碼技能即可將 Google 地圖集成到您的網站中。 如果您還沒有決定使用什麼插件來構建您的目錄網站，您可以考慮 HivePress。 它允許您創建任何類型的目錄和列表網站。 此外，它還包括一個免費的擴展程序，可以實現基於位置的搜索，以及一些您可能會覺得有用的免費功能。

此外，請隨時查看我們的文章：

  • 最受歡迎的免費 WordPress 目錄插件
  • 熱門 WordPress 目錄主題
  • 構建 WordPress 目錄網站時要避免的錯誤