Použití Polymeru ve WordPressu:Vytvořte si vlastní komponentu Google Maps

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 , což je prvek z kolekce paper-input-elements.

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 je skutečný název prvku – tj. název jeho značky. Nejlepší je dát mu stejný název jako název souboru. Uvnitř toho máme tag