WordPressでポリマーを使用する：カスタムGoogleマップコンポーネントを構築する

このチュートリアルでは、ポリマーとWebコンポーネントをWordPressに簡単に統合する方法を示しています。特に、Googleマップコンポーネントをサイドバーに追加します。 ネイティブのWebコンポーネントのサポートが増加している場合でも、ポリマーの利点を強調し、その速度、機能（データバインディング、計算プロパティ）、およびCLIツールを強調しています。

チュートリアルは、Scotchbox Vagrant VMを使用してWordPress環境をセットアップすることから始まります（または、既存のインストールを持つ人のための代替案を提案します）。 その後、軽量でSEOに優しい性質にSitePoint Baseテーマを使用して、カスタマイズのための子供のテーマを作成して読者を導くことをお勧めします。

ポリマーは、必要なコンポーネントとともにBowerを介して取り付けられています（

などのような

など）。 このプロセスには、スクリプトとhtmlインポートを子テーマの

ファイルに追加することが含まれます。 paper-inputポリマーコンポーネントを紹介するカスタムWordPressウィジェットが作成されます。 チュートリアルの詳細新しいウィジェットクラスを作成してgoogle-mapを拡張し、登録します。 最初に、デモンストレーションには単純な要素が使用されます functions.php次に、チュートリアルでは、webcomponents.orgから取得した

Webコンポーネントを紹介します。 依存関係のインポート用セクション、コンポーネントの構造（

要素を含むWP_Widgetを含む、座標を表示するためのApaper-inputを含む）を使用して、新しいポリマーコンポーネント（

）の作成を導き、コンポーネントを定義するスクリプトセクションを導きます。動作（マップ上のマウスイベントの処理）。 GoogleマップAPIキーを取得してコンポーネント内で使用することの重要性は強調されています。

チュートリアルでは、Central ファイルを作成してすべてをインポートし、Enqueueプロセスを簡素化することにより、複数のカスタムコンポーネントを管理する方法について説明します。 次に、google-mapコンポーネントがWordPressウィジェットに統合され、をマップに置き換えます。 最終結果は、WordPressサイドバー内の機能的なGoogleマップウィジェットです。 sitepoint-map.html結論は、読者がさらに探求することを奨励し、WordPress管理パネルから構成パラメーターを受け入れるためにウィジェットを拡張することを提案します。 また、他のコンポーネントが統合できるように、webcomponents.orgライブラリの探索を促進します。 google-mapFAQセクションでは、ポリマーとWordPressの統合に関する一般的な質問、インストール、互換性、利点、欠点、ブラウザのサポート、コンポーネントの作成、ポリマーのメンテナンスの現在のステータスをカバーしています。

（注：元の入力からの画像は要求されているように含まれています。それらのALTテキストは明確にわずかに変更されています。

以上がWordPressでポリマーを使用する：カスタムGoogleマップコンポーネントを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。