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 中添加地址字段自动完成功能

OMPOSE AI
OMPOSE AI

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

下载

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

但是,如果这是您第一次设置 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 插件列表或有关如何创建电子邮件通讯的指南。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

203

2023.11.20

Golang channel原理
Golang channel原理

本专题整合了Golang channel通信相关介绍,阅读专题下面的文章了解更多详细内容。

261

2025.11.14

golang channel相关教程
golang channel相关教程

本专题整合了golang处理channel相关教程,阅读专题下面的文章了解更多详细内容。

351

2025.11.17

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

420

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

541

2024.05.29

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

236

2023.12.07

数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

384

2023.06.29

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

2111

2023.08.14

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

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

共4课时 | 22.5万人学习

Node.js 教程
Node.js 教程

共57课时 | 13.1万人学习

CSS3 教程
CSS3 教程

共18课时 | 7万人学习

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

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