Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
KATHLEEN VIGNOS
@kathleencodes
WIREDandtheWPRESTAPI
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
THIRD PARTY? CUSTOM JSON?
SYNCH’ING? EXTERNAL? SPA?
LATEST NEWS?
? ??
? ? ?
NOPE.IN THE LOOP?
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
LATEST NEWS?
LATEST NEWS?
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example: Latest News
• WIRED module used
everywhere
• WP ...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
YES.
ELEMENTARY,
MY DEAR.
THIRD PARTY?
GET REQUEST
TO /PO...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example:
• include vendor js
• add outbrain data
attribut...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
var apiUrl = 'http://' + location.host + '/wp-json/wp/v2/...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
smart = (function() {
var mostRecent = function( target, ...
YES, WITH MY
CONDOLENCESCUSTOM JSON?
GET REQUEST
TO CUSTOM
ENDPOINT
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LAT...
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example:
• Custom endpoint
• Parse WP post content to
markdown
• Outpu...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
register_rest_route( 'apple-news/v2', '/post/(?P<post_id>...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Plugin ParserWP DB
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Plugin Parser Apple News Custom JSON
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Plugin Parser Apple News Custom JSON
{
"role":...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Preview
(simulators)
Apple News Custom JSON
YEP, WE CAN
AUTOMATE
THAT
SYNCH’ING?
POST REQUEST
TO CREATE
POSTS ON
PUBLISH HOOK
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXT...
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example: Betta Beta Data Getta
• Publish/update hook
• Make POST reque...
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example: Betta Beta Data Getta
• Validate request
• Make GET request v...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function __construct() {
add_action( 'wp_insert_po...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function make_request( $id, $object ) {
// example...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function __construct() {
add_action( 'init', array...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function get_data( $id, $object ) {
$data = array(...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function save_response_post( $id, $data ) {
$exist...
SURE, LET’S
GET CREATIVE!EXTERNAL?
POST REQUEST
TO CREATE
POSTS WITH
AUTH
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? S...
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example:
• Node application listens
for requests from Sla...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
WP DBNode Serverslack
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
var addPost = function(preparedMessage, authorID) {
retur...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function __construct() {
add_action( 'rest_api_ini...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function posts_callback( $request ) {
$posts = '';...
LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function get_liveblog_posts( $post_id ) {
$liveblo...
YES, BECAUSE
#NODEJSSPA?
JSON OBJECTS
#FTW!
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
Example: Homepage Curator (in the future)
• Dashboard: Rep...
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
THIRD PARTY? CUSTOM JSON?
SYNCH’ING? EXTERNAL? SPA?
LATEST NEWS?
NOPE. WELL, SORT OF.
YES, WITH MY
CONDOLENCES
YEP, WE CAN...
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
All Code Samples in this Gist:
http://bit.ly/day-of-rest-2016-kv
Slide...
KATHLEEN VIGNOS
@kathleencodes
THANKYOU!
WIRED and the WP REST API
Nächste SlideShare
Wird geladen in …5
×

von

WIRED and the WP REST API Slide 1 WIRED and the WP REST API Slide 2 WIRED and the WP REST API Slide 3 WIRED and the WP REST API Slide 4 WIRED and the WP REST API Slide 5 WIRED and the WP REST API Slide 6 WIRED and the WP REST API Slide 7 WIRED and the WP REST API Slide 8 WIRED and the WP REST API Slide 9 WIRED and the WP REST API Slide 10 WIRED and the WP REST API Slide 11 WIRED and the WP REST API Slide 12 WIRED and the WP REST API Slide 13 WIRED and the WP REST API Slide 14 WIRED and the WP REST API Slide 15 WIRED and the WP REST API Slide 16 WIRED and the WP REST API Slide 17 WIRED and the WP REST API Slide 18 WIRED and the WP REST API Slide 19 WIRED and the WP REST API Slide 20 WIRED and the WP REST API Slide 21 WIRED and the WP REST API Slide 22 WIRED and the WP REST API Slide 23 WIRED and the WP REST API Slide 24 WIRED and the WP REST API Slide 25 WIRED and the WP REST API Slide 26 WIRED and the WP REST API Slide 27 WIRED and the WP REST API Slide 28 WIRED and the WP REST API Slide 29 WIRED and the WP REST API Slide 30 WIRED and the WP REST API Slide 31 WIRED and the WP REST API Slide 32 WIRED and the WP REST API Slide 33 WIRED and the WP REST API Slide 34 WIRED and the WP REST API Slide 35 WIRED and the WP REST API Slide 36 WIRED and the WP REST API Slide 37 WIRED and the WP REST API Slide 38 WIRED and the WP REST API Slide 39 WIRED and the WP REST API Slide 40 WIRED and the WP REST API Slide 41 WIRED and the WP REST API Slide 42 WIRED and the WP REST API Slide 43
Nächste SlideShare
WordCamp Kansai 2014_All we really need to know we have learned from wordpress.
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

3 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

WIRED and the WP REST API

Herunterladen, um offline zu lesen

Six examples of where WIRED is, and is not, using the WP REST API.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

WIRED and the WP REST API

  1. 1. KATHLEEN VIGNOS @kathleencodes WIREDandtheWPRESTAPI
  2. 2. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
  3. 3. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
  4. 4. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
  5. 5. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? LATEST NEWS? ? ?? ? ? ?
  6. 6. NOPE.IN THE LOOP? IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? LATEST NEWS? LATEST NEWS?
  7. 7. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Example: Latest News • WIRED module used everywhere • WP REST API req’d additional HTTP request • needs deduping (sometimes) LATEST NEWS?
  8. 8. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? YES. ELEMENTARY, MY DEAR. THIRD PARTY? GET REQUEST TO /POSTS/ ENDPOINT WELL, SORT OF
  9. 9. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Example: • include vendor js • add outbrain data attributes • fallback: WP REST API
  10. 10. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? var apiUrl = 'http://' + location.host + '/wp-json/wp/v2/posts/'; // Fallback if OBR not available if ( typeof OBR === 'undefined' ) { $( getAll('poweredByOutbrain') ).remove(); return $.getJSON( apiUrl, function(res) { if ( elementId === 'we-recommend' ) { return smart.rec( get('we-recommend') ); } } }
  11. 11. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? smart = (function() { var mostRecent = function( target, apiUrl ) { function render( res ) { var frag = document.createDocumentFragment(); var data = res.slice( 0, 5 ); data.forEach(function( value, i ) { var currLi = document.createElement('li'); .... frag.appendChild( currLi ); }); return target.appendChild( frag ); } return $.getJSON( apiUrl, render ); }; return { rec: mostRecent }; }());
  12. 12. YES, WITH MY CONDOLENCESCUSTOM JSON? GET REQUEST TO CUSTOM ENDPOINT THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  13. 13. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Example: • Custom endpoint • Parse WP post content to markdown • Output in Apple Native Format LATEST NEWS?
  14. 14. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? register_rest_route( 'apple-news/v2', '/post/(?P<post_id>w+)', array( 'methods' => WP_REST_Server::READABLE, 'callback' => array( $this, 'rest_post_output' ), 'args' => array( 'bundle', 'images', 'template', ), ) );
  15. 15. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Apple News Plugin ParserWP DB
  16. 16. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Apple News Plugin Parser Apple News Custom JSON
  17. 17. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Apple News Plugin Parser Apple News Custom JSON { "role": "gallery", "layout": "carouselLayoutNoTop", "items": [ { "path": "http://www.wired.com/wp-content/uploads/2016/01/CES_07-NEW- NEW2.jpg", "URL": "bundle://CES_07-NEW-NEW2.jpg", "caption": "Drones as far as the eye can see." }, { "path": "http://www.wired.com/wp-content/uploads/2016/01/CES_11-NEW- NEW2.jpg", "URL": "bundle://CES_11-NEW-NEW2.jpg", "caption": "There are still some old-school immersion tactics. This attendee is sitting through a pre-programmed routine to lower his heart rate and help him feel more relaxed." } ] }
  18. 18. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Apple News Preview (simulators) Apple News Custom JSON
  19. 19. YEP, WE CAN AUTOMATE THAT SYNCH’ING? POST REQUEST TO CREATE POSTS ON PUBLISH HOOK THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  20. 20. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Example: Betta Beta Data Getta • Publish/update hook • Make POST request via WP REST API with post_id LIVE: www.wired.com BETA: beta.wired.com 1. data-push 1 LATEST NEWS?
  21. 21. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Example: Betta Beta Data Getta • Validate request • Make GET request via WP REST API for post_id • Create post LIVE: www.wired.com BETA: beta.wired.com 2. data-pull 2 LATEST NEWS?
  22. 22. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function __construct() { add_action( 'wp_insert_post', array( $this, 'notify_beta_site_post' ), 100, 3 ); } public function notify_beta_site_post( $post_id, $post, $update ) { $this->update_object( $post_id, 'post' ); } public function update_object( $post_id, $object ) { $this->make_request( $post_id, $object ); }
  23. 23. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function make_request( $id, $object ) { // example: 'http://beta.wired.com/?beta-push=1'; $request_url = $this->get_request_url(); $request_args = array( 'body' => array( 'id' => absint( $id ), 'object' => $object, ), 'headers' => array( 'api-key' => DATA_PUSH_API_KEY, 'api-secret' => DATA_PUSH_API_SECRET, ), 'blocking' => false, ); $result = wp_remote_post( $request_url, $request_args ); }
  24. 24. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function __construct() { add_action( 'init', array( $this, 'route_pull_request' ), 11 ); } public function route_pull_request() { if ( ! $this->validate_request() ) { return; } $id = $this->get_request_id(); $object = $this->get_request_object(); // ex: ‘post’ $data = $this->get_data( $id, 'post' ); $result = $this->save_response_post( $id, $data ); exit(); }
  25. 25. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function get_data( $id, $object ) { $data = array(); $request_url = get_request_url_post( $id ); // example: https://www.wired.com/wp-json/posts/1234567?context=edit $response = wp_remote_get( $request_url, array_merge( $args ) ); if ( 200 === (int) wp_remote_retrieve_response_code( $response ) ) { $body = json_decode( wp_remote_retrieve_body( $response ), true ); // Check to make sure the data looks right if ( isset( $body['ID'], $body['title'] ) ) { $data = $body; } } return $data; }
  26. 26. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function save_response_post( $id, $data ) { $existing_post = get_post( $id ); $prepared_data = $this->prepare_post_data( $data, $id ); if ( empty( $existing_post ) ) { $result = wp_insert_post( $prepared_data ); } else { $result = wp_update_post( $prepared_data ); } foreach ( $data['post_meta'] as $meta ) { // Note that this will break serialized meta data. Our meta data does not include serialized meta data. update_post_meta( $result, $meta['key'], $this->$meta['value'] ); } return $result; }
  27. 27. SURE, LET’S GET CREATIVE!EXTERNAL? POST REQUEST TO CREATE POSTS WITH AUTH THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  28. 28. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? Example: • Node application listens for requests from Slack • Bot invited to channel • Every comment or image creates a “liveblog update” post type via WP REST API • WP template w/ React updates content Liveblog
  29. 29. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? WP DBNode Serverslack
  30. 30. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
  31. 31. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? var addPost = function(preparedMessage, authorID) { return function() { // example wpAPIUrl: http://www.wired.com/wp-json/ request( extend( requestBase, { method: 'POST', uri: config.wpAPIUrl() + '/liveblog', body: { type: 'liveblog', status: 'publish', title: preparedMessage.ts, content: preparedMessage.text, author: authorID, featured_image: (preparedMessage.featuredImageID) ? preparedMessage.featuredImageID : 0 } } ...
  32. 32. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function __construct() { add_action( 'rest_api_init', array( $this, 'register_routes' ) ); } public function register_routes() { // example: http://www.wired.com/wp-json/wired/v2/liveblog/1949283/ posts/ // React script hits this endpoint to grab the post objects register_rest_route( 'wired/v2', '/liveblog/(?P<post_id>w+)/posts', array( 'methods' => WP_REST_Server::READABLE, 'callback' => array( $this, 'posts_callback' ), 'args' => array( 'post_id', ), ) ); }
  33. 33. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function posts_callback( $request ) { $posts = ''; $params = $request->get_params(); $post_id = ( isset( $params['post_id'] ) ) ? absint( $params['post_id'] ) : 0; $posts = array( 'version' => time(), 'posts' => $this->get_liveblog_posts( $post_id ) ); return $posts; }
  34. 34. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? public function get_liveblog_posts( $post_id ) { $liveblog_meta = get_post_meta( $post_id, '_liveblog', true ); $query = new WP_Query( array( 'posts_per_page' => 500, 'post_type' => array( wired_get_liveblog_post()->post_type ), 'tax_query' => array( array( 'taxonomy' => wired_get_liveblog_post()->taxonomy, 'field' => 'name', 'terms' => $liveblog_meta['slack-channel-name'], )) ) ); if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); $clean_posts[] = array( 'id' => get_the_ID(), ... ); }} wp_reset_postdata(); return $clean_posts; }
  35. 35. YES, BECAUSE #NODEJSSPA? JSON OBJECTS #FTW! THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  36. 36. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS? Example: Homepage Curator (in the future) • Dashboard: Replace WP posts admin table ajax with SPA using React components • Create custom WP REST API endpoint for homepage and all section fronts • Front end: Build homepage and section fronts with React components • Ability to swipe from section to section without reload
  37. 37. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  38. 38. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  39. 39. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
  40. 40. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? LATEST NEWS? NOPE. WELL, SORT OF. YES, WITH MY CONDOLENCES YEP, WE CAN AUTOMATE THAT SURE, LET’S GET CREATIVE! YES, BECAUSE #NODEJS
  41. 41. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA? All Code Samples in this Gist: http://bit.ly/day-of-rest-2016-kv Slides: http://www.slideshare.net/kvignos/wired-and-the-wp-rest-api LATEST NEWS?
  42. 42. KATHLEEN VIGNOS @kathleencodes THANKYOU!
  • chuckreynolds

    May. 1, 2017
  • ixneonxi

    Mar. 9, 2016
  • EdouardDuplessis1

    Feb. 9, 2016

Six examples of where WIRED is, and is not, using the WP REST API.

Aufrufe

Aufrufe insgesamt

5.247

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

80

Befehle

Downloads

13

Geteilt

0

Kommentare

0

Likes

3

×