私たちのWordPressシリーズのパート4では、どのようにマップに直面しているユーザーを作成する方法を学び、簡単にマップを挿入するワードプレスのショートコード.

WordPressプラグインとTomtom -第4部

記事のこのシリーズでは、我々は簡単に設定するWordPressのプラグインを介してビジネスのウェブサイト上の店舗の場所の地図を表示するTomTomマップ表示APIと検索APIを使用している.
前の記事では、プラグインのWordPress管理パネルインターフェイスの構築を終えました.この時点でマップは、管理パネルに表示され、我々は店のデータベースにストアの場所を追加することができます、我々は場所を検索APIを使用して、店舗の座標を取得することができますし、我々は管理者の地図上のストアの場所を表示することができます.
この記事では

WordPressプラグインの公開側を開発してください:ウェブサイト自体に現れる地図.

サイト管理者に任意のWebページにプラグインのマップを埋め込むことができるWordPressのショートコードを作成します.

いくつかのHTMLとJavaScriptと一緒にショートコードを使用してデモを使用して、両方の古典的なWordPressエディタと新しいグーテンベルグエディターでページ上のマップを埋め込む.

ワードプレスのショートコード

セキュリティ対策として、WordPressはHTMLとスクリプトの自動化の種類を制限し、著者が直接ウェブページにコード化することができます.代わりに、WordPressはショートコードを提供します.そして、それはファイル、メディアまたはスクリプトを生成された内容を単純なタグでページに加えることができます.
ワードプレス.comは様々なpreconfigured shortcodes . たとえば、[オーディオ]ショートコードを使用すると、ショートコードのテキストを埋め込み、再生するファイルを指定するだけで、オーディオファイルプレーヤーをページに表示できます.
これらの事前設定されたショートコードに加えて、WordPressShortcode API あなたの能力を完全にカスタムのショートコードを作成することができます.私たちはショートコードAPIを使用して、任意のWebページに地図や店舗リストを埋め込むことができますカスタム[ tomtom store locator ]ショートコードを作成する予定です.TomTomストアマップCreatorプラグインがWordPressサイト用に起動されると、[ TomTom Store Locator ]ショートコードは、管理パネルを介して設定された地図とストアの場所を表示します.

カスタムマップのショートコードの作成

プラグインディレクトリでは、すべてのPHPを見つけることができます.PHP
ファイルの一番下に、WordPress ' addRange ShortCode ()関数をコールします.

add_shortcode('tomtom-store-locator', 'ttlocator_user_map');

これは「tomtomanger storetle locator」という名前のショートコードを定義します.番目のパラメータ- ttlocatorユーザーマップ- WordPressがページまたはポストで参照される新しいショートコードを見るとき、呼ばれる関数の名前です.
見ることができるように、私たちのショートコードはTttlocatorRadies UserRange map ()関数を呼び出します.この関数を見ると、次のコードが表示されます.

function ttlocator_user_map() {
   $plugin_directory = plugin_dir_url(__FILE__);
   $stylesheet = $plugin_directory . "styles/styles.css";
   $locator_js = $plugin_directory . "scripts/locator-user.js";
   $tomtom_sdk_dir = $plugin_directory . "tomtom-sdk/";
   $map_stylesheet = $tomtom_sdk_dir . "map.css";
   $tomtom_js = $tomtom_sdk_dir . "tomtom.min.js";
   $locations = ttlocator_get_locations();

   wp_enqueue_script("jquery");
   wp_enqueue_style("ttlocator-styles", $stylesheet);
   wp_enqueue_style("ttlocator-tomtom-map-styles", $map_stylesheet);
   wp_enqueue_script("ttlocator-tomtom-sdk", $tomtom_js);
   wp_enqueue_script("ttlocator-locator-page-user-script",
       $locator_js, array("jquery"), false, true);
   ?>
   <div style="width: 100%; text-align:left">
   <div id="map" style="width: 100%; height:500px"></div>
   <script>
       var tomtomSdkKey = '<?php echo esc_attr(get_option("tomtom_locator_api_key")); ?>';
       var tomtomSdkPath = '<?php echo $tomtom_sdk_dir; ?>';
       var storeLocations = <?php echo json_encode($locations); ?>;
   </script>
   <h4>Store Locations</h4>
   <?php
   ttlocator_user_store_table_html($locations);
   ?>
   </div>
<?php
}

これはおそらく、私たちがadminページにマップとストアの場所を生成するために使用したコードに非常に似ているので、身近に見えます.しかし、ユーザーのマップページは複雑である必要はありません.ですから、いくつかの変更があります.

我々のページにはタイトルがありません.なぜならそれは既に独自のタイトルを持っているWordPressページに加えられるからです.

我々はロケータのユーザーを含んでいる.ロケータの代わりにJS.js私たちのユーザーが直面しているマップはJavaScriptのほとんどを必要としないので、管理者のページは、それを含むすべての非効率的である必要があります.我々のマップにストアマーカーを追加するために使用するJavaScriptコードは、我々のプラグインの管理側で使用したコードと同じです.

新しいストアを追加するには、ストアリストテーブルとページを生成する関数を呼び出す代わりに、ttlocatorRenuのユーザコールを作成します.

TetLocatorRes UserCount StoreHuntTableEllle ()のコードを参照ください.

function ttlocator_user_store_table_html($locations) {
   ?>
   <table id="ttlocator-stores-user-table">
       <thead>
       <tr>
           <th>Name</th>
           <th>Address</th>
           <th>City</th>
           <th>State/Province</th>
           <th>Post/Zip Code</th>
       </tr>
       </thead>
       <tbody>
       <?php foreach($locations as $location): ?>
           <tr>
               <td><?php echo esc_attr($location->name); ?></td>
               <td><?php echo esc_attr($location->address); ?></td>
               <td><?php echo esc_attr($location->city); ?></td>
               <td><?php echo esc_attr($location->state); ?></td>
               <td><?php echo esc_attr($location->postcode); ?></td>
           </tr>
       <?php endforeach; ?>
       </tbody>
   </table>
   <?php
}

繰り返しますが、これは私たちが管理ページにストアのリストを生成するために使用したコードと非常によく似ています.この関数は、格納場所のリストをその唯一のパラメータとして受け取り、それらを表示するHTMLテーブルを生成します.
管理ページのストアテーブルに含まれていたCSSクラスをすべて削除したことに注意してください.管理ページで使用されたクラスのすべてがWordPress Adminスタイルの一部であり、管理ページでのみ使用可能です.ここを含めても効果はない.
しかし、テーブルにIDを与えます.これにより、プラグインのユーザーがカスタムのCSSを追加するには、彼らは自分の好きなようにストアリストテーブルのスタイルを確保するために簡単になります.デフォルトのテキストサイズを設定することは別として、我々はテーブルに自分のスタイルを適用することを避けます.WordPressテーマは通常、独自のカスタムスタイルをテーブルに適用するので、テーブルがどのようなスタイルに適用されても適応できるようにしたい.
管理者が直面しているユーザーとマップに直面している間に共通の非常に多くのコードを使用すると、なぜ我々は重複を避けるために関数に共通のコードを因子化しないのか疑問に思うかもしれません.答えは、過去のプラグイン開発経験に基づいた判断の呼び出しだった.
Adminとユーザーが直面している側が一般的に最初に多くを持っているために一般的ですが、プラグインが成長して、カスタマイズされるので、プラグインの両側は発散し始めます.その結果、一般的なコードを早期に分解する努力はしばしば無駄になります.これを防ぐために、マークアップの生成を管理者とユーザページの間で完全に分離しました.

マップのショートコードの使用

今、我々はショートコードを作成した、どのように我々は実際にそれを使用しますか?
あなたが古典的なWordPressエディタまたは新しいGutenbergエディタを使用しているかどうかに応じて答え.幸いなことに、それはどちらか簡単です.
古いエディタを使っているならば、[ tomtom store locator ]タグをあなたのページのテキストに置いてください.

Gentenbergエディタを使用している場合は、段落ブロック内にタグを配置します.

最後の結果は次のようになります.

あなたのページの正確な外観はあなたが使用しているWordPressテーマに依存します.

次の手順

我々は長い道のりを来た!当社のプラグインは現在、私たちはTomTomマップに店舗を追加し、当社のWordPressサイトのユーザーにこれらの場所を表示することができます.
このシリーズの最後の記事では、いくつかの高度なtomtom APIの機能を使用してストアロケータを改善する方法を見ていきます.
最初に、我々は彼らが店が彼らの近くにあるのを見ることができるように、我々がGeoLocationをユーザーの位置に地図を中心に使うことができるということを学びます.次に、TOMTOMルーティングAPIを使用して、ユーザーの現在位置から選択したストア位置までの方向を駆動します.プラグインを終了するには、TomTomトラフィックAPIを使用して、ユーザーが指定した時間でストアに到着したい場合にユーザーが残しておくべきかどうかを判断します.
訪問するdeveloper portal そして、我々のドキュメンテーションと例をチェックしてくださいWeb , iOS , and Android . 最後に、私たちと接続することを忘れないでください.Twitch , そして、チェックアウトblog もっとチュートリアルとdeveloper forum あなたが持っている可能性のある質問については.
ハッピーマッピング!
ほぼ30年の経験で、TOMTOMは、最も信頼できる地図、ナビゲーションソフトウェア、交通と自動車産業、企業と開発者のためのライブサービスを開発している主要な位置技術スペシャリストです.我々は、より安全で、よりきれいで、混雑のない世界の我々の展望に我々を近づける正確なテクノロジーをつくることに専念します.
この記事はもともと登場したhttps://developer.tomtom.com . 原作者はグレゴリーデJans.