Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Isotope,
WP REST API,
and AJAX
oh my!
An example in the wild...
About me:
Name:
Austin Gil
Work:
Visceral (https://thisisvisceral.com)
“We craft brands and experiences for the
world’s le...
Recent Project Using Rest API
Healthy Newborn Network - http://www.healthynewbornnetwork.org/
Process:
1. get_posts() shows initial posts and sets up array of IDs for posts to load.
2. Create gallery markup using Iso...
The toolbox:
Not necessary to know, but helpful for understanding.
Isotope - http://isotope.metafizzy.co/
WP REST API - ht...
get_posts()
Isotope markup
WP REST API
Default location:
/wp-json/wp/v2/posts
https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts
Add WP Query fil...
AJAX
Gotchas...
Doesn’t support certain fields
Featured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default. Going to /wp-json/wp/v2/custom-post-type did
not work.
Must be enabled when re...
Why not wp_ajax()...?
So why all the fuss…?
REST API makes it possible to build a separate application and
access data in a WP site.
That means we can build with any ...
Useful Tools:
console.log(allTheThings)
JSON browser extension - Chrome JSONView
https://chrome.google.com/webstore/detail...
Prochain SlideShare
Chargement dans…5
×

Isotope, WP REST API, and AJAX...Oh my!

728 vues

Publié le

Visceral recently launch a project for the Healthy Newborn Network which utilizes the WP REST API to find a load posts on the homepage. This presentation was prepared by lead developer, Austin Gil, for the Advanced WordPress San Diego meetup.

The presentation covers the requirements for the project, the approach, a simplified example of the source code, the challenges faced, and solutions.

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Isotope, WP REST API, and AJAX...Oh my!

  1. 1. Isotope, WP REST API, and AJAX oh my! An example in the wild...
  2. 2. About me: Name: Austin Gil Work: Visceral (https://thisisvisceral.com) “We craft brands and experiences for the world’s leading causes” Position: Lead Developer WP Experience: 3 years
  3. 3. Recent Project Using Rest API Healthy Newborn Network - http://www.healthynewbornnetwork.org/
  4. 4. Process: 1. get_posts() shows initial posts and sets up array of IDs for posts to load. 2. Create gallery markup using Isotope for animations and filters. 3. When a filter is clicked, WP REST API sets up post objects based on IDs 4. AJAX takes the data from the REST API and loads it
  5. 5. The toolbox: Not necessary to know, but helpful for understanding. Isotope - http://isotope.metafizzy.co/ WP REST API - http://v2.wp-api.org/ jQuery AJAX - http://api.jquery.com/jquery.ajax/
  6. 6. get_posts()
  7. 7. Isotope markup
  8. 8. WP REST API Default location: /wp-json/wp/v2/posts https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts Add WP Query filters such as posts_per_page: ?filter[posts_per_page]=1 https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts?filter[posts_per_page]=1
  9. 9. AJAX
  10. 10. Gotchas...
  11. 11. Doesn’t support certain fields Featured image Author details Advanced Custom Fields
  12. 12. Custom post types Not supported by default. Going to /wp-json/wp/v2/custom-post-type did not work. Must be enabled when registering post types. Apply filters with “rest_prepare_(your post type)”
  13. 13. Why not wp_ajax()...?
  14. 14. So why all the fuss…?
  15. 15. REST API makes it possible to build a separate application and access data in a WP site. That means we can build with any language: PHP, Ruby, Python, Node, Angular, React.... ...even static HTML http://localhost/restwp/index.html
  16. 16. Useful Tools: console.log(allTheThings) JSON browser extension - Chrome JSONView https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihc kbnefhakgolnmc?hl=en

×