0

0

如何在 WordPress 中添加地址字段自动完成功能

冷漠man

冷漠man

发布时间:2025-05-31 14:22:01

|

733人浏览过

|

来源于php中文网

原创

您想在 wordpress 中为地址字段添加自动完成功能吗?

最近,我们的一位用户询问我们如何在 WordPress 表单中添加地址字段的自动完成功能。自动完成功能允许用户在键入时从实时生成的建议中快速选择地址。

在本文中,我们将向您展示如何使用 Google Places API 在 WordPress 中添加地址字段的自动完成功能。

如何在 WordPress 中添加地址字段自动完成功能

为什么在 WordPress 中添加自动完成地址字段

在 WordPress 中添加自动完成地址字段可以帮助您改善网站的用户体验。

例如,如果您拥有一家电子商务商店,您的客户将能够更快地输入他们的地址并避免拼写错误。

当购物者输入地址时,可能的地址将根据他们当前的位置显示在屏幕上,因此他们所需要做的就是选择正确的地址。这有助于您减少错误,因为向用户显示的选项与 Google Places 和 Google Maps API 相关联。

地址字段中的自动完成是您可以为用户提供的最方便的功能之一。如果您可以快速帮助买家完成结帐,他们更有可能完成购买。

通过使每次购买变得快速而简单,您更有可能提高销售额,并将偶尔的购物者变成回头客。

现在您已经了解了在 WordPress 中添加自动完成地址字段的好处,我们将逐步向您展示如何操作。

视频教程

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

如果您不喜欢该视频或需要更多说明,请继续阅读。

您需要做的第一件事是安装并激活自动完成 Google 地址插件。

如何在 WordPress 中添加地址字段自动完成功能

有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

激活后,您需要访问WordPress 仪表板中的设置 » 自动完成页面来配置插件设置。

如何在 WordPress 中添加地址字段自动完成功能

系统会要求您输入 Google Places API 密钥。此 API 密钥允许您的网站与 Google 地图连接,并从其数据库中实时检索自动完成建议。

访问 Google 地方信息 API 密钥

前往Google Developer Console网站并创建一个新项目。

如何在 WordPress 中添加地址字段自动完成功能

您将进入一个新页面,要求您提供项目的名称。

使用有助于您稍后识别项目的名称,然后单击“创建”按钮。如果您有想要连接的组织,可以点击“浏览”链接查看选项下拉列表。

如何在 WordPress 中添加地址字段自动完成功能

等待几秒钟,您将自动重定向到 API 和服务页面。

从这里,您想要导航到左侧面板并单击“库”选项卡。

如何在 WordPress 中添加地址字段自动完成功能

现在,您将看到可以为您的项目启用的流行 Google API 的列表。在左侧面板中,选择“地图”以仅按与地图相关的选项进行过滤。

您只需找到并单击“Places API”选项即可。

如何在 WordPress 中添加地址字段自动完成功能

从那里,您将被引导至 Places API 的概述页面。

只需单击“启用”按钮即可授权 API。

如何在 WordPress 中添加地址字段自动完成功能

如果您的 Google 控制台设置正确,您应该会看到一个弹出窗口,其中包含您的 API 密钥。

OMPOSE AI
OMPOSE AI

一款免费的 Chrome 插件,可加快您的写作速度,让您可以在任何地方使用自动完成功能,并减少打字时间。

下载

但是,如果这是您第一次设置 Google Console 帐户,则可能需要输入结算信息。

如何在 WordPress 中添加地址字段自动完成功能

现在,您可以返回您的 WordPress 网站。

将 API 密钥从 Google 控制台粘贴到显示“Google Place API 密钥”的位置。

如何在 WordPress 中添加地址字段自动完成功能

为了确保自动完成地址在 WordPress 中正常工作,您需要启用 Google Maps JavaScript API。

因此,您所要做的就是从 Google 开发者控制台仪表板返回“API 和服务”选项卡。然后,找到“Maps JavaScript API”并单击“启用”。

如何在 WordPress 中添加地址字段自动完成功能

现在,您已准备好继续添加表单 ID。

对于下一步,您将需要要添加自动完成地址功能的地址字段的表单 ID。

在 WordPress 表单字段中启用自动完成地址

您可以将自动完成地址功能添加到由任何WordPress 表单生成器插件创建的任何表单字段。

我们将在本教程中使用WPForms,因为它是最好的拖放表单生成器,并且对于初学者来说最容易使用。但是,无论您使用什么联系表单插件,这些说明都将起作用。

首先,您需要创建一个具有一个或一组地址字段的表单。

完成后,像平常一样将此表单添加到您的 WordPress 网站。

接下来,转到您添加表单的帖子或页面。您需要右键单击地址字段并从浏览器菜单中选择“检查”。

如何在 WordPress 中添加地址字段自动完成功能

在这里,您将看到突出显示的部分,其中包含输入字段的表单 ID 值。

例如,在此屏幕截图中,我们表单的 ID 值为wpforms-567-field_4。

如何在 WordPress 中添加地址字段自动完成功能

您需要复制该值并将其粘贴到插件设置页面。

但是,您需要将自动完成功能添加到整个地址表单中。例如,如果您希望用户能够自动填充整个送货地址,这意味着他们需要自动填充城市、起始地址和邮政编码。

在这种情况下,您需要遵循相同的过程,单击“检查”,然后查找每个字段的表单 ID。

如何在 WordPress 中添加地址字段自动完成功能

获得所有 ID 后,将其复制到“自动完成”页面,其中显示“表单 ID”。

添加多个 ID 时,您需要用逗号和引号分隔每个 ID,如下所示。完成后,不要忘记点击“保存更改”。

如何在 WordPress 中添加地址字段自动完成功能

就这样; 您现在可以访问您的表单页面并尝试输入地址。

表单字段将自动开始显示使用 Google Places 和Google Maps 的建议。

如何在 WordPress 中添加地址字段自动完成功能

现在,您已成功将 Google 地址自动完成功能添加到您的表单中。用户将能够自动填写您的表单,无论他们是从您的WooCommerce 商店结账还是完成用户注册

我们希望本文能帮助您了解如何在 WordPress 中为地址字段添加自动完成功能。您可能还想查看我们的24 个商业网站必备 WordPress 插件列表或有关如何创建电子邮件通讯的指南。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

538

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

390

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

989

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

653

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

541

2023.09.20

俄罗斯搜索引擎Yandex最新官方入口网址
俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com;用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1

2025.12.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 0.6万人学习

Node.js 教程
Node.js 教程

共57课时 | 7.6万人学习

CSS3 教程
CSS3 教程

共18课时 | 4.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号