当您希望将地图添加到WordPress网站时,有许多选项可供选择。 对于使用Google Maps的插件,甚至还有免费的选项。

但是,许多现有的WordPress地图插件和免费选项的问题是缺乏可用于您的自定义。

为了使地图适合您的网站并执行特定功能,您将需要一个插件,该插件可让您自定义地图的各个方面。 交互式世界地图 WordPress插件使您能够创建任意数量的地图,并调整每张地图以适合您的需要。

在本教程中,我将向您展示如何使用Interactive World Maps插件创建地图。 我将介绍如何创建地图,如何自定义地图以及如何使用此方便的插件将其添加到您的网站。

要继续,请下载并安装插件!

创建地图

要创建地图,请单击WordPress仪表板左侧的“ 交互式地图”>“添加新地图 ”。 这将打开地图编辑器。

在我们的示例中,我们将创建一个显示欧洲的地图。 我们还将增加欧洲的一些互动区域,以便用户可以更好地了解欧洲的特定国家。

欧洲互动地图

首先,我们将在地图上添加名称和描述。 名称将是欧洲 ,描述将是Interactive Europe Map 。

接下来,转到“ 地图设置”部分。 我们要更改的第一个选项是要显示区域。 由于我们只希望欧洲出现在我们的地图上,因此请在下拉菜单中单击欧洲 。

如果现在向下滚动到地图编辑器的底部,我们可以看到名为Preview的部分。 此预览中现在有欧洲地图。

回到地图设置,我们将“ 活动区域操作”更改为 打开URL”(新窗口),因为当用户单击特定国家/地区时,我们希望出现一个新网页。

地图设定

接下来,我们将开始在编辑器的“ 交互区域”部分中添加地图交互。 这使您可以突出显示特定区域,添加文本,并且在我们这种情况下,单击这些区域时可以打开特定链接。

在我们的欧洲地图中,我们将重点介绍两个国家,意大利和西班牙。 首先,我们将在“ 交互区域”部分的“ 简单”选项卡下添加这些区域。

我们需要包括的第一项是地区代码 。 要查找我们两个国家的地区代码,请点击“ 地图设置”下方的 大陆和国家”链接,这将带您到Google开发人员文档,其中列出了国家和地区的地区代码 。

大陆与国家联系

导航到欧洲 ,您将找到ITES的意大利和西班牙的缩写。

因此,要为意大利创建一个交互式区域,请在“ 区域代码”字段中输入IT 。

接下来,我们将添加一个标题。 当用户将鼠标悬停在地图上的国家上时,将显示标题。 在这种情况下,我们将使用Italy 。

接下来,我们将在“ 工具提示”部分中添加“ 首都:罗马 ”。 工具提示文本将显示在标题下方。

最后,我们将添加操作值。 我们将在此字段中添加URL,以链接到一个网站,单击该区域后将打开该网站。

我们希望点击该国家时在新窗口中打开“意大利维基百科”页面,因此我们将添加该链接 在操作值字段中。

单击编辑器最右边的“ 添加”按钮时,您将在预览中看到“意大利”现在已突出显示。 您可以按照类似的步骤为其他任何国家/地区建立互动区域。

要查看实际的地图创建过程,请查看以下视频。

将地图添加到您的网站

WordPress短代码可以嵌入文件或创建通常只需要一行就需要很多复杂代码的对象。

Interactive World Maps插件利用这些短代码使您可以轻松地将地图添加到您的网站。 要获取特定地图的简码,请单击“ 可视设置”地图编辑器”左侧的“ 创建地图”按钮

简码将出现在编辑器的顶部,将其复制到编辑器或剪贴板。

接下来,转到新页面或发布。 在页面或帖子编辑器中,粘贴简码,然后单击编辑器右侧的“ 预览”按钮。 您刚刚创建的地图现在将在您的页面或帖子上可见。

观看下面的视频,了解如何将地图添加到WordPress帖子或页面。

结论

交互式地图WordPress插件使您能够创建和自定义交互式地图,并以可承受的价格将其放置在WordPress网站上。 在该插件中,您学习了一种使用该插件创建地图的方法。

要尝试使用此插件,请转到CodeCanyon并查看Interactive Map插件实时预览 。

翻译自: https://code.tutsplus.com/tutorials/create-an-interactive-world-map-with-a-wordpress-plugin–cms-33643