Webové komponenty představují sadu standardů pro vytváření vlastních, opakovaně použitelných prvků HTML. Polymer je open-source JavaScriptová knihovna pro vytváření webových aplikací pomocí webových komponent. Vytvořili ho ti chytří lidé z Google, poskytuje řadu dalších funkcí přes vanilkové webové komponenty a při použití s polyfill podporuje nejnovější verzi všech hlavních prohlížečů.
V tomto tutoriálu vám ukážu, jak snadné je používat webové komponenty a Polymer ve WordPressu. Začnu tím, že vám ukážu, jak integrovat Polymer do vaší instalace WordPress, pak ukážu, jak přidat funkční komponentu Mapy Google na postranní panel vašeho webu. To může být užitečné pro všechny stránky (např. restaurace), které potřebují poskytnout návštěvníkům cestu do svých prostor.
Po přečtení budete moci tuto techniku použít na svém vlastním webu. A nebudete omezeni na widget Google Map, budete si moci vybrat ze široké škály předpřipravených komponent nebo si dokonce napsat své vlastní.
Jako vždy je veškerý kód pro tento tutoriál k dispozici v úložišti GitHub.
Proč polymer?
Vzhledem k tomu, že nativní podpora webových komponent je stále lepší, možná vám bude odpuštěno, že se ptáte, zda je Polymer stále relevantní. Krátká odpověď na tuto otázku je Ano!
Polymer využívá různé polyfilly webových komponent – které snad budou jednoho dne plné – ale je to mnohem víc než to. Polymer je obal kolem rozhraní API webových komponent, který nám umožňuje vyvíjet a implementovat nové komponenty mnohem rychleji, než bychom byli jinak schopni. Nabízí různé další funkce přes vanilkové webové komponenty, jako je jednosměrná a obousměrná datová vazba, vypočítané vlastnosti a události gest. Dodává se s velmi vybroušeným CLI, které lze použít pro takové úkoly, jako je lešení projektu, spouštění testů nebo spuštění místního serveru, a může využívat širokou škálu předpřipravených prvků, jako je například oblíbený materiál knihovna designových prvků.
Stručně řečeno, Polymer je stále velmi aktuální. Jde o výkonný framework, který ve výrobě používají velké společnosti jako USA Today, Coca Cola a Electronic Arts.
Nastavení WordPress
Než začneme, musíme nastavit naše prostředí, ve kterém bude spuštěn WordPress. V tomto tutoriálu budu používat virtuální počítač ScotchBox Vagrant vybavený některými předinstalovanými nástroji pro nastartování vaší instalace WordPress.
Pokud již máte nainstalovaný WordPress nebo byste raději použili jinou metodu, můžete tento kousek přeskočit. Pokud potřebujete trochu pomoci s nastavením, ale nechcete jít cestou tuláků popsanou níže, zkuste googlovat „nainstalujte WordPress lokálně“ a vyhledejte aktuální tutoriál.
Začneme tím, že se ujistíme, že v našem systému jsou nainstalovány Git, Vagrant a Virtual Box. Poté můžeme naklonovat úložiště GitHub pomocí předem vyplněného souboru Vagrantfile ScotchBox.
git clone https://github.com/scotch-io/scotch-box sitepoint-wp-polymer
Nyní jsme připraveni spustit vagrant up
. Po nabootování našeho počítače musíme odstranit výchozí /public/index.php
statický soubor a nainstalujte WordPress.
cd sitepoint-wp-polymer/public
rm index.php
git clone https://github.com/WordPress/WordPress.git .
Nyní musíme vytvořit duplikát wp-config-sample.php
soubor. Pojmenujte jej wp-config.php
.
cp wp-config-sample.php wp-config.php
a upravte následující hodnoty:
// wp-config.php
// ...
define('DB_NAME', 'scotchbox');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
// ...
Nyní jste připraveni spustit prohlížeč a navštívit http://192.168.33.10. Budete vyzváni k zadání přihlašovacích údajů k účtu správce a názvu webu. Neváhejte a vyplňte je, jak uznáte za vhodné.
Přidání základního motivu SitePoint
Takže máme WordPress nastavený, teď potřebujeme téma. Po vybalení to bude téma Twenty Seventeen, ale toto je docela obecné a obsahuje mnohem víc, než normálně potřebujete. Dobrou alternativou je použití základního motivu SitePoint WordPress.
Toto téma bylo vytvořeno jako odpověď na otázku „Jak by vypadalo dokonalé základní téma WordPress?“. Mezi jeho vlastnosti patří:
- Žádný tuk. Žádný cruft. Rychlé.
- Minimální design. Vaším úkolem je udělat to hezké.
- Žádné „roztomilé“ funkce, které ve skutečnosti nikdy nepoužíváte.
- SEO přátelské k jádru.
- Super optimalizace pro mobily.
- 100% Open Source a zdarma k použití.
Základní téma SitePoint WordPress je skvělým výchozím bodem pro nové projekty. Je vhodný pro mobilní zařízení, snadno se používá a je 100% zdarma. Chcete-li pokračovat se zbytkem tohoto tutoriálu, přejděte na domovskou stránku tématu a stáhněte si jej.
A když už tam budete, možná byste se také rádi podívali na sadu placených témat, která SitePoint nabízí. Všechny jsou postaveny na základním tématu a zahrnují téma elektronického obchodu, téma restaurace, téma portfolia, obchodní téma a téma konstrukce.
Po stažení základního motivu SitePoint WordPress jej rozbalte a zkopírujte/vložte do wp-content/themes
složku. Poté vytvořte novou složku s názvem sitepoint-base-child
, v wp-content/themes
. V tomto adresáři vytvořte style.css
soubor a functions.php
soubor.
cd wp-content/themes/
mkdir sitepoint-base-child
cd sitepoint-base-child
touch functions.php style.css
Otevřete style.css
a zkopírujte do něj toto:
/*
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
*/
A do 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' );
}
Tím se zařadí základní CSS z nadřazeného motivu.
Právě jsme vytvořili podřízené téma, jehož úlohou je implementovat funkce nad základní motiv bez nutnosti upravovat základní soubory. Všechna přizpůsobení jdou do tohoto podřízeného motivu.
Posledním krokem je přejít na hlavní panel správce a poté na Vzhled> Motivy z hlavní postranní nabídky a klikněte na Aktivovat pod tématem Sitepoint Base Child.
Zahrnutí polymeru do WordPress
Nyní je hotovo, musíme nainstalovat Polymer s žaluzií. Ujistěte se, že jste v public/wp-content/themes/sitepoint-base-child
složku a poté spusťte:
bower init
Na každou otázku můžete odpovědět výchozí odpovědí. Dále musíme nainstalovat závislosti:
bower install --save Polymer/polymer#^2.0.0 PolymerElements/paper-input#2.0-preview
Tím se nainstaluje Polymer a komponenta pro vstup papíru, takže můžeme mít vstupní komponentu navrženou z efektního materiálu hned po vybalení. Je důležité použít #2.0-preview
tag pro papírový vstup a později také pro prvek Google Map, protože jinak nebude fungovat s nejnovější verzí Polymer (verze 2.0).
Abychom mohli používat Polymer, musíme jej zahrnout pomocí importu HTML a také zahrneme polyfill pro webové komponenty, abychom podporovali starší prohlížeče.
Přejděte na functions.php
soubor v podřízeném motivu a přidejte enqueue
na stávající enqueue
funkce.
<?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 nemá funkci zařazování do fronty pro zařazování importů HTML, ale můžeme se připojit k háku wp_head, který vystupuje do prvku
stránky.<?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
}
To je vše, co jsme potřebovali, abychom mohli začít používat prvky Polymer ve WordPressu. Nyní vytvoříme widget WordPress, abychom jej mohli vyzkoušet.
Registrace widgetu
Abychom vytvořili nový widget, vytvoříme novou podřízenou třídu ze třídy WP_Widget a poté ji zaregistrujeme pomocí háčku widgets_init.
Vytvořte novou složku ve svém podřízeném motivu, pojmenujte ji lib
a přidejte do něj soubor s názvem sitepoint-map-widget.php
.
mkdir lib
cd lib
touch sitepoint-map-widget.php
Do tohoto souboru zkopírujte následující:
<?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>';
}
}
Vše, co jsme zde udělali, je vytvoření nové podřízené třídy WP_Widet
a zavolal nadřazený konstruktor, aby dal widgetu vlastní název. Navíc widget
funkce je ta, která dělá skutečný výstup. Prozatím jednoduše vypíšeme prvek
V neposlední řadě musíme zahrnout tento nový soubor PHP na začátek našeho functions.php
soubor:
<?php
// functions.php
require_once( 'lib/sitepoint-map-widget.php' );
// ...
a poté zaregistrujte widget na konci souboru:
<?php
// functions.php
// ...
add_action( 'widgets_init', 'sp_register_widgets' );
function sp_register_widgets() {
register_widget( 'SitepointMapWidget' );
}
Nyní můžeme přejít do administračního panelu WordPress. Z hlavní nabídky přejděte do Vzhled> Widgety a tam byste měli vidět widget s názvem Google Paper Input na levé straně.
Přetáhněte jej na Hlavní postranní panel sekce vpravo, nad ostatními výchozími widgety z motivu SitePoint Base.
Nyní můžete navštívit domovskou stránku a na pravé straně přímo nad vyhledávacím polem uvidíte materiálový design se štítkem.
A tím jsme uzavřeli Polymer's Hello, World! příklad. Už jsme probrali spoustu věcí – instalaci Polymeru, jeho integraci s WordPress a zahrnutí ukázkového widgetu, to vše v několika řádcích kódu – ale v další části to rozvedeme dále a implementujeme naši komponentu Google Map.
Představujeme knihovnu webových komponent
Nyní využijeme kolekci předdefinovaných webových komponent dostupných na WebComponents.org. Hledání „Google Map“ nás zavede k prvku, který potřebujeme. Když se podíváme na poslední část adresy URL této stránky, můžeme zjistit název balíčku v bower.
Ujistěte se, že jste v sitepoint-base-child
adresář a spusťte následující příkaz:
bower install --save GoogleWebComponents/google-map#2.0-preview
Nyní vytvořte novou složku ve vašem sitepoint-base-child
adresář a pojmenujte jej webcomponents
. Zde budeme uchovávat všechny naše věci související s polymery.
mkdir webcomponents
Vytvoření nové polymerní komponenty
Vytvořte nový soubor v webcomponents
složku a pojmenujte ji sitepoint-map.html
.
cd webcomponents
touch sitepoint-map.html
Každá komponenta Polymeru je uspořádána do samostatných souborů HTML, které představují novou vlastní značku HTML. Tento soubor HTML se skládá ze tří významných částí:
1. Import závislostí
// 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">
Zde máme prvek Mapy Google, který jsme před chvílí nainstalovali, a také paper-input
prvek z našeho Hello, World! příklad.
2. Šablona
// 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>
ID prvku
ID prvku nám umožňuje snadný přístup k němu ze skriptu (viz další část) pomocí this.$.id
syntax. V našem případě použijeme this.$.coords
odkazovat na vstupní prvek.
Další atributy na značce google-map-mouseover
který se spustí, když uživatel najede myší na náš widget, a google-map-mouseout
který se spustí, když myš opustí mapu. To zde neslouží příliš praktickému účelu, spíše ukazuje, jak se vážeme na události spouštěné z komponenty. Vše, co musíme udělat, je přidat on-event-name
klíčové slovo a předáme název funkce z naší komponenty, kterou chceme spouštět. Toto je doporučený osvědčený postup, protože odstraňujeme potřebu přidávat ID k prvku výhradně za účelem cílení na přidání posluchače událostí. Zde si můžete prohlédnout úplný seznam dostupných metod, událostí a vlastností.
Předáme také fit-to-marker
atribut, který říká, že mapa má změnit velikost a znovu vycentrovat, aby se zobrazily všechny značky uvnitř mapy.
Také si všimnete, že specifikujeme client-id
atribut. Budete muset vyplnit své vlastní ID klienta. Chcete-li jeden z nich získat, postupujte podle oficiálních pokynů společnosti Google. Když navštívíte tento odkaz, začněte kliknutím na ZÍSKAT KLÍČ tlačítko.
- Skript
// 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>
Nezbytným minimem pro vytvoření prvku je pouze tato část:
class SitepointMap extends Polymer.Element {
static get is() { return 'sitepoint-map'; }
}
window.customElements.define(SitepointMap.is, SitepointMap);
Kde název třídy by měl být stejný jako ID prvku is
funkce.
Dále je zde objekt vlastností, což je vyhrazený název funkce pro registraci jakýchkoli atributů na prvku. Zde je důležité poznamenat, že všechny atributy skládající se z více než jednoho slova jsou přerušované, například takto:
<sitepoint-map client-id="..."></sitepoint-map>
Bude odkazováno jako clientId
, tj. velbloudí pouzdro uvnitř součásti.
Kdybychom použili velbloudí pouzdro, jako je toto:
<sitepoint-map clientId="..."></sitepoint-map>
Pak se uvnitř komponenty atribut zploští na všechna malá písmena, takže odkaz bude clientid
místo toho.
Po vlastnostech máme dvě vlastní metody, které se používají jako zpětná volání pro mousemove
a mouseout
události, resp. trackCoords
metoda jednoduše vezme zeměpisnou délku a šířku pozice myši na mapě a zobrazí ji ve vstupu.
Nyní, když máme na svém místě webovou komponentu, zbývá udělat několik věcí.
Importovat komponentu
Nejprve vytvořte index.html
soubor uvnitř webcomponents
složku. Toto bude použito k importu všech našich vlastních komponent. Tento soubor zařadíme do fronty jednou, takže se nemusíme starat o zařazení importu HTML do fronty pokaždé, když přidáme novou komponentu. Místo toho jej můžeme importovat do index.html
soubor, což je pohodlnější syntaxe než jeho opakování pomocí PHP na wp_head
.
Poté toto vložte do nově vytvořeného souboru index.html:
// webcomponents/index.html
<link rel="import" href="sitepoint-map.html">
Vraťte se do functions.php
soubor, kam zařadíme papírové tlačítko a polymerní HTML importy v hlavičce. Již nepotřebujeme import papírového tlačítka, takže jej odstraňte a poté přidejte index.html
z webcomponents
místo toho adresář:
<?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
}
Od této chvíle můžete do index.html
přidávat všechny své vlastní komponenty . Např. kdybychom měli také vlastní komponentu Kalendář Google nebo jen museli použít komponentu z krabice, jako je paper-progress, udělali bychom to takto
// 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">
Toto nekopírujte, je to pouze příklad.
Vytiskněte značku HTML
Nyní potřebujeme na výstup HTML tagu
<?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>';
}
}
Nezapomeňte také definovat svůj vlastní GOOGLE_MAP_API_KEY
konstantní. Nejlepší místo pro to je v horní části functions.php
soubor v našem podřízeném motivu.
<?php
// functions.php
require_once( 'lib/sitepoint-map-widget.php' );
define('GOOGLE_MAP_API_KEY', '<your-key-here>');
A voila! Nyní máme plně funkční widget Google Map pro WordPress. Obvykle pluginy, které nabízejí tento druh funkčnosti, mohou obsahovat několik stovek řádků PHP kódu. A zde máme velmi pěkné nastavení v našem webcomponents
složka, kde je vše centralizované a snadno rozšiřitelné a přizpůsobitelné.
Závěr
A tím se dostáváme na konec tutoriálu. Nyní byste měli vědět, jak integrovat Polymer do vaší instalace WordPress a jak přidat vlastní komponentu. Pokud si přejete dále zdokonalit své dovednosti, dalším krokem pro naši komponentu Mapy Google by bylo namapování atributů widgetu WordPress na atributy komponenty. Tímto způsobem byste byli schopni předávat argumenty, jako je poloha značky, ID klienta atd. z Vzhled> Widgety konfigurační obrazovka. Proč to nezkusit implementovat sami a dejte mi vědět, jak jste na tom.
A když už jste u toho, věnujte prosím nějaký čas tomu, abyste se ponořili do krásného světa webových komponent, procházeli knihovnu a našli něco zábavného, co by bylo možné integrovat do WordPressu. Podělte se s námi o své objevy v komentářích níže. Budu ve střehu!
Tento článek byl recenzován Simonem Codringtonem. Děkujeme všem recenzentům SitePointu za to, že obsah SitePoint vytvořili co nejlepší![/special]