Post on 21-Jul-2015
WP-API teoria i praktyka
Tomasz Dziuda
WordUp Trójmiasto 23.V.2015
Idea
+WP-API
GET/POST/PUT/DELETE
+WP-API
GET/POST/PUT/DELETE
{“json”: “data”}
+WP-API
GET/POST/PUT/DELETE
{“json”: “data”}
wp_ajax_{action} wp_ajax_nopriv_{action}
+WP-API
GET/POST/PUT/DELETE
{“json”: “data”}
wp_ajax_{action} wp_ajax_nopriv_{action}
+WP-API
Struktura URLi
wp-json/<zasób>/<id_lub_filtr>/<dodatkowe_zasoby>
/
/posts
/posts/<id>/meta
/posts/<id>/revisions
/media
/users
/taxonomies
/taxonomies/<taxonomy>/terms
Przykłady
Przykłady• wp-json/posts/303
• wp-json/posts?filter[cat]=1,2,3
• wp-json/posts?filter[posts_per_page]=20
• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts
• wp-json/taxonomies/category/terms
• wp-json/users/me
Przykłady• wp-json/posts/303
• wp-json/posts?filter[cat]=1,2,3
• wp-json/posts?filter[posts_per_page]=20
• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts
• wp-json/taxonomies/category/terms
• wp-json/users/me
Przykłady• wp-json/posts/303
• wp-json/posts?filter[cat]=1,2,3
• wp-json/posts?filter[posts_per_page]=20
• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts
• wp-json/taxonomies/category/terms
• wp-json/users/me
Przykłady• wp-json/posts/303
• wp-json/posts?filter[cat]=1,2,3
• wp-json/posts?filter[posts_per_page]=20
• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts
• wp-json/taxonomies/category/terms
• wp-json/users/me
Przykłady• wp-json/posts/303
• wp-json/posts?filter[cat]=1,2,3
• wp-json/posts?filter[posts_per_page]=20
• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts
• wp-json/taxonomies/category/terms
• wp-json/users/me
Przykłady• wp-json/posts/303
• wp-json/posts?filter[cat]=1,2,3
• wp-json/posts?filter[posts_per_page]=20
• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts
• wp-json/taxonomies/category/terms
• wp-json/users/me
GET / HEAD - odczyt istniejącego elementu
POST - tworzenie nowego elementu
PUT / PATCH - edycja elementu
DELETE - usunięcie elementu
GET / HEAD - odczyt istniejącego elementu
POST - tworzenie nowego elementu
PUT / PATCH - edycja elementu
DELETE - usunięcie elementu
GET / HEAD - odczyt istniejącego elementu
POST - tworzenie nowego elementu
PUT / PATCH - edycja elementu
DELETE - usunięcie elementu
GET / HEAD - odczyt istniejącego elementu
POST - tworzenie nowego elementu
PUT / PATCH - edycja elementu
DELETE - usunięcie elementu
GET / HEAD - odczyt istniejącego elementu
POST - tworzenie nowego elementu
PUT / PATCH - edycja elementu
DELETE - usunięcie elementu
Wymagają zawsze autoryzacji
Wymagają CZASAMI autoryzacji
JSON jako nośnik danych
JSON jako nośnik danych
• Zajmuje mniej miejsca niż XML
• Można go łatwiej przetwarzać z użyciem JavaScript
• http://www.json.org/xml.html
JSON jako nośnik danych
• Zajmuje mniej miejsca niż XML
• Można go łatwiej przetwarzać z użyciem JavaScript
• http://www.json.org/xml.html
JSON jako nośnik danych
• Zajmuje mniej miejsca niż XML
• Można go łatwiej przetwarzać z użyciem JavaScript
• http://www.json.org/xml.html
Wtyczka JSON Viewer: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh/
Akcje wymagające autoryzacji
• Tworzenie i modyfikacja postów
• Odczyt rewizji postów
• Tworzenie załączników
• Tworzenie, modyfikacja, odczyt post meta
• Tworzenie, modyfikacja, odczyt użytkowników
Sposoby autoryzacji
Cookie Auth
• Standardowa metoda autoryzacji dla wtyczek i motywów
• Wymaga przesłania w zapytaniu AJAX-owym dodatkowego nagłówka X-WP-Nonce http://wp-api.org/guides/authentication.html#cookie-authentication
Cookie Auth
• Standardowa metoda autoryzacji dla wtyczek i motywów
• Wymaga przesłania w zapytaniu AJAX-owym dodatkowego nagłówka X-WP-Nonce http://wp-api.org/guides/authentication.html#cookie-authentication
OAuth• Dla aplikacji zewnętrznych - webowych, mobilnych,
desktopowych
• Wymaga dodatkowego pluginu - OAuth Server https://github.com/WP-API/OAuth1
• Wsparcie tylko dla OAuth 1.*
• Niestety obecnie nie ma UI do zarządzania kluczami
OAuth• Dla aplikacji zewnętrznych - webowych, mobilnych,
desktopowych
• Wymaga dodatkowego pluginu - OAuth Server https://github.com/WP-API/OAuth1
• Wsparcie tylko dla OAuth 1.*
• Niestety obecnie nie ma UI do zarządzania kluczami
OAuth• Dla aplikacji zewnętrznych - webowych, mobilnych,
desktopowych
• Wymaga dodatkowego pluginu - OAuth Server https://github.com/WP-API/OAuth1
• Wsparcie tylko dla OAuth 1.*
• Niestety obecnie nie ma UI do zarządzania kluczami
OAuth• Dla aplikacji zewnętrznych - webowych, mobilnych,
desktopowych
• Wymaga dodatkowego pluginu - OAuth Server https://github.com/WP-API/OAuth1
• Wsparcie tylko dla OAuth 1.*
• Niestety obecnie nie ma UI do zarządzania kluczami
Basic Auth
• Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania
• Wymaga dodatkowej wtyczki: Basic Authhttps://github.com/WP-API/Basic-Auth
Basic Auth
• Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania
• Wymaga dodatkowej wtyczki: Basic Authhttps://github.com/WP-API/Basic-Auth
Własne metody
• Wymagają implementacji z użyciem filtra json_authentication_errors https://apppresser.com/custom-wp-api-authentication/
• Można zaimplementować np. JSON Web Tokens http://jwt.io/
Własne metody
• Wymagają implementacji z użyciem filtra json_authentication_errors https://apppresser.com/custom-wp-api-authentication/
• Można zaimplementować np. JSON Web Tokens http://jwt.io/
Możliwości
Nowe kokpity
Źródło: https://dribbble.com/shots/2056289-WordPress-Dashboard/attachments/367241
Panele zarządzania WordPressami
Motywy jako SPA
Łatwa komunikacja z aplikacjami
Migrowanie danych
Migrowanie danych
Migrowanie danych
JSON XML SQL
YAML RSS Atom
Migrowanie danych
JSON
JSON XML SQL
YAML RSS Atom
Rozszerzenia przeglądarek zintegrowane z WordPressem
Usługi informacyjne
Kalendarz WordUpów
Kalendarz WordUpów• Przygotowujemy WordPressa z listą WordUpów
• Tworzymy odpowiednie custom fields opisujące WordUpy
• Tworzymy widżet, który pobiera te informacje
• Wykorzystujemy HTTP API albo JSON-Phttps://codex.wordpress.org/HTTP_API
http://json-p.org/
Kalendarz WordUpów• Przygotowujemy WordPressa z listą WordUpów
• Tworzymy odpowiednie custom fields opisujące WordUpy
• Tworzymy widżet, który pobiera te informacje
• Wykorzystujemy HTTP API albo JSON-Phttps://codex.wordpress.org/HTTP_API
http://json-p.org/
Kalendarz WordUpów• Przygotowujemy WordPressa z listą WordUpów
• Tworzymy odpowiednie custom fields opisujące WordUpy
• Tworzymy widżet, który pobiera te informacje
• Wykorzystujemy HTTP API albo JSON-Phttps://codex.wordpress.org/HTTP_API
http://json-p.org/
Kalendarz WordUpów• Przygotowujemy WordPressa z listą WordUpów
• Tworzymy odpowiednie custom fields opisujące WordUpy
• Tworzymy widżet, który pobiera te informacje
• Wykorzystujemy HTTP API albo JSON-Phttps://codex.wordpress.org/HTTP_API
http://json-p.org/
Własne end-pointyhttp://wp-api.org/guides/extending.html
http://www.roysivan.com/my-best-practices-to-developing-wp-api/
Filtry i akcje
Moje dwa ulubione filtry:
• json_insert_post - pozwala pozmieniać dane przed dodaniem do bazy
• json_prepare_post - może zastąpić własne end-pointy
Moje dwa ulubione filtry:
• json_insert_post - pozwala pozmieniać dane przed dodaniem do bazy
• json_prepare_post - może zastąpić własne end-pointy
Moje dwa ulubione filtry:
• json_insert_post - pozwala pozmieniać dane przed dodaniem do bazy
• json_prepare_post - może zastąpić własne end-pointy
Pamiętajcie jednak, że…
v.1.* jako numer wersji JSON-API jest zdecydowanie zawyżone ;-)
Szykuje się wersja 2.*
Szykuje się wersja 2.*Niekompatybilna wstecz ;)
https://make.wordpress.org/core/2015/04/29/wp-rest-api-version-2-0-beta-1/
Szykuje się wersja 2.*
Dokumentacja: http://v2.wp-api.org/
Niekompatybilna wstecz ;) https://make.wordpress.org/core/2015/04/29/wp-rest-api-version-2-0-beta-1/
Do odczytu świetne, do zapisu niekoniecznie ;-)
Problemy z protected meta
Nie można ustawić _thumbnail_id
Problemy z protected meta
Nie można ustawić _thumbnail_id
Problemy z protected meta
Nie można ustawić _thumbnail_id
Pomaga:
add_filter('is_protected_meta', '__return_false');
Brak wsparcia dla dodawania/edycji termsów
Brak wsparcia dla dodawania/edycji termsów
Własne end-pointy na ratunek
Brak wsparcia dla definiowania własnych taksonomii przy
tworzeniu wpisów
function wp_api_add_tax($post, $data, $update){ if( !empty($data['custom_tax']) && is_array($data['custom_tax']) ) {
foreach( $data['custom_tax'] as $tax => $val ){ wp_set_post_terms( $post['ID'], $val, $tax ); }
}}
add_action('json_insert_post', 'wp_api_add_tax', 10, 3);
I paru innych rzeczy…
http://wp-api.org/misc/comparison.html
Wydajność i cache
Porady jak przygotować WordPressa pod wykorzystanie motywów SPA:
http://torquemag.io/preparing-wordpress-site-power-single-page-web-app/
Wtyczka cache dla WP-API:
https://github.com/Shelob9/jp-rest-cache
Motyw jako SPA
Motyw-mapa
Motyw-mapaPrawie jak samochód-chłodnia ;-)
Co wykorzystać?
REST API
Adresy URL, które wykorzystamy:
• wp-json/taxonomies/category/terms
• wp-json/posts?filter[posts_per_page]=200
• wp-json/posts?filter[posts_per_page]=200&filter[cat]=1,2,3
REST API
Adresy URL, które wykorzystamy:
• wp-json/taxonomies/category/terms
• wp-json/posts?filter[posts_per_page]=200
• wp-json/posts?filter[posts_per_page]=200&filter[cat]=1,2,3
REST API
Adresy URL, które wykorzystamy:
• wp-json/taxonomies/category/terms
• wp-json/posts?filter[posts_per_page]=200
• wp-json/posts?filter[posts_per_page]=200&filter[cat]=1,2,3
REST API
Adresy URL, które wykorzystamy:
• wp-json/taxonomies/category/terms
• wp-json/posts?filter[posts_per_page]=200
• wp-json/posts?filter[posts_per_page]=200&filter[cat]=1,2,3
Handlebarshttp://handlebarsjs.com/
<script id="stats-popup-tmpl" type="text/x-handlebars-template"> <h3 class="stats__header"><?php _e('Znaleziono {{total}} odwiedzonych miejsc', 'theme-map'); ?></h3>
<ul class="stats__list"> {{#each stats}} <li class="stats__item"> <strong class="stats__counter{{#if count}} stats__counter--active{{/if}}">{{count}}</strong> <img src="{{iconsUrl}}{{slug}}.svg" alt="" class="stats__icon" /> {{name}} </li> {{/each}} </ul> </script>
Handlebarshttp://handlebarsjs.com/
<script id="stats-popup-tmpl" type="text/x-handlebars-template"> <h3 class="stats__header"><?php _e('Znaleziono {{total}} odwiedzonych miejsc', 'theme-map'); ?></h3>
<ul class="stats__list"> {{#each stats}} <li class="stats__item"> <strong class="stats__counter{{#if count}} stats__counter--active{{/if}}">{{count}}</strong> <img src="{{iconsUrl}}{{slug}}.svg" alt="" class="stats__icon" /> {{name}} </li> {{/each}} </ul> </script>
Handlebarshttp://handlebarsjs.com/
<script id="stats-popup-tmpl" type="text/x-handlebars-template"> <h3 class="stats__header"><?php _e('Znaleziono {{total}} odwiedzonych miejsc', 'theme-map'); ?></h3>
<ul class="stats__list"> {{#each stats}} <li class="stats__item"> <strong class="stats__counter{{#if count}} stats__counter--active{{/if}}">{{count}}</strong> <img src="{{iconsUrl}}{{slug}}.svg" alt="" class="stats__icon" /> {{name}} </li> {{/each}} </ul> </script>
Google Maps API
https://developers.google.com/maps/documentation/javascript/tutorial
Inne
Inne• LocalStorage - do przechowywania filtrów
• History API - aby mieć dostęp poprzez URL do konkretnych miejsc
• Snazzy mapshttps://snazzymaps.com/
• Travel icon set http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
Inne• LocalStorage - do przechowywania filtrów
• History API - aby mieć dostęp poprzez URL do konkretnych miejsc
• Snazzy mapshttps://snazzymaps.com/
• Travel icon set http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
Inne• LocalStorage - do przechowywania filtrów
• History API - aby mieć dostęp poprzez URL do konkretnych miejsc
• Snazzy mapshttps://snazzymaps.com/
• Travel icon set http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
Inne• LocalStorage - do przechowywania filtrów
• History API - aby mieć dostęp poprzez URL do konkretnych miejsc
• Snazzy mapshttps://snazzymaps.com/
• Travel icon set http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
Problemy?
Wprowadzanie pozycji elementów na mapie
Wprowadzanie pozycji elementów na mapie
Wtyczka Pronamic Google Mapshttps://wordpress.org/plugins/pronamic-google-maps/
Wprowadzanie pozycji elementów na mapie
Advanced Custom Fieldshttps://wordpress.org/plugins/advanced-custom-fields/
Wprowadzanie pozycji elementów na mapie
Advanced Custom Fieldshttps://wordpress.org/plugins/advanced-custom-fields/
Warto pamiętać o zdefiniowaniu pól w motywie http://www.advancedcustomfields.com/resources/local-json/
Brak publicznego dostępu do post meta
Brak publicznego dostępu do post meta
json_prepare_post rozwiąże ten problem
Duża liczba markerów
Duża liczba markerów
• Marker Clustererhttps://googlemaps.github.io/js-marker-clusterer/docs/examples.html
• Gorsze przypadki omówimy później ;)
Duża liczba markerów
• Marker Clustererhttps://googlemaps.github.io/js-marker-clusterer/docs/examples.html
• Gorsze przypadki omówimy później ;)
Wpis
Dane geolokalizacyjne
Kategoria
Kategoria
Tagi
Adres
Najważniejsze pliki motywu
• index.php - jedyny plik wyświetlający szablon
• index-templates.php - przechowuje szablony Handlebars
• functions.php - konfiguracja wstępna i wczytywanie plików JS/CSS
Najważniejsze pliki motywu
• index.php - jedyny plik wyświetlający szablon
• index-templates.php - przechowuje szablony Handlebars
• functions.php - konfiguracja wstępna i wczytywanie plików JS/CSS
Najważniejsze pliki motywu
• index.php - jedyny plik wyświetlający szablon
• index-templates.php - przechowuje szablony Handlebars
• functions.php - konfiguracja wstępna i wczytywanie plików JS/CSS
Najważniejsze pliki motywu
• index.php - jedyny plik wyświetlający szablon
• index-templates.php - przechowuje szablony Handlebars
• functions.php - konfiguracja wstępna i wczytywanie plików JS/CSS
• tgm.php - do ułatwienia/wymuszenia instalacji potrzebnych wtyczek
Wczytywanie konfiguracji wstępnej z ekranu personalizacji motywu
wp_register_script( 'tm-app', get_template_directory_uri() . '/js/app.js', array('jquery', ‘tm-handlebars’));
$app_config = array( 'URL' => home_url(), 'mapLatitude' => get_theme_mod('map_latitude', '51.919438'), 'mapLongitude' => get_theme_mod('map_longitude', '19.145135'), 'mapZoom' => get_theme_mod('map_zoom', '6'),);
wp_localize_script( 'tm-app', 'appConfig', $app_config );
Wczytywanie konfiguracji wstępnej z ekranu personalizacji motywu
wp_register_script( 'tm-app', get_template_directory_uri() . '/js/app.js', array('jquery', ‘tm-handlebars’));
$app_config = array( 'URL' => home_url(), 'mapLatitude' => get_theme_mod('map_latitude', '51.919438'), 'mapLongitude' => get_theme_mod('map_longitude', '19.145135'), 'mapZoom' => get_theme_mod('map_zoom', '6'),);
wp_localize_script( 'tm-app', 'appConfig', $app_config );
Wczytywanie konfiguracji wstępnej z ekranu personalizacji motywu
wp_register_script( 'tm-app', get_template_directory_uri() . '/js/app.js', array('jquery', ‘tm-handlebars’));
$app_config = array( 'URL' => home_url(), 'mapLatitude' => get_theme_mod('map_latitude', '51.919438'), 'mapLongitude' => get_theme_mod('map_longitude', '19.145135'), 'mapZoom' => get_theme_mod('map_zoom', '6'),);
wp_localize_script( 'tm-app', 'appConfig', $app_config );
Pobieranie danych$.ajax({
url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) {// przetwarzanie danych
});
Pobieranie danych$.ajax({
url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) {// przetwarzanie danych
});
Pobieranie danych$.ajax({
url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) { // przetwarzanie danych});
Pobieranie danych$.ajax({ method: ‘GET’,
url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) { // przetwarzanie danych});
Pobieranie danych$.ajax({ method: ‘GET’,
cache: false, url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) { // przetwarzanie danych});
Wyświetlanie popupuDodawanie danych geograficznych do posta
if( ! function_exists( 'tm_geodata' ) ) :function tm_geodata($data, $post, $context) {
$data['geodata'] = array( 'latitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_latitude', true ), 'longitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_longitude', true ), 'address' => get_post_meta(
$post['ID'], '_pronamic_google_maps_address', true ));return $data;
}endif; // tm_geodata
add_filter( 'json_prepare_post', 'tm_geodata', 10, 3 );
Wyświetlanie popupuDodawanie danych geograficznych do posta
if( ! function_exists( 'tm_geodata' ) ) :function tm_geodata($data, $post, $context) {
$data['geodata'] = array( 'latitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_latitude', true ), 'longitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_longitude', true ), 'address' => get_post_meta(
$post['ID'], '_pronamic_google_maps_address', true ));return $data;
}endif; // tm_geodata
add_filter( 'json_prepare_post', 'tm_geodata', 10, 3 );
Wyświetlanie popupuDodawanie danych geograficznych do posta
if( ! function_exists( 'tm_geodata' ) ) :function tm_geodata($data, $post, $context) {
$data['geodata'] = array( 'latitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_latitude', true ), 'longitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_longitude', true ), 'address' => get_post_meta(
$post['ID'], '_pronamic_google_maps_address', true ));return $data;
}endif; // tm_geodata
add_filter( 'json_prepare_post', 'tm_geodata', 10, 3 );
Wyświetlanie popupuDodawanie danych geograficznych do posta
if( ! function_exists( 'tm_geodata' ) ) :function tm_geodata($data, $post, $context) {
$data['geodata'] = array( 'latitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_latitude', true ), 'longitude' => get_post_meta(
$post['ID'], '_pronamic_google_maps_longitude', true ), 'address' => get_post_meta(
$post['ID'], '_pronamic_google_maps_address', true ));return $data;
}endif; // tm_geodata
add_filter( 'json_prepare_post', 'tm_geodata', 10, 3 );
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Wyświetlanie popupushowPopup: function(data) {
$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :
null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug
}));
uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},
Co dalej?
1 wpis = 2-5kB 100 wpisów = ~200-500kB
1 wpis = 2-5kB 100 wpisów = ~200-500kB
Dla większej liczby markerów
• Utworzenie własnych end-pointów do serwowania danych markerów:
• ID,
• Dane geolokalizacyjne
• Kategoria
• Reszta danych wczytywana po kliknięciu popupa poprzez wp-json/posts/<id>
Dla większej liczby markerów
• Utworzenie własnych end-pointów do serwowania danych markerów:
• ID,
• Dane geolokalizacyjne
• Kategoria
• Reszta danych wczytywana po kliknięciu popupa poprzez wp-json/posts/<id>
Dla większej liczby markerów
• Utworzenie własnych end-pointów do serwowania danych markerów:
• ID,
• Dane geolokalizacyjne
• Kategoria
• Reszta danych wczytywana po kliknięciu popupa poprzez wp-json/posts/<id>
Gdy mamy bardzo dużo markerów
• Wczytywanie markerów zależnie od widocznego obszaru mapy
• Przygotowanie end-pointu, który na bazie zakresu szerokości i długości geograficznej zwróci listę markerów na danym obszarze
Gdy mamy bardzo dużo markerów
• Wczytywanie markerów zależnie od widocznego obszaru mapy
• Przygotowanie end-pointu, który na bazie zakresu szerokości i długości geograficznej zwróci listę markerów na danym obszarze
DlaczegoDziudek ❤ WP-API ?
• Znam dobrze WordPressowy kokpit…
• … umiem go modyfikować do swoich potrzeb …
• … i zaoszczędzić sobie sporo czasu poprzez wykorzystanie gotowych wtyczek …
• … dzięki WP-API mogę ten kokpit połączyć na front-endzie z czymkolwiek zechcę :-)
• Znam dobrze WordPressowy kokpit…
• … umiem go dostosować do swoich potrzeb …
• … i zaoszczędzić sobie sporo czasu poprzez wykorzystanie gotowych wtyczek …
• … dzięki WP-API mogę ten kokpit połączyć na front-endzie z czymkolwiek zechcę :-)
• Znam dobrze WordPressowy kokpit…
• … umiem go dostosować do swoich potrzeb …
• … i zaoszczędzić sobie sporo czasu poprzez wykorzystanie gotowych wtyczek …
• … dzięki WP-API mogę ten kokpit połączyć na front-endzie z czymkolwiek zechcę :-)
• Znam dobrze WordPressowy kokpit…
• … umiem go dostosować do swoich potrzeb …
• … i zaoszczędzić sobie sporo czasu poprzez wykorzystanie gotowych wtyczek …
• … dzięki WP-API mogę ten kokpit połączyć na front-endzie z czymkolwiek zechcę :-)
Lektura
• Wykorzystanie taksonomii w WP-API http://torquemag.io/working-taxonomies-using-json-rest-api/
• Tworzenie widżetów z użyciem WP-API http://webdevstudios.com/2015/03/26/how-to-create-an-auto-updating-widget-using-wp-api/
• Postęp łączenia WP-API z WordPressem https://github.com/WP-API/WP-API/issues/571
Tomasz Dziuda
Lead Developer @
@dziudek
http://dziudek.pl
dziudek@gavick.com
Pytania?