polymer ajax_在WordPress中使用Polymer：构建自定义Google Maps组件

最新推荐文章于 2024-09-17 13:39:00 发布

dingshi7798

最新推荐文章于 2024-09-17 13:39:00 发布

阅读量185

点赞数

文章标签： python java web js javascript ViewUI

原文链接：https://www.sitepoint.com/polymer-wordpress-custom-component/

版权

polymer ajax

Web组件是用于创建自定义可重用HTML元素的一组标准。 Polymer是一个开放源代码JavaScript库，用于使用Web组件构建Web应用程序。由Google的那些聪明人创建，它提供了比普通Web组件更多的其他功能，并且与polyfill一起使用时，它支持所有主要浏览器的最新版本。

在本教程中，我将向您展示在WordPress中使用Web组件和Polymer多么容易。我将首先向您展示如何将Polymer集成到您的WordPress安装中，然后将演示如何向网站的侧边栏添加有效的Google Maps组件。这对于需要向访客提供前往其场所的路线的任何站点（例如，餐馆的站点）可能都是有用的。

阅读后，您将可以在自己的网站上使用此技术。而且，您不仅限于Google Map小部件，还可以从各种预制组件中进行选择，甚至可以编写自己的组件。

与以往一样，该教程的所有代码都可以在GitHub存储库中找到。

为什么选择聚合物？

随着对Web组件的本地支持越来越好，您可能会问，Polymer是否仍然有用。这个问题的简短答案是肯定的！

Polymer确实使用了多种Web组件填充材料（希望可以在一天之内将其填满），但远远不止这些。 Polymer是Web组件API的包装，它使我们能够以比原本更快的速度开发和实施新组件。它提供了超过原始Web组件的各种附加功能，例如单向和双向数据绑定，计算的属性和手势事件。它带有非常优美的CLI ，可用于诸如搭建项目，运行测试或运行本地服务器之类的任务，并且它可以利用各种预先构建的元素，例如备受喜爱的材料设计元素库。

简而言之，Polymer仍然非常重要。它是一个强大的框架，已被《今日美国》，《可口可乐》和《电子艺术》等大型公司用于制作。

设置WordPress

在开始之前，我们需要设置将要运行WordPress的环境。在本教程中，我将使用ScotchBox Vagrant VM ，该虚拟机配备了一些预安装的工具来启动WordPress的安装。

如果您已经安装了WordPress，或者希望使用其他方法，则可以跳过此位。如果您需要设置方面的帮助，但又不想走下面描述的游荡路线，请尝试使用Google搜索“ 本地安装WordPress ”并寻找最新的教程。

我们首先要确保在我们的系统上安装了Git ， Vagrant和Virtual Box 。然后，我们可以使用ScotchBox的预填充的Vagrantfile克隆GitHub存储库。

git clone https://github.com/scotch-io/scotch-box sitepoint-wp-polymer

现在我们准备好了vagrant up 。机器启动后，我们必须删除默认的/public/index.php静态文件并安装WordPress。

cd sitepoint-wp-polymer/public
rm index.php
git clone https://github.com/WordPress/WordPress.git .

现在，我们必须复制wp-config-sample.php文件。将其命名为wp-config.php 。

cp wp-config-sample.php wp-config.php

并编辑以下值：

// wp-config.php

// ...

define('DB_NAME', 'scotchbox');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');

// ...

现在您可以启动浏览器并访问http://192.168.33.10。系统将提示您输入管理员帐户凭据和网站标题。随意填写这些表格。

在WordPress中使用Polymer：WordPress安装

添加SitePoint基本主题

因此，我们已经设置了WordPress，现在我们需要一个主题。开箱即用，这将是第二十七个主题，但这是非常通用的，包含的内容远远超出了您通常需要的内容。一个很好的替代方法是使用SitePoint WordPress基本主题。

创建此主题是为了回答“完美的WordPress基本主题是什么样？”的问题。其功能包括：

没有脂肪没有cru夫。 Swift。
最小的设计。使它漂亮是您的工作。
没有您从未真正使用过的“可爱”功能。
SEO对其核心友好。
超级移动友好。
100％开源，免费使用。

SitePoint WordPress基本主题是新项目的理想起点。它移动友好，易于使用且100％免费。要继续该教程的其余部分，请转到主题的主页并立即下载。

并且，当您在那里时，您可能也想看看SitePoint提供的付费主题套件。这些都是建立在基本主题之上的，包括电子商务主题，餐厅主题，投资组合主题，业务主题和建筑主题。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

下载SitePoint WordPress基本主题后，将其解压缩并复制/粘贴到wp-content/themes文件夹中。然后在wp-content/themes创建一个名为sitepoint-base-child的新文件夹。在该目录中，创建一个style.css文件和一个functions.php文件。

cd wp-content/themes/
mkdir sitepoint-base-child
cd sitepoint-base-child
touch functions.php style.css

打开style.css并将其复制到其中：

/*
 Theme Name:   SitePoint Base Child
 Author:       Almir B.
 Author URI:   http://almirbijedic.rocks
 Template:     sitepoint-base
 Version:      1.0.0
 Text Domain:  ab-sitepoint-base
*/

并进入functions.php ：

<?php
//functions.php

add_action( 'wp_enqueue_scripts', 'sp_theme_enqueue_styles' );
function sp_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

这将使父主题的基本CSS入队。

我们刚刚创建了一个子主题，其作用是在基本主题之上实现功能，而无需修改基本文件。所有自定义项都属于该子主题。

最后一步是转到管理控制台，然后从主菜单转到“ 外观”>“主题 ”，然后在“ Sitepoint Base Child”主题下单击“ 激活 ”。

在WordPress中使用Polymer：激活Sitepoint基本子主题

在WordPress中包含Polymer

现在完成了，我们必须安装带有bower的 Polymer。确保您位于public/wp-content/themes/sitepoint-base-child文件夹中，然后运行：

bower init

您可以使用默认答案回答每个问题。接下来，我们需要安装依赖项：

bower install --save Polymer/polymer#^2.0.0 PolymerElements/paper-input#2.0-preview

这将安装Polymer和纸张输入组件，以便我们可以开箱即用精美的材料设计输入组件。请务必在纸张输入和以后的Google Map元素中使用#2.0-preview标记，因为否则它将不适用于最新版本的Polymer（2.0版）。

为了使用Polymer，我们必须使用HTML导入将其包括在内，并且还将包括用于Web组件的polyfill，以支持较旧的浏览器。

转到子主题中的functions.php文件，然后向现有的enqueue函数添加一个enqueue 。

<?php
//functions.php

add_action( 'wp_enqueue_scripts', 'sp_theme_enqueue_styles' );
function sp_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_script( 'polymer', get_stylesheet_directory_uri() . '/bower_components/webcomponentsjs/webcomponents-lite.js' );
}

WordPress没有用于使HTML导入入队的入队功能，但是我们可以将其钩到wp_head钩子中，该钩子将输出到页面的<head>元素中。

<?php
//functions.php

add_action( 'wp_enqueue_scripts', 'sp_theme_enqueue_styles' );
function sp_theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'polymer', get_stylesheet_directory_uri() . '/bower_components/webcomponentsjs/webcomponents-lite.min.js' );
}

add_action( 'wp_head', 'include_polymer_elements' );
function include_polymer_elements() {
  ?>

  <link rel="import"
        href="<?php echo get_stylesheet_directory_uri() ?>/bower_components/polymer/polymer.html">
  <link rel="import"
        href="<?php echo get_stylesheet_directory_uri() ?>/bower_components/paper-input/paper-input.html">
  <?php
}

这就是我们开始在WordPress中使用Polymer元素所需要的。现在，让我们创建一个WordPress小部件，以便我们进行测试。

注册小部件

为了创建一个新的小部件，我们将从WP_Widget类创建一个新的子类，然后使用widgets_init钩子将其注册。

在您的子主题中创建一个新文件夹，将其命名为lib ，并添加一个名为sitepoint-map-widget.php的文件。

mkdir lib
cd lib
touch sitepoint-map-widget.php

将以下内容复制到该文件中：

<?php 
// lib/sitepoint-map-widget.php

class SitepointMapWidget extends WP_Widget {

  function __construct() {
    // Instantiate the parent object
    parent::__construct( false, 'Google Paper Input' );
  }

  function widget( $args, $instance ) {
    echo '<paper-input raised always-float-label label="Floating label"></paper-input>';
  }
}

我们在这里所做的只是创建一个新的WP_Widet子类并调用父构造函数，以便为小部件提供自定义名称。另外， widget函数是执行实际输出的函数。现在，我们将仅输出<paper-input>元素，该元素是paper-input-elements集合中的元素。

最后但并非最不重要的一点是，我们需要在functions.php文件顶部包括这个新PHP文件：

<?php
// functions.php
require_once( 'lib/sitepoint-map-widget.php' );

// ...

然后在文件末尾注册一个小部件：

<?php
// functions.php

// ...

add_action( 'widgets_init', 'sp_register_widgets' );
function sp_register_widgets() {
  register_widget( 'SitepointMapWidget' );
}

现在，我们可以进入WordPress的管理控制台。从主菜单进入外观>窗口小部件 ，然后您应该在左侧看到一个名为Google Paper Input的窗口小部件。

将其拖放到右侧“ 主边栏”部分中，位于SitePoint Base主题的其余默认小部件上方。

在WordPress中使用Polymer：侧边小部件

现在，您可以访问主页，在搜索框上方的右侧，您将看到带有标签的材料设计输入。

在WordPress中使用聚合物：纸张输入

因此，我们得出了Polymer的Hello，World！ 例。我们已经介绍了很多内容-安装Polymer，将其与WordPress集成，并包括示例窗口小部件，所有这些都仅用几行代码即可完成，但是在下一节中，我们将进一步介绍并实现我们的Google Map组件。

Web组件库简介

现在，我们将利用WebComponents.org上可用的现成Web组件集合。搜索“ Google Map”将使我们找到所需的元素。通过查看页面URL的最后部分，我们可以在bower中找到包的名称。

确保您位于sitepoint-base-child目录中，并运行以下命令：

bower install --save GoogleWebComponents/google-map#2.0-preview

现在，在sitepoint-base-child目录中创建一个新文件夹，并将其命名为webcomponents 。这是我们将保留所有与Polymer相关的内容的地方。

mkdir webcomponents

创建一个新的聚合物组件

在webcomponents文件夹中创建一个新文件，并将其命名为sitepoint-map.html 。

cd webcomponents
touch sitepoint-map.html

每个Polymer组件都组织成单独HTML文件，代表一个新的自定义HTML标签。该HTML文件由三个值得注意的部分组成：

1.依赖项的导入

// sitepoint-map.html

<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">

这里有我们刚才安装的Google Maps元素，以及Hello，World！中的paper-input元素。例。

2.模板

// sitepoint-map.html

<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">

<dom-module id="sitepoint-map">
  <template>
    <style>
      google-map {
        height: 300px;
      }
    </style>
    <google-map id="spMap"
                fit-to-marker
                mouse-events="true"
                on-google-map-mousemove="trackCoords"
                on-google-map-mouseout="resetCoords"
                api-key="[[clientId]]">
      <google-map-marker latitude="37.78"
                         longitude="-122.4"
                         draggable="true"></google-map-marker>
    </google-map>
    <paper-input raised id="coords" label="Coordinates"></paper-input>
  </template>
</dom-module>

<dom-module>元素的ID是该元素的实际名称，即其标签名称。最佳做法是为它提供与文件名相同的名称。在其中，我们有一个<template>标记，它表示新的自定义元素将由什么组成。始终可以将其分解为基本HTML元素。 <google-map>标记就是脚本，标准HTML元素和其他自定义HTML元素的集合，它们可以用相同的方式再次分解。

元素的ID允许我们使用this.$.id语法从脚本（请参阅下一节）轻松访问它。在我们的例子中，我们将使用this.$.coords引用输入元素。

然后，<google-map>标记上的下一个属性是两个事件：当用户将鼠标悬停在我们的小部件上时触发的google-map-mouseover和当鼠标离开地图时触发的google-map-mouseout 。这在这里并没有太大的实际用途，而是演示了我们如何绑定到从组件触发的事件。我们要做的就是添加on-event-name关键字，并从我们希望触发的组件中传入函数的名称。这是推荐的最佳实践，因为我们不再需要将ID添加到元素，仅是为了将其定位为添加事件侦听器。您可以在此处查看可用方法，事件和属性的完整列表。

我们还传递了fit-to-marker属性，该属性告诉地图调整大小和重新居中，以显示地图内的所有标记。

您还会注意到，我们正在指定一个client-id属性。您必须使用自己的客户ID填写。为了获得其中之一，请按照Google的官方说明进行操作。当您访问该链接时，请先单击“ 获取密钥”按钮。

剧本

// sitepoint-map.html

<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">

<dom-module id="sitepoint-map">
  <template>
    ...
  </template>

  <script>
    class SitepointMap extends Polymer.Element {
      static get is() { return 'sitepoint-map'; }
      static get properties() {
        return {
          clientId: String
        }
      }
      trackCoords(e) { 
        this.$.coords.value = e.detail.latLng.lat() + ", " + e.detail.latLng.lng(); 
      }
      resetCoords() { this.$.coords.value = "" }
    }

    window.customElements.define(SitepointMap.is, SitepointMap);
  </script>
</dom-module>

创建元素的最低要求就是这一部分：

class SitepointMap extends Polymer.Element {
  static get is() { return 'sitepoint-map'; }
}
window.customElements.define(SitepointMap.is, SitepointMap);

类的名称应与<dom-template>元素的ID相同。最好的做法是驼峰使用此名称，然后从静态is函数返回<dom-template>元素的ID。

接下来是属性对象，它是保留的函数名称，用于在元素上注册任何属性。这里要注意的重要一点是，任何包含多个破折号的单词组成的属性，如下所示：

<sitepoint-map client-id="..."></sitepoint-map>

将被引用为clientId ，即骆驼装在组件内部。

我们是否使用过骆驼套，像这样：

<sitepoint-map clientId="..."></sitepoint-map>

然后，在组件内部，该属性将变为所有小写形式，因此引用将改为clientid 。

在属性之后，我们有两个自定义方法，分别用作mousemove和mouseout事件的回调。 trackCoords方法仅获取鼠标在地图上的经度和纬度位置，并将其显示在输入中。

现在我们已经有了一个Web组件，还有几件事情要做。

导入<sitepoint-map>组件

首先，让我们在webcomponents文件夹中创建一个index.html文件。这将用于导入我们所有的自定义组件。我们将使该文件入队一次，因此我们不必担心每次添加新组件时都会使HTML导入入队。相反，我们可以将其导入index.html文件中，这比使用PHP将其回显到wp_head更为方便。

然后，将其粘贴到新创建的index.html文件中：

// webcomponents/index.html

<link rel="import" href="sitepoint-map.html">

返回到functions.php文件，在该文件的头部包含纸质按钮和聚合物HTML导入。我们不再需要纸质按钮导入，因此将其删除，然后从webcomponents目录中包含index.html webcomponents ：

<?php
// functions.php

add_action( 'wp_head', 'include_polymer_elements' );
function include_polymer_elements() {
  ?>
  <link rel="import"
        href="<?php echo get_stylesheet_directory_uri() ?>/bower_components/polymer/polymer.html">
  <link rel="import"
        href="<?php echo get_stylesheet_directory_uri() ?>/webcomponents/index.html">
  <?php
}

从现在开始，您可以将所有自定义组件添加到index.html 。例如，如果我们还有一个自定义的Google Calendar组件，或者只需要使用开箱即用的组件（如paper-progress），我们将这样做

// webcomponents/index.html

<link rel="import" href="sitepoint-map.html">
<link rel="import" href="sitepoint-calendar.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">

不要复制它，这只是一个例子。

输出<sitepoint-map> HTML标记

现在，我们需要输出一个<sitepoint-map> HTML Tag来代替以前使用的纸张输入。

<?php
// lib/sitepoint-map-widget.php

class SitepointMapWidget extends WP_Widget {

  function __construct() {
    // Instantiate the parent object
    parent::__construct( false, 'Google Map' );
  }

  function widget( $args, $instance ) {
    echo '<sitepoint-map client-id="' . GOOGLE_MAP_API_KEY . '"></sitepoint-map>';
  }
}

另外，不要忘记定义自己的GOOGLE_MAP_API_KEY常量。最好的位置是我们子主题中functions.php文件的顶部。

<?php
// functions.php

require_once( 'lib/sitepoint-map-widget.php' );
define('GOOGLE_MAP_API_KEY', '<your-key-here>');

瞧！现在，我们有了一个功能齐全的适用于WordPress的Google Map小部件。通常，提供这种功能的插件可以包含数百行PHP代码。在这里，我们在webcomponents文件夹中有一个非常不错的设置，其中的所有内容都是集中的，易于扩展和自定义。

在WordPress中使用Polymer：生成Google Map

结论

至此，我们结束了本教程的结尾。现在，您应该知道如何将Polymer集成到WordPress安装中以及如何添加自定义组件。如果您想进一步提高自己的技能，那么我们的Google Maps组件的下一步就是将WordPress小部件属性映射到该组件的属性。这样，您将能够从“ 外观”>“小部件”配置屏幕中传递诸如标记位置，客户端ID等的参数。为什么不尝试自己实现这一目标，并让我知道您的情况。

同时，请花一些时间深入研究Web组件的美丽世界，在库中浏览并找到一些有趣的东西可以集成到WordPress中。请在下面的评论中与我们分享您的发现。我会监视的！

本文由Simon Codrington同行评审。 感谢所有SitePoint的同行评议者使SitePoint内容达到最佳状态！[/ special]