Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WP REST API, And the REST is simple - Reuven Karasik

WP REST API, And the REST is simple - Reuven Karasik

נדבר על שימת דגש לפריימווקרים של front end בסביבת וורדפרס – למשל, איך להשתמש בREST API של וורדפרס כדי ליצור תבנית one page באמצעות Angular.js. זה נושא מעניין שיכול לשפר מהירות טעינה ושימוש בהרבה אתרי וורדפרס, ומאפשר למפתחי פרונט אנד להמנע מהצורך ללמוד שפה חדשה (PHP) וללמוד פיתוח וורדפרס (על כל הפונקציות השונות, הוקים וכו') אלא להתמקד בפיתוח והעיצוב בתחומים שבהם הם טובים.

A8aeb5f617d6089ba16348881905b54e?s=128

WordCamp Israel

March 28, 2016
Tweet

More Decks by WordCamp Israel

Other Decks in Programming

Transcript

  1. WP REST API And the REST is simple* Reuven Karasik

    *This pun is good because it’s so bad.
  2. Who am I? • Reuven Karasik • Learned HTML when

    I was 7 • Using WordPress since version ~ 3 • An entrepreneur, leading Made in Jerusalem’s Youth Community • Lead Front End developer for Chiprix and Crayze • Don’t really go to school • Just turned 16
  3. Technologies

  4. What is the WordPress RESTful API?

  5. The WordPress Loop in PHP

  6. The ng-repeat loop with Angular

  7. Why REST and not the rest?* *I’m really sorry, I

    can’t help it. Maybe I need some rest. • Cleaner Code • Faster Page Loads • Automatic Filters • No PHP knowledge needed • Angular is awesome
  8. What is the WordPress RESTful API?

  9. What is the WordPress RESTful API?

  10. What is the WordPress RESTful API?

  11. When AngularJS kicks in

  12. Let’s get coding! 1. Simple WordPress theme with static HTML

    2. Include AngularJS and create the app 3. Use $http.get() to get all the posts 4. Turn the static HTML into ng-repeat loop 5. Make some static content become dynamic 6. Add a thumbnail with a PHP trick 7. Add HTML Sanitization
  13. Steps forward: 1. Add navigation, different pages with ng-route 2.

    URLs and permalinks 3. 404 and other error pages 4. Working with Custom Post Types, Custom Fields etc. 5. Learn Angular 2.0!
  14. Resources: • http://v2.wp-api.org/ - Official Documentation • https://1fix.io/angularjs-wp-rest-api/ - Amazing

    Tutorials • http://goo.gl/2y27I4 - Tuts+ Introduction Article • http://github.com/kinging123/tardis - Full Code From Today • https://github.com/1fixdotio/angularjs-demo-theme/ - Ready Theme
  15. Thanks for listening! Any questions?

  16. Reuven Karasik
 iThink@reuven.rocks
 Friend me on Facebook!