Webcomponenten zijn een reeks standaarden voor het maken van aangepaste, herbruikbare HTML-elementen. Polymer is een open-source JavaScript-bibliotheek voor het bouwen van webapplicaties met behulp van webcomponenten. Het is gemaakt door die slimme mensen bij Google en biedt een aantal extra functies boven vanilla-webcomponenten en ondersteunt bij gebruik met een polyfill de nieuwste versie van alle belangrijke browsers.
In deze tutorial laat ik je zien hoe gemakkelijk het is om gebruik te maken van webcomponenten en Polymer in WordPress. Ik ga beginnen met u te laten zien hoe u Polymer integreert in uw WordPress-installatie, daarna ga ik demonstreren hoe u een werkende Google Maps-component aan de zijbalk van uw site kunt toevoegen. Dit kan handig zijn voor elke site (bijvoorbeeld die van een restaurant) die bezoekers een routebeschrijving naar hun pand moet geven.
Na het lezen kunt u deze techniek op uw eigen site toepassen. En u bent niet beperkt tot een Google Map-widget, u kunt kiezen uit het brede scala aan kant-en-klare componenten, of zelfs uw eigen componenten schrijven.
Zoals altijd is alle code voor deze tutorial beschikbaar in een GitHub-repository.
Waarom polymeer?
Omdat native ondersteuning voor webcomponenten steeds beter wordt, kan het je vergeven worden te vragen of Polymer nog steeds relevant is. Het korte antwoord op die vraag is Ja!
Polymer maakt gebruik van een verscheidenheid aan polyfills van webcomponenten - die hopelijk op een dag vol zullen zijn - maar het is veel meer dan dat. Polymer is een wrapper rond de webcomponenten-API waarmee we nieuwe componenten met een veel hogere snelheid kunnen ontwikkelen en implementeren dan we anders zouden kunnen. Het biedt verschillende extra functies via vanilla-webcomponenten, zoals eenrichtings- en tweerichtingsgegevensbinding, berekende eigenschappen en bewegingsgebeurtenissen. Het wordt geleverd met een zeer gepolijste CLI die kan worden gebruikt voor taken als het opzetten van een project, het uitvoeren van tests of het uitvoeren van een lokale server, en het kan gebruik maken van een breed scala aan vooraf gebouwde elementen, zoals het geliefde materiaal ontwerpelementen bibliotheek.
Kortom, Polymer is nog steeds erg relevant. Het is een krachtig raamwerk dat bij de productie wordt gebruikt door grote bedrijven zoals USA Today, Coca Cola en Electronic Arts.
WordPress instellen
Voordat we beginnen, moeten we onze omgeving instellen waarop WordPress wordt uitgevoerd. Voor deze tutorial gebruik ik de ScotchBox Vagrant VM, uitgerust met een aantal vooraf geïnstalleerde tools om je WordPress-installatie een kickstart te geven.
Als je WordPress al hebt geïnstalleerd, of liever een andere methode gebruikt, kun je dit stukje overslaan. Als je een beetje hulp nodig hebt bij de installatie, maar niet de zwervende route wilt volgen die hieronder wordt beschreven, probeer dan te Googlen op "WordPress lokaal installeren" en zoek naar een up-to-date zelfstudie.
We beginnen met ervoor te zorgen dat Git, Vagrant en Virtual Box op ons systeem zijn geïnstalleerd. We kunnen dan de GitHub-repo klonen met ScotchBox's vooraf ingevulde Vagrantfile.
git clone https://github.com/scotch-io/scotch-box sitepoint-wp-polymer
Nu zijn we klaar om vagrant up uit te voeren . Nadat onze machine is opgestart, moeten we de standaard /public/index.php . verwijderen statisch bestand en installeer WordPress.
cd sitepoint-wp-polymer/public
rm index.php
git clone https://github.com/WordPress/WordPress.git .
Nu moeten we een duplicaat maken van de wp-config-sample.php het dossier. Noem het wp-config.php .
cp wp-config-sample.php wp-config.php
en bewerk de volgende waarden:
// wp-config.php
// ...
define('DB_NAME', 'scotchbox');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
// ...
Nu bent u klaar om uw browser op te starten en naar http://192.168.33.10 te gaan. U wordt gevraagd om de inloggegevens van het beheerdersaccount en de sitetitel in te voeren. Voel je vrij om deze naar eigen inzicht in te vullen.
Het SitePoint-basisthema toevoegen
Dus we hebben WordPress ingesteld, nu hebben we een thema nodig. Out of the box zal dit het Twenty Seventeen-thema zijn, maar dit is vrij algemeen en bevat veel meer dan je normaal gesproken nodig hebt. Een goed alternatief hier is om het SitePoint WordPress-basisthema te gebruiken.
Dit thema is gemaakt als antwoord op de vraag "Hoe zou het perfecte WordPress-basisthema eruit zien?". De functies zijn onder meer:
- Geen vet. Geen rommel. Snel.
- Minimaal ontwerp. Het is jouw taak om het mooi te maken.
- Geen 'schattige' functies die je eigenlijk nooit gebruikt.
- SEO-vriendelijk tot in de kern.
- Super mobielvriendelijk.
- 100% open source en gratis te gebruiken.
Het SitePoint WordPress-basisthema is een geweldig startpunt voor nieuwe projecten. Het is mobielvriendelijk, gebruiksvriendelijk en 100% gratis. Om de rest van deze tutorial te volgen, ga je naar de startpagina van het thema en download je het nu.
En terwijl je daar bent, wil je misschien ook de reeks betaalde thema's bekijken die SitePoint biedt. Deze zijn allemaal gebaseerd op het basisthema en omvatten een e-commercethema, restaurantthema, portfoliothema, zakelijk thema en constructiethema.
Na het downloaden van het SitePoint WordPress-basisthema, pak het uit en kopieer/plak het naar dewp-content/themes map. Maak vervolgens een nieuwe map met de naam sitepoint-base-child , in wp-content/themes . Maak in die map een style.css . aan bestand en een functions.php het dossier.
cd wp-content/themes/
mkdir sitepoint-base-child
cd sitepoint-base-child
touch functions.php style.css
Open style.css en kopieer dit erin:
/*
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
*/
En in 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' );
}
Hierdoor wordt de basis-CSS van het bovenliggende thema in de wachtrij geplaatst.
We hebben zojuist een child-thema gemaakt, waarvan de rol het is om functionaliteiten bovenop het basisthema te implementeren zonder de basisbestanden te hoeven wijzigen. Alle aanpassingen passen in dit child-thema.
Een laatste stap is om naar het beheerdersdashboard te gaan en vervolgens naar Uiterlijk> Thema's in het hoofdmenu aan de zijkant en klik op Activeren onder, Sitepoint Base Child-thema.
Inclusief polymeer in WordPress
Nu dat klaar is, moeten we Polymer met prieel installeren. Zorg ervoor dat u zich in de public/wp-content/themes/sitepoint-base-child . bevindt map, en voer dan uit:
bower init
U kunt op elke vraag antwoorden met het standaardantwoord. Vervolgens moeten we de afhankelijkheden installeren:
bower install --save Polymer/polymer#^2.0.0 PolymerElements/paper-input#2.0-preview
Hiermee worden Polymer en de papierinvoercomponent geïnstalleerd, zodat we direct een invoercomponent kunnen hebben die is ontworpen voor luxe materiaal. Het is belangrijk om de #2.0-preview . te gebruiken tag voor de papierinvoer en later ook voor het Google Map-element, omdat het anders niet werkt met de nieuwste versie van Polymer (versie 2.0).
Om Polymer te kunnen gebruiken, moeten we het opnemen met behulp van een HTML-import, en we zullen ook de polyfill voor webcomponenten opnemen, om oudere browsers te ondersteunen.
Ga naar de functions.php bestand in het child-thema en voeg een enqueue naar de bestaande enqueue functie.
<?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 heeft geen wachtrijfunctie voor het in de wachtrij plaatsen van HTML-import, maar we kunnen inhaken op de wp_head-hook die wordt uitgevoerd in het
-element van de pagina.<?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
}
Dat is alles wat we nodig hadden om Polymer-elementen in WordPress te gaan gebruiken. Laten we nu een WordPress-widget maken, zodat we deze kunnen uitproberen voor een testrit.
Een widget registreren
Om een nieuwe widget te maken, zullen we een nieuwe onderliggende klasse van de WP_Widget-klasse maken en deze vervolgens registreren met de widgets_init-hook.
Maak een nieuwe map in je child-thema, noem deze lib , en voeg het een bestand toe met de naam sitepoint-map-widget.php .
mkdir lib
cd lib
touch sitepoint-map-widget.php
Kopieer het volgende naar dat bestand:
<?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>';
}
}
Het enige dat we hier hebben gedaan, is een nieuwe onderliggende klasse van WP_Widet . maken en riep de bovenliggende constructor om de widget een aangepaste naam te geven. Bovendien is de widget functie is degene die de daadwerkelijke uitvoer doet. Voor nu zullen we gewoon een
Last but not least moeten we dit nieuwe PHP-bestand bovenaan onze functions.php . opnemen bestand:
<?php
// functions.php
require_once( 'lib/sitepoint-map-widget.php' );
// ...
en registreer vervolgens een widget aan het einde van het bestand:
<?php
// functions.php
// ...
add_action( 'widgets_init', 'sp_register_widgets' );
function sp_register_widgets() {
register_widget( 'SitepointMapWidget' );
}
Nu kunnen we naar het beheerdersdashboard van WordPress gaan. Ga vanuit het hoofdmenu naar Vormgeving> Widgets , en daar zou je een widget moeten zien met de naam Google Paper Input aan de linkerkant.
Sleep het naar de Hoofdzijbalk sectie aan de rechterkant, boven de rest van de standaardwidgets van het SitePoint Base-thema.
Nu kunt u de startpagina bezoeken en aan de rechterkant, rechts boven het zoekvak, ziet u een materiaalontwerpinvoer met een label.
En zo hebben we Polymer's Hello, World! . afgesloten voorbeeld. We hebben al veel behandeld:Polymer installeren, het integreren met WordPress en een voorbeeldwidget toevoegen, allemaal in slechts een paar regels code, maar in de volgende sectie gaan we verder en implementeren we onze Google Map-component.
Introductie van de Web Components-bibliotheek
Nu zullen we gebruik maken van de verzameling kant-en-klare webcomponenten, beschikbaar op WebComponents.org. Zoeken naar "Google Map" leidt ons naar het element dat we nodig hebben. Door naar het laatste deel van de URL van die pagina te kijken, kunnen we de naam van het pakket in prieel achterhalen.
Zorg ervoor dat u zich in de sitepoint-base-child . bevindt directory en voer het volgende commando uit:
bower install --save GoogleWebComponents/google-map#2.0-preview
Maak nu een nieuwe map in uw sitepoint-base-child map en noem deze webcomponents . Hier bewaren we al onze polymeergerelateerde spullen.
mkdir webcomponents
Een nieuwe polymeercomponent maken
Maak een nieuw bestand in de webcomponents map en noem deze sitepoint-map.html .
cd webcomponents
touch sitepoint-map.html
Elke Polymer-component is georganiseerd in afzonderlijke HTML-bestanden, die een nieuwe aangepaste HTML-tag vertegenwoordigen. Dit HTML-bestand bestaat uit drie opvallende secties:
1. De import van afhankelijkheden
// 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">
Hier hebben we het Google Maps-element dat we zojuist hebben geïnstalleerd, evenals de paper-input element uit onze Hello, World! voorbeeld.
2. De sjabloon
// 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>
De ID van het
De ID van het element stelt ons in staat om er gemakkelijk toegang toe te krijgen vanuit het script (zie volgende sectie) met behulp van een this.$.id syntaxis. In ons geval gebruiken we this.$.coords om naar het invoerelement te verwijzen.
Dan zijn de volgende kenmerken op de google-map-mouseover die wordt geactiveerd wanneer een gebruiker met de muis over onze widget gaat, en google-map-mouseout die wordt geactiveerd wanneer de muis de kaart verlaat. Dit heeft hier niet veel praktisch nut, maar laat eerder zien hoe we ons binden aan gebeurtenissen die vanuit de component worden geactiveerd. Het enige wat we moeten doen is de on-event-name . toevoegen trefwoord, en geef de naam door van de functie van onze component die we willen activeren. Dit is een aanbevolen best practice, omdat we de noodzaak wegnemen om een ID aan het element toe te voegen, uitsluitend om het te targeten om een gebeurtenislistener toe te voegen. U kunt hier een volledige lijst met beschikbare methoden, evenementen en eigenschappen bekijken.
We geven ook de fit-to-marker door attribuut, dat de kaart vertelt om het formaat te wijzigen en opnieuw te centreren om alle markeringen op de kaart te tonen.
U zult ook zien dat we een client-id . specificeren attribuut. U moet dit invullen met een eigen klant-ID. Volg de officiële instructies van Google om een van deze te verkrijgen. Wanneer u die link bezoekt, begint u met het klikken op de KRIJG EEN SLEUTEL knop.
- Het script
// 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>
Het absolute minimum om een element te maken is slechts dit deel:
class SitepointMap extends Polymer.Element {
static get is() { return 'sitepoint-map'; }
}
window.customElements.define(SitepointMap.is, SitepointMap);
Waarbij de naam van de klasse hetzelfde moet zijn als de ID van het is te retourneren functie.
Vervolgens is er het eigenschappenobject, dat een gereserveerde functienaam is voor het registreren van eventuele attributen op het element. Het belangrijkste om hier op te merken is dat alle attributen die uit meer dan één woord bestaan en gestreept zijn, zoals deze:
<sitepoint-map client-id="..."></sitepoint-map>
Zal worden aangeduid als clientId , d.w.z. kameel in het onderdeel.
Hadden we een kameelkoffer gebruikt, zoals deze:
<sitepoint-map clientId="..."></sitepoint-map>
In de component wordt het attribuut vervolgens afgevlakt tot kleine letters, dus de referentie zou clientid zijn in plaats daarvan.
Na de eigenschappen hebben we twee aangepaste methoden, die worden gebruikt als callbacks voor de mousemove en mouseout evenementen resp. De trackCoords methode neemt gewoon de lengte- en breedtegraad van de muis op de kaart en geeft deze weer in de invoer.
Nu we een webcomponent hebben, moeten er nog een paar dingen gebeuren.
Importeer de
-component
Laten we eerst een index.html . maken bestand in de webcomponents map. Dit wordt gebruikt om al onze aangepaste componenten te importeren. We zullen dit bestand één keer in de wachtrij plaatsen, zodat we ons geen zorgen hoeven te maken over het in de wachtrij plaatsen van een HTML-import elke keer dat we een nieuwe component toevoegen. In plaats daarvan kunnen we het gewoon importeren in de index.html bestand, wat een handiger syntaxis is dan het te herhalen met PHP naar wp_head .
Plak dit dan in het nieuw aangemaakte index.html-bestand:
// webcomponents/index.html
<link rel="import" href="sitepoint-map.html">
Ga terug naar de functions.php bestand, waar we de papieren knop en polymeer HTML-importen in het hoofd opnemen. We hebben de import van de papieren knop niet meer nodig, dus verwijder die en voeg vervolgens index.html toe van de webcomponents directory in plaats daarvan:
<?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
}
Vanaf nu kunt u al uw gebruikerscomponenten toevoegen aan index.html . bijv. als we ook een aangepaste Google Agenda-component hadden, of gewoon een kant-en-klare component zouden moeten gebruiken, zoals paper-progress, zouden we het zo doen
// 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">
Kopieer dit niet, het is slechts een voorbeeld.
Voer een
HTML-tag uit
Nu moeten we een
<?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>';
}
}
Vergeet ook niet uw eigen GOOGLE_MAP_API_KEY te definiëren constante. De beste plaats hiervoor is bovenaan de functions.php bestand in ons child-thema.
<?php
// functions.php
require_once( 'lib/sitepoint-map-widget.php' );
define('GOOGLE_MAP_API_KEY', '<your-key-here>');
En voila! We hebben nu een volledig functionele Google Map-widget voor WordPress. Meestal kunnen plug-ins die dit soort functionaliteit bieden enkele honderden regels PHP-code bevatten. En hier hebben we een hele mooie setup in onze webcomponents map, waar alles is gecentraliseerd en gemakkelijk uitbreidbaar en aanpasbaar is.
Conclusie
En daarmee komen we aan het einde van de tutorial. Inmiddels zou u moeten weten hoe u Polymer kunt integreren in uw WordPress-installatie en hoe u een aangepast onderdeel kunt toevoegen. Als u uw vaardigheden verder wilt aanscherpen, is de volgende stap voor onze Google Maps-component om de WordPress-widgetattributen toe te wijzen aan de attributen van de component. Op deze manier zou u in staat zijn om argumenten zoals markeringspositie, klant-ID enz. door te geven vanuit de Uiterlijk> Widgets configuratiescherm. Probeer het eens zelf en laat me weten hoe het je vergaat.
En als u toch bezig bent, neem dan even de tijd om in de prachtige wereld van webcomponenten te duiken, door de bibliotheek te bladeren en iets leuks te vinden om te integreren in WordPress. Deel uw ontdekkingen met ons in de onderstaande opmerkingen. Ik zal op mijn hoede zijn!
Dit artikel is collegiaal beoordeeld door Simon Codrington. Dank aan alle peer reviewers van SitePoint voor het zo goed mogelijk maken van SitePoint-inhoud![/special]