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

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

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

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

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

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

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

在我们的WordPress系列的第4部分中,学习如何创建面向用户的地图和WordPress短代码,以使插入地图更加容易。

WordPress插件和TomTom –第4部分

在本系列文章中,我们将使用TomTom Map Display API和Search API通过易于配置的WordPress插件在商业网站上显示店面位置的地图。

在上一篇文章中,我们完成了插件的WordPress管理面板界面的构建。此时,地图将显示在管理面板中,我们可以将商店位置添加到商店数据库中,我们可以使用Search API来获取商店的位置坐标,并且可以在管理面板地图上显示商店位置。

在本文中,我们将:

  • 开发WordPress插件的公开方面:显示在网站本身上的地图。
  • 创建一个WordPress短代码,使站点管理员可以将插件的地图嵌入到任何网页中。
  • 演示如何使用简码以及一些HTML和JavaScript在经典的Wordpress编辑器和新的Gutenberg编辑器中将地图嵌入到页面上。

WordPress简码

作为安全措施,WordPress限制了允许作者直接编写代码到网页中的HTML和脚本编写自动化。相反,WordPress提供了类似于宏的操作的短代码,允许您通过简单的标签将文件,媒体或脚本生成的内容添加到页面。

WordPress.com提供了各种预配置的简码。例如,[音频]简码可让您通过简单地嵌入简码文本并指定要播放的文件,将音频文件播放器显示在页面中。

除了这些预先配置的简码之外,WordPress 简码API还使您能够创建完全自定义的简码。我们将使用Shortcode API创建自定义的[tomtom-store-locator]短代码,该代码允许您将地图嵌入并将列表存储到任何网页上。当为Wordpress网站激活TomTom Stores Map Creator插件时,[tomtom-store-locator]短代码将显示地图以及通过管理面板配置的所有商店位置。

创建自定义地图简码

在plugin目录中,您可以在store-locator-user.php中找到所有用于创建面向最终用户的短代码的PHP。

在文件的底部,您将看到对WordPress的add_shortcode()函数的调用:

add_shortcode('tomtom-store-locator', 'ttlocator_user_map');

这定义了一个名为“ tomtom_store_locator”的简码。第二个参数ttlocator-user-map是WordPress在页面或帖子中看到我们引用的新短代码时将调用的函数的名称。

如我们所见,我们的短代码调用了ttlocator_user_map()函数。看一下该函数将显示以下代码:

function ttlocator_user_map() {
   $plugin_directory = plugin_dir_url(__FILE__);
   $stylesheet = $plugin_directory . "styles/styles.css";
   $locator_js = $plugin_directory . "scripts/locator-user.js";
   $tomtom_sdk_dir = $plugin_directory . "tomtom-sdk/";
   $map_stylesheet = $tomtom_sdk_dir . "map.css";
   $tomtom_js = $tomtom_sdk_dir . "tomtom.min.js";
   $locations = ttlocator_get_locations();

   wp_enqueue_script("jquery");
   wp_enqueue_style("ttlocator-styles", $stylesheet);
   wp_enqueue_style("ttlocator-tomtom-map-styles", $map_stylesheet);
   wp_enqueue_script("ttlocator-tomtom-sdk", $tomtom_js);
   wp_enqueue_script("ttlocator-locator-page-user-script",
       $locator_js, array("jquery"), false, true);
   ?>
   <div style="width: 100%; text-align:left">
   <div id="map" style="width: 100%; height:500px"></div>
   <script>
       var tomtomSdkKey = '<?php echo esc_attr(get_option("tomtom_locator_api_key")); ?>';
       var tomtomSdkPath = '<?php echo $tomtom_sdk_dir; ?>';
       var storeLocations = <?php echo json_encode($locations); ?>;
   </script>
   <h4>Store Locations</h4>
   <?php
   ttlocator_user_store_table_html($locations);
   ?>
   </div>
<?php
}

这可能看起来很熟悉,因为它与我们用于生成地图并将位置存储在管理页面上的代码非常相似。但是,面向用户的地图页面不必那么复杂,因此需要进行一些更改:

  • 我们的页面没有标题,因为它将被添加到已经拥有自己标题的WordPress页面中。
  • 我们包含locator-user.js而不是locator.js。由于我们的面向用户的地图不需要大多数JavaScript,因此需要管理页面,包括所有页面都效率很低。我们用于在商店地图上添加商店标记的JavaScript代码与我们在插件的管理端使用的代码相同。
  • 我们只调用一次ttlocator_user_store_table_html()而不是调用函数来生成商店列表和添加新商店的页面。

让我们看一下ttlocator_user_store_table_html()的代码是什么的:

function ttlocator_user_store_table_html($locations) {
   ?>
   <table id="ttlocator-stores-user-table">
       <thead>
       <tr>
           <th>Name</th>
           <th>Address</th>
           <th>City</th>
           <th>State/Province</th>
           <th>Post/Zip Code</th>
       </tr>
       </thead>
       <tbody>
       <?php foreach($locations as $location): ?>
           <tr>
               <td><?php echo esc_attr($location->name); ?></td>
               <td><?php echo esc_attr($location->address); ?></td>
               <td><?php echo esc_attr($location->city); ?></td>
               <td><?php echo esc_attr($location->state); ?></td>
               <td><?php echo esc_attr($location->postcode); ?></td>
           </tr>
       <?php endforeach; ?>
       </tbody>
   </table>
   <?php
}

同样,这与我们用于在管理页面上生成商店列表的代码非常相似。该函数接收商店位置列表作为其唯一参数,并生成一个HTML表来显示它们。

注意,我们在管理页面上删除了store表中包含的所有CSS类。我们这样做是因为在管理页面上使用的所有这些类都是WordPress管理样式的一部分,并且仅在管理页面上可用。将它们包括在这里将无效。

但是,我们确实为表提供了ID。这将使插件用户可以轻松添加自定义CSS,以确保他们可以按照自己想要的任何方式设置商店列表的样式。除了设置默认的文本大小外,我们还避免对表应用任何样式。WordPress主题通常将自己的自定义样式应用于表格,因此我们要确保表格能够适应可能应用于其的任何样式。

在面向管理员和面向用户的映射之间有如此多的通用代码,您可能想知道为什么我们不将通用代码分解为函数以避免重复。答案是,这是基于过去的Plugin开发经验进行的判断。

尽管最初在管理和面向用户方面有很多共同点是很常见的,但是随着插件的增长和定制,插件的两侧开始出现分歧。结果,经常浪费了花在提早分解出通用代码上的精力。为防止这种情况,我们将标记生成完全隔离在管理页面和用户页面之间。

使用地图简码

现在我们已经创建了一个简码,我们如何实际使用它?

答案取决于您使用的是经典的WordPress编辑器还是新的Gutenberg编辑器。幸运的是,这两种方法都很容易。

如果您使用的是旧的编辑器,只需将[tomtom-store-locator]标签放在页面的文本中:

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

如果您使用的是古腾堡(Gutenberg)编辑器,请将标签放在段落块中:

WordPress + TomTom教程系列四:WordPress插件:面向用户的地图插图(2)

最终结果将是一个如下所示的页面:

WordPress + TomTom教程系列四:WordPress插件:面向用户的地图插图(4)

页面的确切外观将取决于您使用的WordPress主题。

下一步

我们已经走了很长一段路!现在,我们的插件允许我们将商店添加到TomTom地图,并将这些位置显示给WordPress网站的用户。

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

常见问题FAQ

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

发表评论