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

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

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

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

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

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

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

在WordPress系列的第2部分中,学习如何将地图添加到WordPress插件管理面板界面并设置开发人员API密钥。

WordPress + TomTom插件–第2部分

在当今的数字第一世界中,将您的在线状态(网站,博客或社交媒体帐户)与企业的实体状态(商店,办公室或活动)建立联系非常重要。

我们之前的文章介绍了将地图添加到企业网站以显示企业所有店面位置的过程。我们选择WordPress作为我们网站的流行,灵活且易于扩展的发布平台,并选择TomTom的Map Display API来提供易用性和行业领先的地图资源。

为了将这些技术整合在一起,我们开始创建WordPress插件,该插件可快速简便地将TomTom Map Display API的功能添加到任何基于WordPress的网站中。在上一篇文章中,我们创建了基本的Plugin元素,这些元素允许插件出现在WordPress管理界面中。我们还向TomTom注册了我们的应用程序,并获得了开发人员密钥来访问Maps和Search API。

在本文中,我们将:

  • 逐步完成开始创建WordPress插件的面向管理员界面所需的步骤。
  • 创建一种保存我们的API密钥的方法。
  • 在“插件管理”面板中显示地图的工作。

先决条件

对于这一部分,您将需要了解HTML,CSS,JavaScript,jQuery和PHP。如果您之前做过一些WordPress开发,这将有所帮助。

我们将逐步完成激活插件的基本步骤,但是我们将跳过纯HTML,JavaScript和PHP且与实现插件的地图部分无关的代码。

将API密钥保存到数据库

在上一篇文章中,我们注册了我们的应用程序并获得了开发人员API密钥。我们需要将其保存到数据库中,以便我们的插件可以使用它。

我们将创建一个新的管理页面来执行此操作。您已经看到引用了该函数的名称:ttlocator_sdk_setup_page_html()。这是一个简单的函数,可以生成HTML表单,用户可以在其中输入其TomTom API密钥:

function ttlocator_sdk_setup_page_html() {
    $plugin_directory = plugin_dir_url(__FILE__);
    $stylesheet = $plugin_directory . "styles/styles.css";
    ?>
    <link href="<?php echo $stylesheet ?>" rel="stylesheet">
    <h1>TomTom SDK Setup</h1>
    <h2>SDK Key</h2>
    <p>Please enter your TomTom API key:</p>
    <form method="post" action="options.php">
        <?php settings_fields( 'tomtom-map-plugin-sdk-setup' ); ?>
        <?php do_settings_sections( 'tomtom-map-plugin-sdk-setup' ); ?>
        <input type="text"
               class="ttlocator-sdk-key-input"
               name="tomtom_locator_api_key"
               value="<?php echo esc_attr(get_option("tomtom_locator_api_key")) ?>" />
        <?php submit_button() ?>
    </form>
    <?php
}

请注意,在表单的开头,我们从WordPress API 调用settings_fields()do_settings_fields()函数。我们还将输入字段的名称设置为将要保存的设置的名称。这些API调用共同确保WordPress能够生成将保存我们的设置的表单。

如果已经将一个API密钥保存到数据库中,我们还使用API​​的get_option()函数预填充文本字段。在这里使用WordPress的Options API可以节省大量时间,因为这意味着我们不必为了保存API密钥而创建新数据库。

最后,我们调用WordPress API的Submit_button()函数。这将生成一个按钮,该按钮会将我们的表单提交到WordPress管理员选项页面。有了这一功能,我们将提供一个功能全面的页面,该页面可让用户保存其TomTom API密钥或更新他们已经输入的密钥。

使用Maps SDK for Web

接下来,让我们下载用于Web文件的TomTom Maps SDK,并将其复制到Plugin项目。

Maps SDK for Web包含将TomTom地图快速添加到网站所需的所有代码文件和资源。Maps SDK for Web包含了预打包的JavaScript库,CSS样式表,图像,字形以及显示地图所需的所有其他资源,而不是自己创建所有资源。您所需要做的就是添加几行HTML,然后调用Maps SDK脚本

接下来,解压缩ZIP文件,将SDK文件文件夹重命名为“ tomtom-sdk”,然后将整个SDK文件文件夹复制到WordPress插件项目文件夹\ wp-tomtom-stores-map。文件应如下所示:

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

这里的\ scripts和\ styles文件夹是我们的Plugin项目的一部分,将在本文后面进行解释。

将地图添加到管理面板

现在,让我们回到ttlocator_config_page_html()函数。以前,它所做的只是显示一个标题。让我们将其提高到11:

function ttlocator_config_page_html() {
    $plugin_directory = plugin_dir_url(__FILE__);
    $stylesheet = $plugin_directory . "styles/styles.css";
    $locator_js = $plugin_directory . "scripts/locator.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-script",
        $locator_js, array(), false, true);

    // add jQuery UI dialogs for deletion confirmation
    wp_enqueue_script( 'jquery-ui-dialog' ); //
    wp_enqueue_style( 'wp-jquery-ui-dialog' );

    ?>
    <div class="ttlocator_locator_page">
    <h1>TomTom Store Locator</h1>
    <div id='map' style='height:500px;width:95%'></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>
    <div class="ttlocator-stores-table">
    <h2>Stores</h2>
    <?php if (sizeof($locations) === 0): ?>
        <p>
            You havent added any stores. Would you like to add one now?
        </p>
    <?php
    else:
        echo ttlocator_store_table_html($locations);
    endif; ?>
        <div class="ttlocator-add-store-button">
            <button class="button button-primary ttlocator-add-store">
                Add Store
            </button>
            <button id="ttlocator-delete-selected"
                    class="button bu">
                Delete Selected
            </button>
        </div>
    </div>
    </div>
    <?php
    echo ttlocator_add_store_html();
    echo ttlocator_delete_location_confirm_dialog_html();
}

这里有很多事情要做,但是如果我们将其分解,还不错。除了一些WordPress API函数外,它主要是纯HTML。

注意的关键是对plugin_dir_url()的调用。顾名思义,这是一个WordPress API调用,提供了当前正在执行的插件的URL。这很重要,因为管理页面需要的所有资产(JavaScript和CSS)都在插件目录的子文件夹中。我们无法对此进行硬编码,因为我们的插件可能运行在许多不同的站点上,每个站点都有一个自定义域。向WordPress询问我们插件的URL,可确保我们始终从正确的位置加载资产。

接下来,我们设置变量来存储页面所需资源的位置:我们自己的JavaScript和CSS,以及TomTom Web SDK所需的JavaScript和CSS。

然后,您会注意到对wp_enqueue_style()wp_enqueue_script()的多次调用。这是在WordPress插件中加载脚本和样式表的首选方式。无需在整个位置插入自己的链接和脚本标签,而是可以依靠WordPress将其正确放置在页面上。

之后,您将看到一个div

<div id="map" style="height:500px;width:95%"> </div>

它可能看起来并不张扬,但这是我们管理页面的地图所在的位置!

div之后,我们设置了一些地图创建自身所需的JavaScript变量:

    <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>

首先,我们要设置TomTom密钥,该密钥将我们的设置页面保存在数据库中。JavaScript必须可以访问此键,以便您的地图正常工作。接下来,我们将保存TomTom SDK所在的确切URL。地图也将需要此功能才能正常工作。最后,我们将保存从激活插件后创建的自定义WordPress表加载的商店位置的列表。

真正的魔力发生在locator.js上 -方便地位于我们插件的scripts子目录中。从第5行开始,您将看到以下代码:

tomtom.setProductInfo('Store Locator', '1.0'); 
var map = tomtom.L.map('map', { 
   key: window.tomtomSdkKey, 
   source: 'vector', 
   basePath: tomtomSdkPath, 
   center: [39.8283, -98.5795], 
   zoom: 3.5 
});

我们首先向SDK讲述将要使用的产品,然后再深入研究创建地图的代码。这是不言自明的:要使用TomTom Web SDK创建地图,只需调用tomtom.L.map()函数。

该函数的第一个参数是一个字符串,其中包含应在其中创建映射的div的ID。第二个参数是一个JavaScript对象,其中包含地图需要的其他数据。keysourcebasepath都是必需的。keybasepath使用我们之前在PHP代码中设置的变量。可以是“向量”或“栅格”。

讨论矢量地图和栅格地图之间的区别不在本文的讨论范围之内,但是通常在使用Web地图时,除非有特殊原因,否则应默认使用矢量地图。

最后两个属性centerzoom是可选的,它们为我们的地图提供了一些有关如何渲染自身的信息。与预期的一样,center为地图提供了一组以其自身为中心的纬度和经度坐标。我们已经在上面的地图中将地图中心设置为美国的正中间,但是可以根据您的需要对其进行自定义,甚至可以在您自己的插件中将其设置为配置选项。

WordPress + TomTom教程系列二:WordPress插件:管理面板插图(2)

旁注:您可能已经注意到在创建地图时我们调用了tomtom.L.map()。L表示Leaflet,这是TomTom Web SDK用于呈现地图的JavaScript开源映射库。当直接与地图进行交互以执行诸如添加标记之类的操作时,您将使用Leaflet API的功能。

设置地图后,ttlocator_config_page_html()的其余部分为沼泽标准的PHP和HTML —与WordPress无关。我们甚至将一些HTML生成工作外包给名为ttlocator_add_store_html()ttlocator_delete_location_confirm_dialog_html()的两个函数,以防止ttlocator_config_page_html()变得过于笨拙。

下一步

在本文中,我们开始创建一个基本的WordPress插件管理面板,使站点管理员可以为网站配置商店地图。我们下载并安装了适用于Web的TomTom Maps SDK,并开始使用SDK和API来构建地图。

在下一篇文章中,我们将创建将保存商店位置的数据库表。我们将添加一个界面来创建商店位置列表,将地址转换为与TomTom Search API协调的坐标,并在地图上显示位置。

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

常见问题FAQ

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

发表评论