저희 워드프레스 시리즈의 네 번째 부분에서 사용자를 위한 맵과 워드프레스 단축 코드를 만드는 방법을 배워서 맵을 삽입하는 것이 더욱 쉽습니다.

WordPress 플러그인 및 TomTom – 섹션 4

이 시리즈에서 우리는 TomTom 지도를 사용하여 API와 검색 API를 표시하고 쉽게 설정할 수 있는 워드프레스 플러그인을 통해 상업 사이트에 상점 위치의 지도를 표시할 것이다.
이전 글에서 우리는 플러그인의 워드프레스 관리 패널 인터페이스 구축을 완성했다.이때 지도가 관리 패널에 나타나면 매장 위치를 매장 데이터베이스에 추가할 수 있고 검색 API를 사용하여 매장 위치 좌표를 얻을 수 있으며 관리 패널 지도에 매장 위치를 표시할 수 있다.
본문에서 우리는 다음과 같이 할 것이다.

워드프레스 플러그인을 개발하는 공공 사이트: 사이트 자체에 나타나는 지도입니다.

은 사이트 관리자가 플러그인의 지도를 웹 페이지에 삽입할 수 있도록 워드프레스 짧은 코드를 만듭니다.

은 짧은 코드를 어떻게 사용하는지, 그리고 일부 HTML과 자바스크립트는 고전적인 Wordpress 편집기와 새로운 Gutenberg 편집기가 있는 페이지에 지도를 삽입하는 방법을 보여 준다.

WordPress 단축 코드

보안 조치로서 워드프레스는 작성자가 웹 페이지에 직접 인코딩할 수 있는 HTML과 스크립트 자동화의 종류를 제한합니다.반대로 워드프레스는 매크로와 유사한 짧은 코드를 제공합니다. 간단한 태그를 통해 파일, 미디어, 스크립트에서 생성된 내용을 페이지에 추가할 수 있습니다.
Wordpress.com은 각종 preconfigured shortcodes을 제공합니다.예를 들어, [오디오] 단축키를 사용하면 단축키 텍스트를 간단하게 삽입하고 재생할 파일을 지정하여 오디오 파일 재생기를 페이지에 표시할 수 있습니다.
미리 설정된 짧은 코드를 제외하고 워드프레스 Shortcode API은 완전히 사용자 정의된 짧은 코드를 만들 수 있습니다.우리는 짧은 코드 API를 사용하여 사용자 정의 [tomtom 상점 위치추적기] 짧은 코드를 만들 것입니다. 지도와 상점 목록을 웹 페이지에 삽입할 수 있습니다.Wordpress 사이트를 위해 TomTom Stores Map Creator 플러그인을 활성화하면 [TomTom store locator] 단축 코드는 지도와 관리 패널을 통해 설정된 모든 상점 위치를 표시합니다.

사용자 정의 맵 단축 코드 만들기

플러그인 디렉터리에서, 상점 위치추적기 사용자 중에서 최종 사용자를 위한 짧은 코드를 만드는 데 사용되는 모든 PHP를 찾을 수 있습니다.php.
파일 하단에서 WordPress "add\u shortcode () 함수에 대한 호출을 볼 수 있습니다.

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

이것은 "tomtom\ustore\ulocator"라는 짧은 코드를 정의합니다.두 번째 매개 변수인 ttlocatorusermap-는 워드프레스가 페이지나 게시물에서 우리의 새 짧은 코드를 인용할 때 호출되는 함수의 이름입니다.
보시다시피 짧은 코드는 ttlocator\uuser\umap () 함수를 호출합니다.함수를 보면 다음 코드가 표시됩니다.

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
}

이것은 우리가 관리 페이지에서 지도를 생성하고 위치를 저장하는 코드와 매우 비슷하기 때문에 익숙해 보일 수도 있다.그러나 사용자를 위한 지도 페이지는 그렇게 복잡할 필요가 없기 때문에 몇 가지 변화가 있다.

저희 페이지는 제목이 없습니다. 제목이 있는 워드프레스 페이지에 추가되기 때문입니다.

우리는 위치추적기 사용자를 포함한다.포지셔너가 아니라 js.js.사용자를 위한 지도는 페이지를 관리하는 데 필요한 대부분의 JavaScript를 포함하지 않기 때문에 효율이 떨어진다.맵에 저장 태그를 추가하는 데 사용되는 JavaScript 코드는 플러그인 관리자에서 사용하는 코드와 같습니다.

저희는 ttlocator\uuser\ustore\utable\uhtml()에 대해서만 호출을 진행했습니다. 호출 함수로 매장 목록표를 생성하고 새 매장을 추가하는 페이지가 아닙니다.

ttlocator\uuser\ustore\utable\uhtml() 코드가 어떻게 되는지 살펴보겠습니다.

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 클래스를 삭제했습니다.우리가 이렇게 하는 것은 우리가 관리 페이지에서 사용하는 모든 종류가 워드프레스 관리 스타일의 일부분이며 관리 페이지에서만 사용할 수 있기 때문이다.그것들을 여기에 포함시키면 아무런 영향도 없을 것이다.
그러나, 우리는 확실히 이 시계에 ID를 주었다.이것은 플러그인 사용자들이 상점 목록의 스타일을 원하는 방식으로 설정할 수 있도록 사용자 정의 CSS를 쉽게 추가할 수 있도록 합니다.기본 텍스트 크기를 설정하는 것 외에, 우리는 테이블에 자신의 스타일을 적용하는 것을 피한다.워드프레스 테마는 일반적으로 자신의 사용자 정의 스타일을 표에 적용하기 때문에, 우리는 표가 그 어떤 스타일에도 적용될 수 있는지 확인하기를 바랍니다.
관리자를 위한 맵과 사용자를 위한 맵 사이에 이렇게 많은 공통 코드가 있기 때문에, 중복을 피하기 위해 이 공통 코드를 함수로 분해하지 않는 이유를 알고 싶을 수도 있습니다.답은 과거 플러그인 개발 경험을 바탕으로 한 판단이다.
처음에는 관리자와 사용자를 대상으로 하는 쌍방의 공통점이 많았지만 플러그인의 성장과 맞춤형에 따라 플러그인의 양면이 분화되기 시작했다.따라서 초기에 흔히 볼 수 있는 코드를 분해하는 데 드는 정력은 종종 낭비된다.이러한 상황을 방지하기 위해서, 우리는 표지 생성을 관리 페이지와 사용자 페이지 사이에 완전히 분리할 것이다.

지도 단축 코드 사용하기

기왕 우리가 이미 짧은 코드를 만들었으니, 우리는 실제로 그것을 어떻게 사용합니까?
답은 고전적인 워드프레스 편집기를 사용하느냐, 아니면 새로운 Gutenberg 편집기를 사용하느냐에 달려 있습니다.다행히도 이 두 가지 방법은 모두 쉽다.
이전 편집기를 사용하고 있다면, 페이지 텍스트에 [tomtom store locator] 태그를 놓으십시오.

쿠텐부르크 편집기를 사용하는 경우 단락 블록에 태그를 놓습니다.

최종 결과는 다음과 같은 페이지가 됩니다.

페이지의 정확한 외관은 사용자가 사용하는 워드 프레스 테마에 달려 있습니다.

다음 단계

우리는 이미 매우 긴 길을 걸었다.저희 플러그인은 현재 TomTom 지도에 상점을 추가하고 워드프레스 사이트의 사용자에게 이 위치를 표시할 수 있습니다.
이 시리즈의 마지막 글에서 우리는 고급 TomTomAPI 특성을 사용하여 우리의 상점 위치추적기를 개선하는 방법을 이해할 것이다.
우선, 우리는 지리적 위치를 이용하여 지도를 사용자 위치의 중심에 두는 것을 배워서 그들이 어떤 상점이 그들 부근에 있는지 볼 수 있도록 할 것이다.그런 다음 TomTom 라우팅 API를 사용하여 사용자의 현재 위치에서 선택한 상점 위치까지의 운전 방향을 생성합니다.플러그인을 완성하기 위해 TomTom 데이터 API를 사용하여 사용자가 지정된 시간에 상점에 도착하려면 언제 떠나야 하는지 확인합니다.
developer portal에 방문하여 Web, iOS 및 Android의 문서와 예시를 보십시오.마지막으로, 우리와 연락하는 것을 잊지 마세요. Twitch과, 그리고 우리의 blog의 더 많은 강좌와 developer forum의 모든 문제를 검사하세요.
유쾌한 매핑!
TomTom은 최근 30년의 경험을 가지고 선도적인 포지셔닝 기술 전문가로 전 세계 자동차 업계, 기업과 개발자를 위해 가장 신뢰할 수 있는 지도, 네비게이션 소프트웨어, 교통과 현장 서비스를 개발한다.우리는 정밀한 기술을 창조하여 우리가 더욱 안전하고 청결하며 막히지 않는 세계에 대한 소망에 더욱 가까워지도록 노력한다.
본고는 최초로 https://developer.tomtom.com에 발표되었다.원작자는 그레고리 드제임스다.