WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置

作者 : IT 大叔 本文共3935个字,预计阅读时间需要10分钟 发布时间: 2020-09-16

WordPress + TomTom教程(4部分系列)

教程系列一:WordPress插件:设置并向您的网站添加位置

教程系列二:WordPress插件:管理面板

教程系列三:WordPress插件:将商店添加到地图

教程系列四:WordPress插件:面向用户的地图

向您的WordPress网站添加地图很容易!在本教程中了解如何进行。

WordPress + TomTom插件-第1部分

如今,您的企业必须具备在线形象,创建网站,博客或社交媒体帐户以参与数字经济从未如此简单。如果您的公司也有实体店怎么办?您希望将在线状态连接到实体世界中的商店,办公室或活动,以便客户找到您。将地图添加到您的网站即可解决该问题。

让我们看一个将您的数字业务映射到您的真实业务的解决方案:创建一个WordPress插件,该插件使TomTom映射添加到任何基于WordPress的网站都变得快捷,容易。在本文中,我们将:

  • 说明WordPress为什么是建立在线形象的绝佳选择,以及插件的工作原理。
  • 创建一个基本的插件。
  • 注册使用Map Display API所需的开发人员API密钥。

WordPress网站

我们决定从WordPress(https://wordpress.org)开始,因为尽管有很多方法可以建立网站,但WordPress不管您的业务规模和团队的技术能力如何,都具有一些明显的优势。

WordPress是一种流行的开源Web发布平台,几乎占所有网站的1/3。WordPress非常灵活,可用于构建从简单博客到企业电子商务网站的任何内容。此外,WordPress还可以作为wordpress.com上的托管解决方案,通过许多Web托管服务使用的交钥匙应用程序或自托管的Web发布框架。

设置完成后,WordPress网站将提供一个简单的后端管理界面,使非技术用户无需直接编写代码或更改文件即可管理和自定义网站。WordPress插件是可选软件包,使用户能够“插入”基本WordPress平台未提供的其他功能,自动化或自定义。

有一个官方的WordPress插件存储库,用户可以从中找到并安装其他用户编写的插件。WordPress插件易于编写,只需要一点点HTML,PHP和一些JavaScript知识。实际上,我们将开始使用基本的WordPress插件,该插件到本文结尾将地图添加到网站上。

TomTom地图

下一步是确定如何向网站添加地图。该地图将显示在我们的“联系我们”页面上,并支持显示列表或数据库中定义的位置的标记。

对于此项目,我们使用TomTom的Map Display API来实现商店地图WordPress插件。TomTom是GPS导航和地图领域最有经验的公司之一,它们提供当今一些最佳的地图。TomTom的Map Display API和其他支持API易于使用,并具有适用于测试,个人使用和小型企业的免费层。此外,您还将找到有关使用Map Display API的出色文档,教程和示例。

在本文的结尾,我们将向TomTom注册我们的应用程序(在本例中为插件),并获取允许我们使用TomTom Maps和Search API的开发人员密钥。

创建一个WordPress插件

现在,我们已经做出了一些基本决定,让我们深入研究实现实际的WordPress插件。您需要执行以下操作才能继续:

  • 在可以访问文件系统的环境中可以正常工作的WordPress安装。要编写新的插件,可以使用本地测试环境。
  • 注册您的用户帐户,并在TomTom开发人员站点上获得免费的API密钥。
  • 用于创建和编辑插件代码文件的文本编辑器或开发环境。
  • PHP和JavaScript编程语言的基本知识很有帮助,但不是必需的。我们将提供重要的代码详细信息。

在您的WordPress安装中,所有插件都将安装在/ wp-content / plugins文件夹中。单个PHP文件中包含的插件可以直接安装在此文件夹中。需要其他资源(代码文件,图像等)的插件位于/ plugins文件夹中自己的子文件夹中。

我们将从一个简单的单文件插件开始。但是,在以后的文章中,我们将向插件添加功能,这些功能将需要支持的代码文件,因此我们需要创建以下文件夹:

/wp-content/plugins/wp-tomtom-stores-map

在此文件夹中,创建一个新文件:

/wp-content/plugins/wp-tomtom-stores-map/store-locator.php  

wp-tomtom-stores-map.php文件包含以下代码:

  Plugin Name: TomTom Stores Map Creator 
  Plugin URI: http://developer.tomtom.com/ 
  Description: Creates a map showing store locations. 
*/ 
,?>

保存此文件后,WordPress插件将出现在您网站的管理面板中。

WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置插图

它不会做任何事情,但是您已经创建了基本的插件。在以后的文章中,我们将以此为基础。

创建插件管理面板

到目前为止,我们刚刚创建的基本WordPress插件文件做得很少。它标识插件,并使其显示在我们的WordPress网站的可用插件列表中。您甚至可以激活和禁用插件。但是,到目前为止,它什么也没有做。

下一步是告诉WordPress在激活后将其添加到菜单栏中。add_action函数负责此操作:

/wp-content/plugins/wp-tomtom-stores-map/store-locator.php  

所述ADD_ACTION()函数是一个钩子,当WordPress的插件被激活运行在指定的时间,在这种情况下。

我们将使add_action()运行一个函数,该函数将基于ttlocator_pages_init()函数创建一个带有两个子菜单项的管理菜单项,如下所示:

function ttlocator_pages_init() { 
  add_menu_page( "TomTom Map Configuration", 
     "TomTom Store Locator", 
     "manage_options", 
     "tomtom-map-plugin"); 

  add_submenu_page("tomtom-map-plugin", 
       "TomTom Store Locations", 
       "Store Locations", 
       "manage_options", 
       "tomtom-map-plugin", 
       "ttlocator_config_page_html"); 

  add_submenu_page("tomtom-map-plugin", 
       "TomTom SDK Setup", 
       "SDK Setup", 
       "manage_options", 
       "tomtom-map-plugin-sdk-setup", 
       "ttlocator_sdk_setup_page_html"); 

  if (is_admin()) { 
      add_action('admin_init', 'ttlocator_register_settings'); 
   } 
}  

该功能中的选项定义了管理窗格标题,管理菜单标题,配置插件所需的用户功能,菜单项的唯一内部名称以及定义管理页面内容的功能。

我们还添加了一个动作来调用ttlocator_register_settings()函数。此函数在WordPress中注册了一个设置,这将使我们将TomTom Map Display API密钥保存到数据库中。

ttlocator_config_page_html()函数将调用网页的实际内容。

function ttlocator_config_page_html(){ 
  ?>

现在,这只是在窗格中打印一个标题。接下来,我们将在窗格中添加一些其他功能。

WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置插图(2)

注册TomTom Map Display API密钥

下一步将需要访问TomTom Map Display API和软件开发人员工具包(SDK),因此您需要注册为开发人员,向TomTom注册您的应用程序,并获得API访问密钥。

要注册为开发人员,请转到TomTom for Developers注册页面并创建一个新的用户帐户。如果您已经注册,请转到TomTom for Developers登录页面并登录。

登录后,转到仪表板,然后单击“ +添加新应用”按钮。系统将要求您提供有关该应用程序的一些信息。输入“ TomTom商店地图插件”作为应用程序名称。

WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置插图(4)

您可以选中要用于项目的任何API的复选框。对于WordPress插件,请检查Map Display API和Search API。我们将使用Map Display API来显示带有商店位置图钉的地图。我们将使用Search API查找商店地址的地图坐标。

WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置插图(6)

在仪表板上,您可以看到应用程序的使用者API密钥。这用于授权代码中对API的调用。

WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置插图(8)

重要的安全说明:在组织和代码中确保使用者API密钥的安全很重要。用您的密钥计数的所有API交易都会使用信用,因此正确保护密钥可确保只有您的应用程序正在使用这些信用。

下一步

在本文的开头,我们着手创建一个地图解决方案,该解决方案可以将企业的在线Web形象链接到其真实世界的店面形象。使用WordPress作为易于访问的Web发布平台,我们创建了WordPress插件的起始元素,该插件将使用TomTom Map Display API在网站上显示地图。

我们还向TomTom注册了应用程序,并获得了插件访问地图显示和搜索API所需的开发人员密钥。

此时,该插件可以被激活并具有管理面板界面,但无法执行任何工作。在下一篇文章中,我们将向插件添加更多功能,包括管理面板界面,该界面包括地图以及创建商店位置列表的功能。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » WordPress + TomTom教程系列一:WordPress插件:设置并向您的网站添加位置

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论