WordPress 플러그인: 관리 패널
WordPress+TomTom 플러그인 – 섹션 2
오늘날 디지털 제일의 세계에서 중요한 것은 귀하의 온라인 상태(사이트, 블로그 또는 소셜 미디어 계정)를 귀하의 기업 실체 상태(상점, 사무실 또는 활동)와 연결하는 것입니다.
우리는 지난 글에서 지도를 기업 사이트에 추가하여 기업의 모든 점포의 위치를 표시하는 과정을 연구했다.우리는 WordPress를 우리 사이트의 유행, 유연성, 확장이 쉬운 발표 플랫폼으로 선택하고 TomTom의 지도 디스플레이 API를 선택한다. 왜냐하면 이것은 사용하기 쉽고 업계에서 앞장서는 지도 자원을 사용하기 쉽기 때문이다.
이러한 기술을 결합시키기 위해 우리는 워드프레스 플러그인을 만들어서 워드프레스 기반 사이트에 TomTom Map Display API를 추가하는 기능을 간단하고 빠르게 하기 시작했다.이전 글에서 우리는 플러그인이 워드프레스 관리 인터페이스에 나타날 수 있도록 기본적인 플러그인 요소를 만들었습니다.또한 TomTom에 애플리케이션을 등록하고 맵에 액세스하고 API를 검색하는 개발자 키를 획득했습니다.
본문에서 우리는 다음과 같이 할 것이다.
선결 조건
이 부분에 대해 HTML, CSS, JavaScript, jQuery 및 PHP를 알아야 합니다.만약 당신이 이전에 워드프레스 개발을 한 적이 있다면, 이것은 도움이 될 것이다.
플러그인을 활성화하는 기본 단계를 반복할 것이지만, 플러그인을 실행하는 맵과 무관한 순수한 HTML, JavaScript, PHP 코드를 건너뛸 것입니다.
데이터베이스에 API 키 저장
이전 글에서 우리는 응용 프로그램을 등록하고 개발자 API 키를 얻었다.플러그인이 사용할 수 있도록 데이터베이스에 저장해야 합니다.
우리는 이 점을 실현하기 위해 새로운 관리 페이지를 만들 것이다.인용된 함수 이름을 보았습니다: ttlocator\u sdk\u setup\u page\u html ().이 함수는 HTML 양식을 생성하는 간단한 함수로, 사용자가 TomTom API 키를 입력할 수 있습니다.
function ttlocator_sdk_setup_page_html() {
$plugin_directory = plugin_dir_url(__FILE__);
$stylesheet = $plugin_directory . "styles/styles.css";
?>
<link href="<?php echo $stylesheet ?>" rel="stylesheet">
<h1>TomTom SDK Setup</h1>
<h2>SDK Key</h2>
<p>Please enter your TomTom API key:</p>
<form method="post" action="options.php">
<?php settings_fields( 'tomtom-map-plugin-sdk-setup' ); ?>
<?php do_settings_sections( 'tomtom-map-plugin-sdk-setup' ); ?>
<input type="text"
class="ttlocator-sdk-key-input"
name="tomtom_locator_api_key"
value="<?php echo esc_attr(get_option("tomtom_locator_api_key")) ?>" />
<?php submit_button() ?>
</form>
<?php
}
양식의 시작 부분에서 settings\ufields () 및 do\usettings\ufields () 함수를 WordPress API에서 호출합니다.또한 입력한 필드의 이름을 저장할 설정의 이름으로 설정합니다.한 마디로 하면 이 API 호출은 WordPress가 우리의 설정을 저장할 수 있는 폼을 만들 수 있도록 합니다.
데이터베이스에 API 키를 저장한 경우 API의 get\u option () 함수를 사용하여 텍스트 필드를 API 키로 미리 채웁니다.여기서 WordPress의 Options API를 사용하면 많은 시간을 절약할 수 있습니다. 이것은 우리가 API 키를 저장하기 위해 새로운 데이터베이스를 만들 필요가 없다는 것을 의미하기 때문입니다.
마지막으로 WordPress API의 submit_button () 함수를 호출합니다.WordPress 관리 옵션 페이지에 폼을 제출하는 단추를 생성합니다.이렇게 하면 TomTomAPI 키를 저장하거나 입력한 키를 업데이트할 수 있는 기능이 있는 페이지가 있습니다.
웹용 Maps SDK 사용
다음은 웹 파일에 사용할 TomTom Maps SDK를 다운로드하여 플러그인 항목으로 복사합니다.
Maps SDK for Web은 TomTom 지도를 웹 사이트에 빠르게 추가하는 데 필요한 모든 코드 파일과 리소스를 포함합니다.Maps SDK for Web은 모든 리소스를 직접 작성하는 것과 달리 미리 패키지된 JavaScript 라이브러리, CSS 스타일시트, 이미지, 글꼴, 지도 표시에 필요한 다른 모든 리소스를 포함합니다.몇 줄의 HTML을 추가하고 Maps SDK 스크립트를 호출하기만 하면 됩니다.
다음은 ZIP 파일의 압축을 풀고 SDK 파일 폴더를 "tomtom SDK"로 이름을 바꾸고 SDK 파일의 전체 폴더를 WordPress 플러그인 프로젝트 폴더로 복사합니다.\wp TomTom stores map.파일은 다음과 같습니다.
여기에 있는\scripts와\styles 폴더는 저희 플러그인 프로젝트의 일부분입니다. 본고는 잠시 후에 이에 대해 설명하겠습니다.
관리 패널에 지도 추가
이제 ttlocator\uconfig\u page\uhtml () 함수로 돌아갑니다.이전에는 제목만 표시했을 뿐이었다.이것을 11로 늘립시다.
function ttlocator_config_page_html() {
$plugin_directory = plugin_dir_url(__FILE__);
$stylesheet = $plugin_directory . "styles/styles.css";
$locator_js = $plugin_directory . "scripts/locator.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-script",
$locator_js, array(), false, true);
// add jQuery UI dialogs for deletion confirmation
wp_enqueue_script( 'jquery-ui-dialog' ); //
wp_enqueue_style( 'wp-jquery-ui-dialog' );
?>
<div class="ttlocator_locator_page">
<h1>TomTom Store Locator</h1>
<div id='map' style='height:500px;width:95%'></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>
<div class="ttlocator-stores-table">
<h2>Stores</h2>
<?php if (sizeof($locations) === 0): ?>
<p>
You havent added any stores. Would you like to add one now?
</p>
<?php
else:
echo ttlocator_store_table_html($locations);
endif; ?>
<div class="ttlocator-add-store-button">
<button class="button button-primary ttlocator-add-store">
Add Store
</button>
<button id="ttlocator-delete-selected"
class="button bu">
Delete Selected
</button>
</div>
</div>
</div>
<?php
echo ttlocator_add_store_html();
echo ttlocator_delete_location_confirm_dialog_html();
}
이곳에서 많은 일이 일어났지만, 만약 우리가 그것을 분해한다면, 그렇게 나쁘지 않을 것이다.일부 WordPress API 함수를 제외하고는 대부분 순수 HTML입니다.
주의해야 할 관건은plugin\udir\uurl()에 대한 호출입니다.이것은 현재 실행 중인 플러그인의 URL을 제공하는 워드프레스 API 호출입니다.이 점은 매우 중요하다. 왜냐하면 우리의 관리 페이지에 필요한 모든 자산(JavaScript와 CSS)은 플러그인 디렉터리의 하위 폴더에 있기 때문이다.우리는 하드코딩을 할 수 없다. 왜냐하면 우리의 플러그인은 많은 다른 사이트에서 실행될 수 있고, 모든 사이트에는 사용자 정의 영역이 있기 때문이다.WordPress에 플러그인의 URL을 물어보면 항상 정확한 위치에서 자산을 불러올 수 있습니다.
다음은 웹 페이지에 필요한 리소스의 위치를 저장하기 위해 변수를 설정합니다: 우리 자신의 JavaScript와 CSS, 그리고 TomTom 웹 SDK에 필요한 JavaScript와 CSS.
그리고 wp\u enqueue\u style () 과 wp\u enqueue\u script () 에 대한 몇 가지 호출을 알 수 있습니다.이것은 WordPress 플러그인에 스크립트와 스타일시트를 불러오는 첫 번째 방법입니다.링크와 스크립트 탭을 페이지에 정확하게 삽입하는 것이 아니라 워드프레스에 의존해서 링크와 스크립트 탭을 페이지에 정확하게 놓을 수 있습니다.
그 다음에 div를 볼 수 있습니다.
<div id="map" style="height:500px;width:95%"> </div>
이것은 보기에는 별로 눈에 띄지 않을 수도 있지만, 이것이 바로 우리가 페이지를 관리하는 지도입니다!
div 이후에 JavaScript 변수를 설정했습니다. 맵을 만들려면 다음과 같이 해야 합니다.
<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>
먼저 데이터베이스에 저장된 설정 페이지의 TomTom 키를 설정하고 있습니다.맵이 작동하려면 JavaScript 키를 액세스해야 합니다.다음은 TomTom SDK가 있는 정확한 URL을 저장합니다.지도도 이렇게 해야만 일을 할 수 있다.마지막으로, 플러그인이 활성화될 때 만든 사용자 정의 워드프레스 테이블에서 불러오는 저장 위치 목록을 저장합니다.
진정한 마술은 위치추적기에서 일어난다.js-플러그인의scripts 하위 디렉터리에 편리하게 위치합니다.다섯 번째 줄부터 다음 코드가 표시됩니다.
tomtom.setProductInfo('Store Locator', '1.0');
var map = tomtom.L.map('map', {
key: window.tomtomSdkKey,
source: 'vector',
basePath: tomtomSdkPath,
center: [39.8283, -98.5795],
zoom: 3.5
});
우리는 먼저 SDK에 사용할 제품에 대한 정보를 알려주고 맵을 만드는 코드에 깊이 들어가도록 한다.간단합니다. TomTom Web SDK를 사용하여 지도를 만들려면 TomTom을 호출하면 됩니다.50, 맵 () 함수.
이 함수의 첫 번째 매개 변수는 문자열입니다. 그 안에 비추는 div를 만드는 id를 포함합니다.두 번째 매개변수는 지도에 필요한 추가 데이터를 포함하는 JavaScript 객체입니다.키, 소스, 기본 경로가 모두 필요합니다.키와 basepath는 우리가 이전에 PHP 코드에 설정한 변수를 사용합니다.소스는 벡터 또는 래스터일 수 있습니다.
벡터 지도와 울타리 지도 간의 차이는 본고의 범위를 넘어섰지만, 일반적으로 웹에서 지도를 사용할 때, 특정한 이유가 없으면 기본적으로 벡터 지도를 사용해야 한다.
마지막 두 속성인'중심'과'축소'는 선택할 수 있으며, 지도에 자신을 어떻게 렌더링하는지에 대한 정보를 제공한다.예상한 바와 같이 중심은 지도에 위도와 경도 좌표를 제공하여 이 좌표에서 자신을 가운데에 둘 수 있다.위의 지도에서, 우리는 이미 지도 센터를 미국의 한복판에 설치했지만, 당신의 필요에 따라 사용자 정의를 할 수 있으며, 심지어는 당신의 플러그인에서 설정할 수 있습니다.
방주: 우리가tomtom이라는 것을 알아차렸을 수도 있어요.50. 맵을 만들 때 맵()을 사용합니다.L은 JavaScript 개원 맵 라이브러리인 전단지를 나타내며 TomTom Web SDK는 맵을 나타냅니다.맵과 직접 상호작용하여 태그 추가 등의 작업을 수행할 때 전단지 API 함수를 사용합니다.
맵 설정 후 ttlocator\uconfig\upage\uhtml()의 나머지 부분은 bog 표준 PHP와 html로 워드프레스에 특정된 내용이 없습니다.우리는 심지어 일부 HTML 생성을 ttlocator\uadd\ustore\uHTML()과 ttlocator\udelete\ulocation\uconfirm\udialog\uHTML() 두 함수에 하청을 주어 ttlocator\uconfig\u page\u HTML()이 너무 서투르게 변하는 것을 방지한다.
다음 단계
본고에서 우리는 웹 사이트 관리자가 웹 사이트의 상점 지도를 설정할 수 있도록 기본적인 워드프레스 플러그인 관리 패널을 만들기 시작했다.TomTom Maps SDK for Web을 다운로드하여 설치하고 SDK와 API를 사용하여 맵을 구축하기 시작했습니다.
다음 글에서, 우리는 저장 위치를 저장하는 데이터베이스 테이블을 만들 것이다.스토어 위치 목록을 만들기 위해 인터페이스를 추가하고 TomTom 검색 API를 사용하여 주소를 좌표로 변환하여 지도에 위치를 표시합니다.
우리는 지도와 기술로 멋진 일을 하려고 하는 포지셔닝 전문가와 개발자들이다.트위터에서 실시간 인코딩 강좌를 개최하고 있습니다. 이것은 교육, 인코딩의 장소입니다. 가장 중요한 것은 지도 애호가와 개발자 커뮤니티와 연락할 수 있는 곳입니다.
다음은 귀하가 저희에게 연락할 수 있는 곳입니다.
• TomTom Developer Forum - Maps API를 사용하여 질문하고 다른 개발자와 연락하는 곳
• TomTomDevs on Twitch - 모든 사물의 매핑 및 인코딩에 대한 라이브 스트리밍 보기
곧 있을 새로운 활동과 세미나를 얻기 위해 그 중 하나를 보십시오.가입 후 토론 탭에서 "헤이"를 입력합니다.우리는 너를 만날 때까지 기다릴 수 없다.
저는 Ruanna, Tom Devs의 콘텐츠 제작자입니다.본고는 최초https://developer.tomtom.com/blog에 발표되었다.원작자는 그레고리 드제임스다.
TomTom은 최근 30년의 경험을 가지고 선도적인 포지셔닝 기술 전문가로 전 세계 자동차 업계, 기업과 개발자를 위해 가장 신뢰할 수 있는 지도, 네비게이션 소프트웨어, 교통과 현장 서비스를 개발한다.우리는 정밀한 기술을 창조하여 우리가 더욱 안전하고 청결하며 막히지 않는 세계에 대한 소망에 더욱 가까워지도록 노력한다.
Reference
이 문제에 관하여(WordPress 플러그인: 관리 패널), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tomtomdevs/wordpress-plugins-the-admin-panel-2c2h
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이전 글에서 우리는 응용 프로그램을 등록하고 개발자 API 키를 얻었다.플러그인이 사용할 수 있도록 데이터베이스에 저장해야 합니다.
우리는 이 점을 실현하기 위해 새로운 관리 페이지를 만들 것이다.인용된 함수 이름을 보았습니다: ttlocator\u sdk\u setup\u page\u html ().이 함수는 HTML 양식을 생성하는 간단한 함수로, 사용자가 TomTom API 키를 입력할 수 있습니다.
function ttlocator_sdk_setup_page_html() {
$plugin_directory = plugin_dir_url(__FILE__);
$stylesheet = $plugin_directory . "styles/styles.css";
?>
<link href="<?php echo $stylesheet ?>" rel="stylesheet">
<h1>TomTom SDK Setup</h1>
<h2>SDK Key</h2>
<p>Please enter your TomTom API key:</p>
<form method="post" action="options.php">
<?php settings_fields( 'tomtom-map-plugin-sdk-setup' ); ?>
<?php do_settings_sections( 'tomtom-map-plugin-sdk-setup' ); ?>
<input type="text"
class="ttlocator-sdk-key-input"
name="tomtom_locator_api_key"
value="<?php echo esc_attr(get_option("tomtom_locator_api_key")) ?>" />
<?php submit_button() ?>
</form>
<?php
}
데이터베이스에 API 키를 저장한 경우 API의 get\u option () 함수를 사용하여 텍스트 필드를 API 키로 미리 채웁니다.여기서 WordPress의 Options API를 사용하면 많은 시간을 절약할 수 있습니다. 이것은 우리가 API 키를 저장하기 위해 새로운 데이터베이스를 만들 필요가 없다는 것을 의미하기 때문입니다.
마지막으로 WordPress API의 submit_button () 함수를 호출합니다.WordPress 관리 옵션 페이지에 폼을 제출하는 단추를 생성합니다.이렇게 하면 TomTomAPI 키를 저장하거나 입력한 키를 업데이트할 수 있는 기능이 있는 페이지가 있습니다.
웹용 Maps SDK 사용
다음은 웹 파일에 사용할 TomTom Maps SDK를 다운로드하여 플러그인 항목으로 복사합니다.
Maps SDK for Web은 TomTom 지도를 웹 사이트에 빠르게 추가하는 데 필요한 모든 코드 파일과 리소스를 포함합니다.Maps SDK for Web은 모든 리소스를 직접 작성하는 것과 달리 미리 패키지된 JavaScript 라이브러리, CSS 스타일시트, 이미지, 글꼴, 지도 표시에 필요한 다른 모든 리소스를 포함합니다.몇 줄의 HTML을 추가하고 Maps SDK 스크립트를 호출하기만 하면 됩니다.
다음은 ZIP 파일의 압축을 풀고 SDK 파일 폴더를 "tomtom SDK"로 이름을 바꾸고 SDK 파일의 전체 폴더를 WordPress 플러그인 프로젝트 폴더로 복사합니다.\wp TomTom stores map.파일은 다음과 같습니다.
여기에 있는\scripts와\styles 폴더는 저희 플러그인 프로젝트의 일부분입니다. 본고는 잠시 후에 이에 대해 설명하겠습니다.
관리 패널에 지도 추가
이제 ttlocator\uconfig\u page\uhtml () 함수로 돌아갑니다.이전에는 제목만 표시했을 뿐이었다.이것을 11로 늘립시다.
function ttlocator_config_page_html() {
$plugin_directory = plugin_dir_url(__FILE__);
$stylesheet = $plugin_directory . "styles/styles.css";
$locator_js = $plugin_directory . "scripts/locator.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-script",
$locator_js, array(), false, true);
// add jQuery UI dialogs for deletion confirmation
wp_enqueue_script( 'jquery-ui-dialog' ); //
wp_enqueue_style( 'wp-jquery-ui-dialog' );
?>
<div class="ttlocator_locator_page">
<h1>TomTom Store Locator</h1>
<div id='map' style='height:500px;width:95%'></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>
<div class="ttlocator-stores-table">
<h2>Stores</h2>
<?php if (sizeof($locations) === 0): ?>
<p>
You havent added any stores. Would you like to add one now?
</p>
<?php
else:
echo ttlocator_store_table_html($locations);
endif; ?>
<div class="ttlocator-add-store-button">
<button class="button button-primary ttlocator-add-store">
Add Store
</button>
<button id="ttlocator-delete-selected"
class="button bu">
Delete Selected
</button>
</div>
</div>
</div>
<?php
echo ttlocator_add_store_html();
echo ttlocator_delete_location_confirm_dialog_html();
}
이곳에서 많은 일이 일어났지만, 만약 우리가 그것을 분해한다면, 그렇게 나쁘지 않을 것이다.일부 WordPress API 함수를 제외하고는 대부분 순수 HTML입니다.
주의해야 할 관건은plugin\udir\uurl()에 대한 호출입니다.이것은 현재 실행 중인 플러그인의 URL을 제공하는 워드프레스 API 호출입니다.이 점은 매우 중요하다. 왜냐하면 우리의 관리 페이지에 필요한 모든 자산(JavaScript와 CSS)은 플러그인 디렉터리의 하위 폴더에 있기 때문이다.우리는 하드코딩을 할 수 없다. 왜냐하면 우리의 플러그인은 많은 다른 사이트에서 실행될 수 있고, 모든 사이트에는 사용자 정의 영역이 있기 때문이다.WordPress에 플러그인의 URL을 물어보면 항상 정확한 위치에서 자산을 불러올 수 있습니다.
다음은 웹 페이지에 필요한 리소스의 위치를 저장하기 위해 변수를 설정합니다: 우리 자신의 JavaScript와 CSS, 그리고 TomTom 웹 SDK에 필요한 JavaScript와 CSS.
그리고 wp\u enqueue\u style () 과 wp\u enqueue\u script () 에 대한 몇 가지 호출을 알 수 있습니다.이것은 WordPress 플러그인에 스크립트와 스타일시트를 불러오는 첫 번째 방법입니다.링크와 스크립트 탭을 페이지에 정확하게 삽입하는 것이 아니라 워드프레스에 의존해서 링크와 스크립트 탭을 페이지에 정확하게 놓을 수 있습니다.
그 다음에 div를 볼 수 있습니다.
<div id="map" style="height:500px;width:95%"> </div>
이것은 보기에는 별로 눈에 띄지 않을 수도 있지만, 이것이 바로 우리가 페이지를 관리하는 지도입니다!
div 이후에 JavaScript 변수를 설정했습니다. 맵을 만들려면 다음과 같이 해야 합니다.
<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>
먼저 데이터베이스에 저장된 설정 페이지의 TomTom 키를 설정하고 있습니다.맵이 작동하려면 JavaScript 키를 액세스해야 합니다.다음은 TomTom SDK가 있는 정확한 URL을 저장합니다.지도도 이렇게 해야만 일을 할 수 있다.마지막으로, 플러그인이 활성화될 때 만든 사용자 정의 워드프레스 테이블에서 불러오는 저장 위치 목록을 저장합니다.
진정한 마술은 위치추적기에서 일어난다.js-플러그인의scripts 하위 디렉터리에 편리하게 위치합니다.다섯 번째 줄부터 다음 코드가 표시됩니다.
tomtom.setProductInfo('Store Locator', '1.0');
var map = tomtom.L.map('map', {
key: window.tomtomSdkKey,
source: 'vector',
basePath: tomtomSdkPath,
center: [39.8283, -98.5795],
zoom: 3.5
});
우리는 먼저 SDK에 사용할 제품에 대한 정보를 알려주고 맵을 만드는 코드에 깊이 들어가도록 한다.간단합니다. TomTom Web SDK를 사용하여 지도를 만들려면 TomTom을 호출하면 됩니다.50, 맵 () 함수.
이 함수의 첫 번째 매개 변수는 문자열입니다. 그 안에 비추는 div를 만드는 id를 포함합니다.두 번째 매개변수는 지도에 필요한 추가 데이터를 포함하는 JavaScript 객체입니다.키, 소스, 기본 경로가 모두 필요합니다.키와 basepath는 우리가 이전에 PHP 코드에 설정한 변수를 사용합니다.소스는 벡터 또는 래스터일 수 있습니다.
벡터 지도와 울타리 지도 간의 차이는 본고의 범위를 넘어섰지만, 일반적으로 웹에서 지도를 사용할 때, 특정한 이유가 없으면 기본적으로 벡터 지도를 사용해야 한다.
마지막 두 속성인'중심'과'축소'는 선택할 수 있으며, 지도에 자신을 어떻게 렌더링하는지에 대한 정보를 제공한다.예상한 바와 같이 중심은 지도에 위도와 경도 좌표를 제공하여 이 좌표에서 자신을 가운데에 둘 수 있다.위의 지도에서, 우리는 이미 지도 센터를 미국의 한복판에 설치했지만, 당신의 필요에 따라 사용자 정의를 할 수 있으며, 심지어는 당신의 플러그인에서 설정할 수 있습니다.
방주: 우리가tomtom이라는 것을 알아차렸을 수도 있어요.50. 맵을 만들 때 맵()을 사용합니다.L은 JavaScript 개원 맵 라이브러리인 전단지를 나타내며 TomTom Web SDK는 맵을 나타냅니다.맵과 직접 상호작용하여 태그 추가 등의 작업을 수행할 때 전단지 API 함수를 사용합니다.
맵 설정 후 ttlocator\uconfig\upage\uhtml()의 나머지 부분은 bog 표준 PHP와 html로 워드프레스에 특정된 내용이 없습니다.우리는 심지어 일부 HTML 생성을 ttlocator\uadd\ustore\uHTML()과 ttlocator\udelete\ulocation\uconfirm\udialog\uHTML() 두 함수에 하청을 주어 ttlocator\uconfig\u page\u HTML()이 너무 서투르게 변하는 것을 방지한다.
다음 단계
본고에서 우리는 웹 사이트 관리자가 웹 사이트의 상점 지도를 설정할 수 있도록 기본적인 워드프레스 플러그인 관리 패널을 만들기 시작했다.TomTom Maps SDK for Web을 다운로드하여 설치하고 SDK와 API를 사용하여 맵을 구축하기 시작했습니다.
다음 글에서, 우리는 저장 위치를 저장하는 데이터베이스 테이블을 만들 것이다.스토어 위치 목록을 만들기 위해 인터페이스를 추가하고 TomTom 검색 API를 사용하여 주소를 좌표로 변환하여 지도에 위치를 표시합니다.
우리는 지도와 기술로 멋진 일을 하려고 하는 포지셔닝 전문가와 개발자들이다.트위터에서 실시간 인코딩 강좌를 개최하고 있습니다. 이것은 교육, 인코딩의 장소입니다. 가장 중요한 것은 지도 애호가와 개발자 커뮤니티와 연락할 수 있는 곳입니다.
다음은 귀하가 저희에게 연락할 수 있는 곳입니다.
• TomTom Developer Forum - Maps API를 사용하여 질문하고 다른 개발자와 연락하는 곳
• TomTomDevs on Twitch - 모든 사물의 매핑 및 인코딩에 대한 라이브 스트리밍 보기
곧 있을 새로운 활동과 세미나를 얻기 위해 그 중 하나를 보십시오.가입 후 토론 탭에서 "헤이"를 입력합니다.우리는 너를 만날 때까지 기다릴 수 없다.
저는 Ruanna, Tom Devs의 콘텐츠 제작자입니다.본고는 최초https://developer.tomtom.com/blog에 발표되었다.원작자는 그레고리 드제임스다.
TomTom은 최근 30년의 경험을 가지고 선도적인 포지셔닝 기술 전문가로 전 세계 자동차 업계, 기업과 개발자를 위해 가장 신뢰할 수 있는 지도, 네비게이션 소프트웨어, 교통과 현장 서비스를 개발한다.우리는 정밀한 기술을 창조하여 우리가 더욱 안전하고 청결하며 막히지 않는 세계에 대한 소망에 더욱 가까워지도록 노력한다.
Reference
이 문제에 관하여(WordPress 플러그인: 관리 패널), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tomtomdevs/wordpress-plugins-the-admin-panel-2c2h
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이제 ttlocator\uconfig\u page\uhtml () 함수로 돌아갑니다.이전에는 제목만 표시했을 뿐이었다.이것을 11로 늘립시다.
function ttlocator_config_page_html() {
$plugin_directory = plugin_dir_url(__FILE__);
$stylesheet = $plugin_directory . "styles/styles.css";
$locator_js = $plugin_directory . "scripts/locator.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-script",
$locator_js, array(), false, true);
// add jQuery UI dialogs for deletion confirmation
wp_enqueue_script( 'jquery-ui-dialog' ); //
wp_enqueue_style( 'wp-jquery-ui-dialog' );
?>
<div class="ttlocator_locator_page">
<h1>TomTom Store Locator</h1>
<div id='map' style='height:500px;width:95%'></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>
<div class="ttlocator-stores-table">
<h2>Stores</h2>
<?php if (sizeof($locations) === 0): ?>
<p>
You havent added any stores. Would you like to add one now?
</p>
<?php
else:
echo ttlocator_store_table_html($locations);
endif; ?>
<div class="ttlocator-add-store-button">
<button class="button button-primary ttlocator-add-store">
Add Store
</button>
<button id="ttlocator-delete-selected"
class="button bu">
Delete Selected
</button>
</div>
</div>
</div>
<?php
echo ttlocator_add_store_html();
echo ttlocator_delete_location_confirm_dialog_html();
}
주의해야 할 관건은plugin\udir\uurl()에 대한 호출입니다.이것은 현재 실행 중인 플러그인의 URL을 제공하는 워드프레스 API 호출입니다.이 점은 매우 중요하다. 왜냐하면 우리의 관리 페이지에 필요한 모든 자산(JavaScript와 CSS)은 플러그인 디렉터리의 하위 폴더에 있기 때문이다.우리는 하드코딩을 할 수 없다. 왜냐하면 우리의 플러그인은 많은 다른 사이트에서 실행될 수 있고, 모든 사이트에는 사용자 정의 영역이 있기 때문이다.WordPress에 플러그인의 URL을 물어보면 항상 정확한 위치에서 자산을 불러올 수 있습니다.
다음은 웹 페이지에 필요한 리소스의 위치를 저장하기 위해 변수를 설정합니다: 우리 자신의 JavaScript와 CSS, 그리고 TomTom 웹 SDK에 필요한 JavaScript와 CSS.
그리고 wp\u enqueue\u style () 과 wp\u enqueue\u script () 에 대한 몇 가지 호출을 알 수 있습니다.이것은 WordPress 플러그인에 스크립트와 스타일시트를 불러오는 첫 번째 방법입니다.링크와 스크립트 탭을 페이지에 정확하게 삽입하는 것이 아니라 워드프레스에 의존해서 링크와 스크립트 탭을 페이지에 정확하게 놓을 수 있습니다.
그 다음에 div를 볼 수 있습니다.
<div id="map" style="height:500px;width:95%"> </div>
div 이후에 JavaScript 변수를 설정했습니다. 맵을 만들려면 다음과 같이 해야 합니다.
<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>
진정한 마술은 위치추적기에서 일어난다.js-플러그인의scripts 하위 디렉터리에 편리하게 위치합니다.다섯 번째 줄부터 다음 코드가 표시됩니다.
tomtom.setProductInfo('Store Locator', '1.0');
var map = tomtom.L.map('map', {
key: window.tomtomSdkKey,
source: 'vector',
basePath: tomtomSdkPath,
center: [39.8283, -98.5795],
zoom: 3.5
});
이 함수의 첫 번째 매개 변수는 문자열입니다. 그 안에 비추는 div를 만드는 id를 포함합니다.두 번째 매개변수는 지도에 필요한 추가 데이터를 포함하는 JavaScript 객체입니다.키, 소스, 기본 경로가 모두 필요합니다.키와 basepath는 우리가 이전에 PHP 코드에 설정한 변수를 사용합니다.소스는 벡터 또는 래스터일 수 있습니다.
벡터 지도와 울타리 지도 간의 차이는 본고의 범위를 넘어섰지만, 일반적으로 웹에서 지도를 사용할 때, 특정한 이유가 없으면 기본적으로 벡터 지도를 사용해야 한다.
마지막 두 속성인'중심'과'축소'는 선택할 수 있으며, 지도에 자신을 어떻게 렌더링하는지에 대한 정보를 제공한다.예상한 바와 같이 중심은 지도에 위도와 경도 좌표를 제공하여 이 좌표에서 자신을 가운데에 둘 수 있다.위의 지도에서, 우리는 이미 지도 센터를 미국의 한복판에 설치했지만, 당신의 필요에 따라 사용자 정의를 할 수 있으며, 심지어는 당신의 플러그인에서 설정할 수 있습니다.
방주: 우리가tomtom이라는 것을 알아차렸을 수도 있어요.50. 맵을 만들 때 맵()을 사용합니다.L은 JavaScript 개원 맵 라이브러리인 전단지를 나타내며 TomTom Web SDK는 맵을 나타냅니다.맵과 직접 상호작용하여 태그 추가 등의 작업을 수행할 때 전단지 API 함수를 사용합니다.
맵 설정 후 ttlocator\uconfig\upage\uhtml()의 나머지 부분은 bog 표준 PHP와 html로 워드프레스에 특정된 내용이 없습니다.우리는 심지어 일부 HTML 생성을 ttlocator\uadd\ustore\uHTML()과 ttlocator\udelete\ulocation\uconfirm\udialog\uHTML() 두 함수에 하청을 주어 ttlocator\uconfig\u page\u HTML()이 너무 서투르게 변하는 것을 방지한다.
다음 단계
본고에서 우리는 웹 사이트 관리자가 웹 사이트의 상점 지도를 설정할 수 있도록 기본적인 워드프레스 플러그인 관리 패널을 만들기 시작했다.TomTom Maps SDK for Web을 다운로드하여 설치하고 SDK와 API를 사용하여 맵을 구축하기 시작했습니다.
다음 글에서, 우리는 저장 위치를 저장하는 데이터베이스 테이블을 만들 것이다.스토어 위치 목록을 만들기 위해 인터페이스를 추가하고 TomTom 검색 API를 사용하여 주소를 좌표로 변환하여 지도에 위치를 표시합니다.
우리는 지도와 기술로 멋진 일을 하려고 하는 포지셔닝 전문가와 개발자들이다.트위터에서 실시간 인코딩 강좌를 개최하고 있습니다. 이것은 교육, 인코딩의 장소입니다. 가장 중요한 것은 지도 애호가와 개발자 커뮤니티와 연락할 수 있는 곳입니다.
다음은 귀하가 저희에게 연락할 수 있는 곳입니다.
• TomTom Developer Forum - Maps API를 사용하여 질문하고 다른 개발자와 연락하는 곳
• TomTomDevs on Twitch - 모든 사물의 매핑 및 인코딩에 대한 라이브 스트리밍 보기
곧 있을 새로운 활동과 세미나를 얻기 위해 그 중 하나를 보십시오.가입 후 토론 탭에서 "헤이"를 입력합니다.우리는 너를 만날 때까지 기다릴 수 없다.
저는 Ruanna, Tom Devs의 콘텐츠 제작자입니다.본고는 최초https://developer.tomtom.com/blog에 발표되었다.원작자는 그레고리 드제임스다.
TomTom은 최근 30년의 경험을 가지고 선도적인 포지셔닝 기술 전문가로 전 세계 자동차 업계, 기업과 개발자를 위해 가장 신뢰할 수 있는 지도, 네비게이션 소프트웨어, 교통과 현장 서비스를 개발한다.우리는 정밀한 기술을 창조하여 우리가 더욱 안전하고 청결하며 막히지 않는 세계에 대한 소망에 더욱 가까워지도록 노력한다.
Reference
이 문제에 관하여(WordPress 플러그인: 관리 패널), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tomtomdevs/wordpress-plugins-the-admin-panel-2c2h
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(WordPress 플러그인: 관리 패널), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tomtomdevs/wordpress-plugins-the-admin-panel-2c2h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
