Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WP-API - teoria i praktyka - WordUp Łódź #4

823 views

Published on

Prezentacja prezentująca podstawowe informacje na temat WP-API od strony teoretycznej i praktycznej

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WP-API - teoria i praktyka - WordUp Łódź #4

  1. 1. WP-API teoria i praktyka Tomasz Dziuda WordUp Łódź #4 10.VI.2015
  2. 2. Idea
  3. 3. + WP-API
  4. 4. GET/POST/PUT/DELETE + WP-API
  5. 5. GET/POST/PUT/DELETE {“json”: “data”} + WP-API
  6. 6. GET/POST/PUT/DELETE {“json”: “data”} wp_ajax_{action} wp_ajax_nopriv_{action} + WP-API
  7. 7. GET/POST/PUT/DELETE {“json”: “data”} wp_ajax_{action} wp_ajax_nopriv_{action} + WP-API
  8. 8. Struktura URLi wp-json/<zasób>/<id_lub_filtr>/<dodatkowe_zasoby>
  9. 9. / /posts /posts/<id>/meta /posts/<id>/revisions /media /users /taxonomies /taxonomies/<taxonomy>/terms
  10. 10. Przykłady
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu
  18. 18. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu
  19. 19. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu
  20. 20. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu
  21. 21. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu Wymagają zawsze autoryzacji Wymagają CZASAMI autoryzacji
  22. 22. JSON jako nośnik danych
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Wtyczka JSON Viewer: https://chrome.google.com/webstore/detail/json-viewer/ gbmdgpbipfallnflgajpaliibnhdgobh/
  27. 27. 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
  28. 28. Sposoby autoryzacji
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Basic Auth • Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania • Wymaga dodatkowej wtyczki: Basic Auth
 https://github.com/WP-API/Basic-Auth
  36. 36. Basic Auth • Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania • Wymaga dodatkowej wtyczki: Basic Auth
 https://github.com/WP-API/Basic-Auth
  37. 37. 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/
  38. 38. 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/
  39. 39. Możliwości
  40. 40. Nowe kokpity
  41. 41. Źródło: https://pickle.pub/
  42. 42. Źródło: https://dribbble.com/shots/2056289-WordPress-Dashboard/attachments/367241
  43. 43. Panele zarządzania WordPressami
  44. 44. Źródło: https://wordpress.com/sites
  45. 45. Motywy jako SPA
  46. 46. Łatwa komunikacja z aplikacjami
  47. 47. Migrowanie danych
  48. 48. Migrowanie danych
  49. 49. Migrowanie danych JSON XML SQL YAML RSS Atom
  50. 50. Migrowanie danych JSON JSON XML SQL YAML RSS Atom
  51. 51. Przetwarzanie danych
  52. 52. Przetwarzanie danych
  53. 53. JSON Przetwarzanie danych
  54. 54. JSON Przetwarzanie danych
  55. 55. Rozszerzenia przeglądarek zintegrowane z WordPressem
  56. 56. Usługi informacyjne
  57. 57. Kalendarz WordUpów
  58. 58. 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-P
 
 https://codex.wordpress.org/HTTP_API
 http://json-p.org/

  59. 59. 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-P
 
 https://codex.wordpress.org/HTTP_API
 http://json-p.org/

  60. 60. 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-P
 
 https://codex.wordpress.org/HTTP_API
 http://json-p.org/

  61. 61. 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-P
 
 https://codex.wordpress.org/HTTP_API
 http://json-p.org/

  62. 62. Własne end-pointy http://wp-api.org/guides/extending.html http://www.roysivan.com/my-best-practices-to-developing-wp-api/
  63. 63. Filtry i akcje
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. Pamiętajcie jednak, że…
  68. 68. v.1.* jako numer wersji JSON-API jest zdecydowanie zawyżone ;-)
  69. 69. Szykuje się wersja 2.*
  70. 70. Szykuje się wersja 2.* Niekompatybilna wstecz ;)
 https://make.wordpress.org/core/2015/04/29/wp-rest-api-version-2-0-beta-1/
  71. 71. 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/
  72. 72. Do odczytu świetne, do zapisu niekoniecznie ;-)
  73. 73. Problemy z protected meta 
 Nie można ustawić _thumbnail_id
  74. 74. Problemy z protected meta 
 Nie można ustawić _thumbnail_id
  75. 75. Problemy z protected meta 
 Nie można ustawić _thumbnail_id Pomaga: add_filter('is_protected_meta', '__return_false');
  76. 76. Brak wsparcia dla dodawania/edycji termsów
  77. 77. Brak wsparcia dla dodawania/edycji termsów Własne end-pointy na ratunek
  78. 78. Brak wsparcia dla definiowania własnych taksonomii przy tworzeniu wpisów
  79. 79. 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);
  80. 80. I paru innych rzeczy… http://wp-api.org/misc/comparison.html
  81. 81. Wydajność i cache
  82. 82. 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
  83. 83. Motyw jako SPA
  84. 84. Motyw-mapa
  85. 85. Motyw-mapa Prawie jak samochód-chłodnia ;-)
  86. 86. Co wykorzystać?
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. Handlebars http://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>
  92. 92. Handlebars http://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>
  93. 93. Handlebars http://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>
  94. 94. Inne
  95. 95. Inne • Google Maps API - bo musimy mieć jakieś mapy ;)
 https://developers.google.com/maps/documentation/javascript/tutorial • LocalStorage - do przechowywania filtrów • History API - aby mieć dostęp poprzez URL do konkretnych miejsc • Snazzy maps
 https://snazzymaps.com/ • Travel icon set
 http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
  96. 96. Inne • Google Maps API - bo musimy mieć jakieś mapy ;)
 https://developers.google.com/maps/documentation/javascript/tutorial • LocalStorage - do przechowywania filtrów • History API - aby mieć dostęp poprzez URL do konkretnych miejsc • Snazzy maps
 https://snazzymaps.com/ • Travel icon set
 http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
  97. 97. Inne • Google Maps API - bo musimy mieć jakieś mapy ;)
 https://developers.google.com/maps/documentation/javascript/tutorial • LocalStorage - do przechowywania filtrów • History API - aby mieć dostęp poprzez URL do konkretnych miejsc • Snazzy maps
 https://snazzymaps.com/ • Travel icon set
 http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
  98. 98. Inne • Google Maps API - bo musimy mieć jakieś mapy ;)
 https://developers.google.com/maps/documentation/javascript/tutorial • LocalStorage - do przechowywania filtrów • History API - aby mieć dostęp poprzez URL do konkretnych miejsc • Snazzy maps
 https://snazzymaps.com/ • Travel icon set
 http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
  99. 99. Inne • Google Maps API - bo musimy mieć jakieś mapy ;)
 https://developers.google.com/maps/documentation/javascript/tutorial • LocalStorage - do przechowywania filtrów • History API - aby mieć dostęp poprzez URL do konkretnych miejsc • Snazzy maps
 https://snazzymaps.com/ • Travel icon set
 http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/
  100. 100. Problemy?
  101. 101. Wprowadzanie pozycji elementów na mapie
  102. 102. Wprowadzanie pozycji elementów na mapie Wtyczka Pronamic Google Maps
 https://wordpress.org/plugins/pronamic-google-maps/
  103. 103. Wprowadzanie pozycji elementów na mapie Advanced Custom Fields
 https://wordpress.org/plugins/advanced-custom-fields/
  104. 104. Wprowadzanie pozycji elementów na mapie Advanced Custom Fields
 https://wordpress.org/plugins/advanced-custom-fields/ Warto pamiętać o zdefiniowaniu pól w motywie
 http://www.advancedcustomfields.com/resources/local-json/
  105. 105. Brak publicznego dostępu do post meta
  106. 106. Brak publicznego dostępu do post meta json_prepare_post rozwiąże ten problem
  107. 107. Duża liczba markerów
  108. 108. Duża liczba markerów • Marker Clusterer
 https://googlemaps.github.io/js-marker-clusterer/docs/examples.html • Gorsze przypadki omówimy później ;)
  109. 109. Duża liczba markerów • Marker Clusterer
 https://googlemaps.github.io/js-marker-clusterer/docs/examples.html • Gorsze przypadki omówimy później ;)
  110. 110. Wpis
  111. 111. Dane geolokalizacyjne
  112. 112. Kategoria Kategoria
  113. 113. Tagi
  114. 114. Adres
  115. 115. 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
  116. 116. 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
  117. 117. 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
  118. 118. 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
  119. 119. 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 );
  120. 120. 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 );
  121. 121. 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 );
  122. 122. Pobieranie danych $.ajax({ url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });
  123. 123. Pobieranie danych $.ajax({ url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });
  124. 124. Pobieranie danych $.ajax({ url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });
  125. 125. Pobieranie danych $.ajax({ method: ‘GET’, url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });
  126. 126. Pobieranie danych $.ajax({ method: ‘GET’, cache: false, url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });
  127. 127. Wyświetlanie popupu Dodawanie 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 );
  128. 128. Wyświetlanie popupu Dodawanie 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 );
  129. 129. Wyświetlanie popupu Dodawanie 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 );
  130. 130. Wyświetlanie popupu Dodawanie 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 );
  131. 131. Wyświetlanie popupu showPopup: 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); },
  132. 132. Wyświetlanie popupu showPopup: 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); },
  133. 133. Wyświetlanie popupu showPopup: 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); },
  134. 134. Wyświetlanie popupu showPopup: 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); },
  135. 135. Wyświetlanie popupu showPopup: 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); },
  136. 136. Wyświetlanie popupu showPopup: 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); },
  137. 137. Wyświetlanie popupu showPopup: 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); },
  138. 138. Wyświetlanie popupu showPopup: 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); },
  139. 139. Wyświetlanie popupu showPopup: 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); },
  140. 140. Wyświetlanie popupu showPopup: 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); },
  141. 141. Co dalej?
  142. 142. 1 wpis = 2-5kB 100 wpisów = ~200-500kB
  143. 143. 1 wpis = 2-5kB 100 wpisów = ~200-500kB
  144. 144. 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>
  145. 145. 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>
  146. 146. 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>
  147. 147. 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
  148. 148. 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
  149. 149. Dlaczego Dziudek ❤ WP-API ?
  150. 150. • 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ę :-)
  151. 151. • 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ę :-)
  152. 152. • 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ę :-)
  153. 153. • 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ę :-)
  154. 154. Kod przykładu: https://github.com/dziudek/theme-map
  155. 155. DEMO
  156. 156. 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
  157. 157. Tomasz Dziuda Lead Developer @ @dziudek http://dziudek.pl dziudek@gavick.com
  158. 158. Pytania?

×