.jpg)
您想在 wordpress 中為地址字段添加自動(dòng)完成功能嗎？
最近，我們的一位用戶詢問(wèn)我們?nèi)绾卧?WordPress 表單中添加地址字段的自動(dòng)完成功能。自動(dòng)完成功能允許用戶在鍵入時(shí)從實(shí)時(shí)生成的建議中快速選擇地址。
在本文中，我們將向您展示如何使用 Google Places API 在 WordPress 中添加地址字段的自動(dòng)完成功能。
為什么在 WordPress 中添加自動(dòng)完成地址字段
在 WordPress 中添加自動(dòng)完成地址字段可以幫助您改善網(wǎng)站的用戶體驗(yàn)。
例如，如果您擁有一家電子商務(wù)商店，您的客戶將能夠更快地輸入他們的地址并避免拼寫(xiě)錯(cuò)誤。
當(dāng)購(gòu)物者輸入地址時(shí)，可能的地址將根據(jù)他們當(dāng)前的位置顯示在屏幕上，因此他們所需要做的就是選擇正確的地址。這有助于您減少錯(cuò)誤，因?yàn)橄蛴脩麸@示的選項(xiàng)與 Google Places 和 Google Maps API 相關(guān)聯(lián)。
地址字段中的自動(dòng)完成是您可以為用戶提供的最方便的功能之一。如果您可以快速幫助買家完成結(jié)帳，他們更有可能完成購(gòu)買。
通過(guò)使每次購(gòu)買變得快速而簡(jiǎn)單，您更有可能提高銷售額，并將偶爾的購(gòu)物者變成回頭客。
現(xiàn)在您已經(jīng)了解了在 WordPress 中添加自動(dòng)完成地址字段的好處，我們將逐步向您展示如何操作。
視頻教程
https://www.youtube.com/embed/r4zeGIMrzzE?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner
https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com
如果您不喜歡該視頻或需要更多說(shuō)明，請(qǐng)繼續(xù)閱讀。
您需要做的第一件事是安裝并激活自動(dòng)完成 Google 地址插件。
有關(guān)更多詳細(xì)信息，請(qǐng)參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。
激活后，您需要訪問(wèn)WordPress 儀表板中的設(shè)置 ? 自動(dòng)完成頁(yè)面來(lái)配置插件設(shè)置。
系統(tǒng)會(huì)要求您輸入 Google Places API 密鑰。此 API 密鑰允許您的網(wǎng)站與 Google 地圖連接，并從其數(shù)據(jù)庫(kù)中實(shí)時(shí)檢索自動(dòng)完成建議。
訪問(wèn) Google 地方信息 API 密鑰
前往Google Developer console網(wǎng)站并創(chuàng)建一個(gè)新項(xiàng)目。
您將進(jìn)入一個(gè)新頁(yè)面，要求您提供項(xiàng)目的名稱。
使用有助于您稍后識(shí)別項(xiàng)目的名稱，然后單擊“創(chuàng)建”按鈕。如果您有想要連接的組織，可以點(diǎn)擊“瀏覽”鏈接查看選項(xiàng)下拉列表。
等待幾秒鐘，您將自動(dòng)重定向到 API 和服務(wù)頁(yè)面。
從這里，您想要導(dǎo)航到左側(cè)面板并單擊“庫(kù)”選項(xiàng)卡。
現(xiàn)在，您將看到可以為您的項(xiàng)目啟用的流行 Google API 的列表。在左側(cè)面板中，選擇“地圖”以僅按與地圖相關(guān)的選項(xiàng)進(jìn)行過(guò)濾。
您只需找到并單擊“Places API”選項(xiàng)即可。
從那里，您將被引導(dǎo)至 Places API 的概述頁(yè)面。
只需單擊“啟用”按鈕即可授權(quán) API。
如果您的 Google 控制臺(tái)設(shè)置正確，您應(yīng)該會(huì)看到一個(gè)彈出窗口，其中包含您的 API 密鑰。
但是，如果這是您第一次設(shè)置 Google Console 帳戶，則可能需要輸入結(jié)算信息。
現(xiàn)在，您可以返回您的 WordPress 網(wǎng)站。
將 API 密鑰從 Google 控制臺(tái)粘貼到顯示“Google Place API 密鑰”的位置。
為了確保自動(dòng)完成地址在 WordPress 中正常工作，您需要啟用 Google Maps JavaScript API。
因此，您所要做的就是從 Google 開(kāi)發(fā)者控制臺(tái)儀表板返回“API 和服務(wù)”選項(xiàng)卡。然后，找到“Maps JavaScript API”并單擊“啟用”。
現(xiàn)在，您已準(zhǔn)備好繼續(xù)添加表單 ID。
對(duì)于下一步，您將需要要添加自動(dòng)完成地址功能的地址字段的表單 ID。
在 WordPress 表單字段中啟用自動(dòng)完成地址
您可以將自動(dòng)完成地址功能添加到由任何WordPress 表單生成器插件創(chuàng)建的任何表單字段。
我們將在本教程中使用WPForms，因?yàn)樗亲詈玫耐戏疟韱紊善鳎⑶覍?duì)于初學(xué)者來(lái)說(shuō)最容易使用。但是，無(wú)論您使用什么聯(lián)系表單插件，這些說(shuō)明都將起作用。
首先，您需要?jiǎng)?chuàng)建一個(gè)具有一個(gè)或一組地址字段的表單。
完成后，像平常一樣將此表單添加到您的 WordPress 網(wǎng)站。
接下來(lái)，轉(zhuǎn)到您添加表單的帖子或頁(yè)面。您需要右鍵單擊地址字段并從瀏覽器菜單中選擇“檢查”。
在這里，您將看到突出顯示的部分，其中包含輸入字段的表單 ID 值。
例如，在此屏幕截圖中，我們表單的 ID 值為wpforms-567-field_4。
您需要復(fù)制該值并將其粘貼到插件設(shè)置頁(yè)面。
但是，您需要將自動(dòng)完成功能添加到整個(gè)地址表單中。例如，如果您希望用戶能夠自動(dòng)填充整個(gè)送貨地址，這意味著他們需要自動(dòng)填充城市、起始地址和郵政編碼。
在這種情況下，您需要遵循相同的過(guò)程，單擊“檢查”，然后查找每個(gè)字段的表單 ID。
獲得所有 ID 后，將其復(fù)制到“自動(dòng)完成”頁(yè)面，其中顯示“表單 ID”。
添加多個(gè) ID 時(shí)，您需要用逗號(hào)和引號(hào)分隔每個(gè) ID，如下所示。完成后，不要忘記點(diǎn)擊“保存更改”。
就這樣;?您現(xiàn)在可以訪問(wèn)您的表單頁(yè)面并嘗試輸入地址。
表單字段將自動(dòng)開(kāi)始顯示使用 Google Places 和Google Maps 的建議。
現(xiàn)在，您已成功將 Google 地址自動(dòng)完成功能添加到您的表單中。用戶將能夠自動(dòng)填寫(xiě)您的表單，無(wú)論他們是從您的WooCommerce 商店結(jié)賬還是完成用戶注冊(cè)。
我們希望本文能幫助您了解如何在 WordPress 中為地址字段添加自動(dòng)完成功能。您可能還想查看我們的24 個(gè)商業(yè)網(wǎng)站必備 WordPress 插件列表或有關(guān)如何創(chuàng)建電子郵件通訊的指南。
.png)
