Web组件是用于创建自定义可重用HTML元素的一组标准。 Polymer是一个开放源代码JavaScript库,用于使用Web组件构建Web应用程序。 由Google的那些聪明人创建,它提供了比普通Web组件更多的其他功能,并且与polyfill一起使用时,它支持所有主要浏览器的最新版本 。
在本教程中,我将向您展示在WordPress中使用Web组件和Polymer多么容易。 首先,我将向您展示如何将Polymer集成到您的WordPress安装中,然后将演示如何向网站的侧边栏中添加有效的Google Maps组件 。 这对于需要向访客提供前往其场所的路线的任何站点(例如,餐馆的站点)可能都是有用的。
阅读后,您将可以在自己的网站上使用此技术。 您将不仅限于Google Map小部件,还可以从各种预制组件中进行选择 ,甚至可以编写自己的组件 。
与以往一样,该教程的所有代码都可以在GitHub存储库中找到 。
为什么选择聚合物?
随着对Web组件的本地支持越来越好,您可能会问,Polymer是否仍然有用。 这个问题的简短答案是肯定的!
Polymer确实利用了各种Web组件的Polyfill(希望有一天能在路边充满),但远远不止这些。 Polymer是Web组件API的包装,它使我们能够以比原本更快的速度开发和实施新组件。 它提供了超越原始Web组件的各种附加功能,例如单向和双向数据绑定,计算的属性和手势事件。 它带有非常优美的CLI ,可用于诸如搭建项目,运行测试或运行本地服务器之类的任务,并且它可以利用各种预先构建的元素,例如备受喜爱的材料设计元素库 。
简而言之,聚合物仍然非常重要。 它是一个功能强大的框架,已被《今日美国》,《可口可乐》和《电子艺术》等大型公司用于制作。
设置WordPress
在开始之前,我们需要设置将要运行WordPress的环境。 在本教程中,我将使用ScotchBox Vagrant VM ,该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。 系统将提示您输入管理员帐户凭据和网站标题。 随意填写这些表格。
添加SitePoint基本主题
因此,我们已经设置了WordPress,现在我们需要一个主题。 开箱即用,这将是第二十七个主题 ,但这是非常通用的,包含的内容远远超出了您通常需要的内容。 一个很好的替代方法是使用SitePoint WordPress基本主题 。
创建此主题是为了回答“完美的WordPress基本主题是什么样?”的问题。 其功能包括:
- 没有脂肪 没有cru夫。 迅速。
- 最小的设计。 使它漂亮是您的工作。
- 没有您从未真正使用过的“可爱”功能。
- SEO对其核心友好。
- 超级移动友好。
- 100%开放源代码,免费使用。
SitePoint WordPress基本主题是新项目的理想起点。 它移动友好,易于使用且100%免费。 要继续该tis教程的其余部分,请转到主题的主页并立即下载 。
并且,当您在那里时,您可能也想看看SitePoint提供的一组付费主题 。 这些都是基于基本主题构建的,包括电子商务主题,餐厅主题,投资组合主题,业务主题和建筑主题。
下载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
现在完成了,我们必须安装带有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的窗口小部件。
将其拖放到右侧的Main Sidebar部分中,位于SitePoint Base主题的其余默认小部件上方。
现在,您可以访问主页,在搜索框上方的右侧,您将看到带有标签的材料设计输入。
因此,我们得出了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
。 这是我们将保留所有与聚合物相关的材料的地方。
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
文件夹中有一个非常不错的设置,其中的所有内容都是集中的,并且易于扩展和自定义。
结论
至此,我们结束了本教程的结尾。 现在,您应该知道如何将Polymer集成到WordPress安装中以及如何添加自定义组件。 如果您想进一步提高自己的技能,那么Google Maps组件的下一步就是将WordPress小部件属性映射到该组件的属性。 这样,您将能够从“ 外观”>“小部件”配置屏幕中传递诸如标记位置,客户端ID等的参数。 为什么不尝试自己实现这一目标,并让我知道您的情况。
同时,请花一些时间深入研究Web组件的美丽世界, 在库中浏览并找到一些有趣的东西可以集成到WordPress中。 请在下面的评论中与我们分享您的发现。 我会监视的!
本文由Simon Codrington同行评审。 感谢所有SitePoint的同行评议者使SitePoint内容达到最佳状态![/ special]
From: https://www.sitepoint.com/polymer-wordpress-custom-component/