Utilisation de Polymer dans WordPress: Créez un composant Google Maps personnalisé

Ce tutoriel montre comment intégrer facilement les composants polymères et Web dans WordPress, ajoutant spécifiquement un composant Google Maps à une barre latérale. Il souligne les avantages du polymère, même avec l'augmentation de la prise en charge des composants Web natifs, mettant en évidence sa vitesse, ses fonctionnalités (liaison des données, propriétés calculées) et les outils CLI.

Le tutoriel commence par configurer un environnement WordPress à l'aide de SCOTchBox Vagrant VM (ou suggérant des alternatives pour ceux qui ont des installations existantes). Il recommande ensuite d'utiliser le thème de base SitePoint pour sa nature légère et conviviale, guidant le lecteur en créant un thème enfant pour la personnalisation.

Le polymère

est installé via Bower, ainsi que les composants nécessaires (comme paper-input et plus tard, google-map). Le processus comprend l'ajout de scripts et d'importations HTML dans le fichier functions.php du thème de l'enfant pour enterrer correctement le polymère et ses polyfills pour une compatibilité plus large du navigateur.

Un widget WordPress personnalisé est créé pour présenter les composants polymères. Le didacticiel détaille la création d'une nouvelle classe de widget étendant WP_Widget et l'enregistrement. Initialement, un élément simple paper-input est utilisé pour la démonstration.

Ensuite, le tutoriel présente le composant Web google-map, obtenu à partir de webcomponents.org. Il guide la création d'un nouveau composant polymère (sitepoint-map.html) avec des sections pour les importations de dépendances, un modèle définissant la structure du composant (y compris l'élément google-map et A paper-input pour afficher les coordonnées), et une section de script définissant le composant du composant comportement (manipulation des événements de souris sur la carte). L'importance d'obtenir une clé API Google Maps et de l'utiliser dans le composant est soulignée.

Le didacticiel explique comment gérer plusieurs composants personnalisés en créant un fichier central index.html pour les importer tous, simplifiant le processus d'agitation. Le composant sitepoint-map est ensuite intégré dans le widget WordPress, remplaçant le paper-input par la carte. Le résultat final est un widget Google Maps fonctionnel dans la barre latérale WordPress.

La conclusion encourage les lecteurs à explorer davantage, ce qui suggère d'étendre le widget pour accepter les paramètres de configuration du panneau d'administration WordPress. Il favorise également l'exploration de la bibliothèque webcomponents.org pour les autres composants à intégrer.

La section FAQ aborde les questions courantes sur l'intégration des polymères et de WordPress, couvrant l'installation, la compatibilité, les avantages, les inconvénients, la prise en charge du navigateur, la création de composants et l'état actuel de la maintenance du polymère.

(Remarque: Les images de l'entrée d'origine sont incluses comme demandé. Leur texte alt a été légèrement modifié pour plus de clarté.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!