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
}