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 Trójmiasto #2

703 views

Published on

Teoretyczne i praktyczne aspekty wykorzystania WP-API. Na przykładzie prostego motywu-mapy

Published in: Technology
  • Be the first to comment

WP-API - teoria i praktyka - WordUp Trójmiasto #2

  1. 1. WP-API teoria i praktyka Tomasz Dziuda WordUp Trójmiasto 23.V.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. Rozszerzenia przeglądarek zintegrowane z WordPressem
  52. 52. Usługi informacyjne
  53. 53. Kalendarz WordUpów
  54. 54. 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/

  55. 55. 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/

  56. 56. 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/

  57. 57. 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/

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

×