Verwenden von Polymer in WordPress: Erstellen Sie eine benutzerdefinierte Google Maps -Komponente

Dieses Tutorial zeigt, wie man Polymer- und Webkomponenten problemlos in WordPress integriert und einer Seitenleiste speziell eine Google Maps -Komponente hinzufügt. Es betont die Vorteile des Polymers, selbst mit zunehmender Unterstützung der nativen Webkomponenten, der Geschwindigkeit, den Merkmalen (Datenbindung, berechneten Eigenschaften) und CLI -Tools.

Das Tutorial beginnt mit der Einrichtung einer WordPress -Umgebung mithilfe von Scotchbox Vagrant VM (oder Alternativen für diejenigen mit vorhandenen Installationen). Anschließend empfiehlt es sich

Polymer wird zusammen mit den erforderlichen Komponenten (wie

und später paper-input) über Bower installiert. Der Prozess beinhaltet das Hinzufügen von Skripten und HTML -Importen in die google-map -Fatei des untergeordneten Themas, um das Polymer und seine Polyfills für eine breitere Browserkompatibilität korrekt zu ermitteln. functions.php

Ein benutzerdefiniertes WordPress -Widget wird erstellt, um die Polymerkomponenten zu präsentieren. Die Tutorial -Details erstellen eine neue Widget -Klasse, die

erweitert und registriert. Anfangs wird ein einfaches WP_Widget Element zur Demonstration verwendet. paper-input Als nächstes führt das Tutorial die von webcomponents.org erhaltene

Web -Komponente vor. Es führt die Erstellung einer neuen Polymerkomponente (

) mit Abschnitten für Abhängigkeitsinporte, einer Vorlage, die die Struktur der Komponente definiert (einschließlich des google-map -Elements und a sitepoint-map.html zum Anzeigen von Koordinaten) und ein Skriptabschnitt, das die Komponente definiert Verhalten (Umgang mit Mausereignissen auf der Karte). Die Bedeutung des Erhaltens eines Google Maps -API -Schlüssels und der Verwendung in der Komponente wird betont. google-map paper-input In dem Tutorial wird erläutert, wie mehrere benutzerdefinierte Komponenten verwaltet werden, indem eine zentrale

Datei erstellt wird, um sie alle zu importieren, wodurch der Enqueue -Prozess vereinfacht wird. Die

-Komponente wird dann in das WordPress -Widget integriert und ersetzt die index.html durch die Karte. Das Endergebnis ist ein funktionales Google Maps -Widget in der WordPress -Seitenleiste. sitepoint-map paper-input Die Schlussfolgerung ermutigt die Leser, weiter zu erforschen, und schlägt vor, dass das Widget so erweitert wird, dass Konfigurationsparameter aus dem WordPress -Administratorfeld akzeptiert werden. Es fördert auch die Erkundung der Webcomponents.org -Bibliothek für andere Komponenten zu integrieren.

Der FAQ -Abschnitt befasst sich mit häufigen Fragen zur Integration von Polymer und WordPress, die Abdeckung der Installation, Kompatibilität, Vorteile, Nachteile, Browserunterstützung, Komponentenerstellung und dem aktuellen Status der Wartung des Polymers.

(Hinweis: Die Bilder aus der ursprünglichen Eingabe sind wie angefordert enthalten. Ihr Alt -Text wurde für Klarheit leicht modifiziert.)

Das obige ist der detaillierte Inhalt vonVerwenden von Polymer in WordPress: Erstellen Sie eine benutzerdefinierte Google Maps -Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!