API REST di WordPress: la funzionalità CMS di nuova generazione

Più di un quarto del web gira su WordPress. È un'impresa piuttosto notevole, considerando che esiste da più di un decennio, il che lo rende abbastanza vecchio negli anni della tecnologia.

Qual è la salsa segreta di WordPress? Facile: è il modo più semplice ma più estensibile per gestire i tuoi contenuti. Tuttavia, per un po', WordPress sembrava essere rimasto indietro.

Poiché il Web è diventato sempre più dipendente da JavaScript per creare esperienze coinvolgenti e interattive, è diventato sempre più chiaro che WordPress avrebbe dovuto offrire nuovi modi per utenti e sviluppatori di interagire con i loro contenuti.

Mentre WordPress è basato su PHP, e continuerà ad esserlo, l'API REST di WP è un tentativo di creare un ponte tra l'eredità del core WordPress di PHP e il potenziale e la potenza delle applicazioni Web JavaScript, nonché dei dispositivi mobili nativi e applicazioni desktop.

L'API REST di WordPress porta il contenuto di qualsiasi sito Web WordPress in un'API di facile utilizzo, consentendo a WordPress di fungere da sistema di archiviazione e recupero per la pubblicazione di contenuti sul Web.

Portare l'API REST su WordPress

Se pensi che l'API REST di WP sia spuntata dal nulla, ti sbagli.

Aggiungere una funzionalità completamente nuova a WordPress non è un compito semplice. Per natura di software open source, lo sviluppo di WordPress dipende dalla comunità in generale per fare progressi.

Lo sviluppo dell'API è iniziato alcuni anni fa come plug-in di funzionalità separato, che ha consentito agli sviluppatori di sperimentare e contribuire al progetto in un ambiente controllato.

Attraverso molte iterazioni e miglioramenti e due versioni completamente separate, i contributori dietro l'API REST hanno dovuto testare e valutare i vantaggi e le enormi conseguenze di fornire un accesso API aperto ai dati su decine di milioni di siti Web.

WordPress 4.4, nome in codice "Clifford", ha portato l'infrastruttura iniziale del progetto nel core di WordPress, mentre gli endpoint non sono apparsi fino a WordPress 4.7, "Vaughan".

In sostanza, ciò ha concesso agli sviluppatori il tempo di testare la funzionalità che alimenta l'API senza effettivamente esporre i dati stessi.

Ora che gli endpoint di contenuto iniziali sono stati uniti a tutte le versioni correnti di WordPress, gli sviluppatori di plugin e gli autori di temi possono sperimentare nuovi modi entusiasmanti per recuperare, visualizzare e modificare i dati al di fuori della tradizionale esperienza wp-admin.

Rompere le abbreviazioni: da HTTP a un'API REST JSON

Per comprendere il significato dell'API REST di WP, può aiutare a comprendere le basi di come condividiamo i dati online e dove potrebbe essere diretto Internet.

HTTP è la base per la maggior parte del traffico web con cui ci occupiamo quotidianamente. Se digiti un URL in un browser, stai facendo una richiesta . Il server corrispondente riceve la tua richiesta e fornisce una risposta . Questa transazione è la base per quasi tutto ciò che facciamo online. I browser effettuano richieste e i server forniscono risposte.

Il tipo di richiesta che facciamo può influenzare il tipo di risposta che riceviamo. La maggior parte delle volte, facciamo una semplice richiesta GET : "Ehi Google, Fammi trovare la tua pagina di destinazione". Google fornisce una risposta.

Man mano che il Web è diventato più interattivo, abbiamo iniziato a sfruttare altre richieste HTTP, tra cui PUT , POST e DELETE .

Ad esempio, compiliamo una barra di ricerca su un sito Web: "Ehi Google, POSTA il mio indirizzo e-mail e la mia password nella pagina di accesso". Google inizia una nuova sessione per noi e fornisce una risposta diversa.

Questo protocollo è la base di base su cui costruiamo i nostri siti WordPress.

Utilizziamo moduli e PHP per OTTENERE e POSTARE i dati nel nostro database. Contrariamente all'opinione popolare, questa base alla base di WordPress non cambierà presto. Tutto ciò che WordPress sta facendo ora è fornire agli sviluppatori un nuovo modo di interagire con i loro dati WordPress tramite un'API RESTful.

Trasferimento dello stato rappresentativo (REST)

Gli sviluppatori di WordPress dovrebbero avere familiarità con le API in generale, come l'API Shortcode e l'API Options. Queste API definiscono la funzionalità per i componenti che compongono WordPress, in modo che gli autori di temi e plugin possano espandere le capacità principali di WordPress. L'API REST di WP, tuttavia, è leggermente diversa.

Un'API REST , o RESTful, riguarda l'esposizione sicura dei dati a richieste HTTP da origini esterne. Si tratta anche di impostare un'architettura comune e un insieme di protocolli per rispondere a tali richieste. Sebbene ci siano idee e principi più avanzati alla base di questo tipo di servizio, questi vanno oltre lo scopo di questo articolo.

L'esistenza dell'API REST di WP, in particolare dopo WordPress 4.7, significa che tutto il contenuto del tuo sito, inclusi post, pagine, commenti e qualsiasi meta di post pubblico, è ora direttamente accessibile come dati grezzi. Significa anche che puoi apportare modifiche a questi dati al di fuori della tradizione wp-admin se lo desideri, magari tramite un'app mobile o desktop.

Invece di pensare ai tuoi dati come semplici righe in un database, ora puoi avere accesso serializzato ad essi sotto forma di JSON.

JSON - Che fine ha fatto XML?

I veterani di WordPress hanno molta esperienza con XML, un formato comune per la condivisione di contenuti tra i siti.

Simile a XML, JSON è semplicemente un meccanismo che ci consente di trasferire facilmente i dati raggruppandoli in una sintassi specifica. JSON è in realtà una stringa, una rappresentazione testuale di un oggetto JavaScript, che memorizza i tuoi dati in una serie di coppie chiave-valore. Una rappresentazione JSON comune di un post di WordPress potrebbe assomigliare a questa:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Puoi utilizzare uno strumento di formattazione JSON per abbellire la risposta JSON, se necessario.)

Una risposta JSON completa tramite l'API REST di WP includerà informazioni aggiuntive sul post, inclusi i metadati. Raggruppando comodamente questi dati nel formato JSON, puoi interagire con i tuoi contenuti WordPress in modi nuovi ed entusiasmanti.

Non è un caso che JSON sia meglio abbinato a JavaScript. Man mano che sempre più sviluppatori di WordPress inizieranno a "Imparare JavaScript in modo approfondito", vedremo usi sempre più avanzati di WordPress come back-end.

Come troviamo i dati: segui il percorso verso un endpoint

Accedere a tutti i dati del tuo sito tramite l'API REST è semplice come comporre un URL.

Per qualsiasi sito WordPress che esegue almeno la versione 4.7, aggiungi la seguente stringa alla fine dell'URL del tuo sito: /wp-json/wp/v2 (ad esempio, http://example.com/wp-json/wp/v2 ). Inserisci quell'URL nel tuo browser e guarda cosa viene fuori.

Il risultato probabilmente sembra un grande pasticcio di dati, a meno che tu non abbia installato un'estensione del browser che pulisca JSON. Quel grande pasticcio di dati è il contenuto e le meta informazioni del tuo particolare sito WordPress in formato JSON.

Caricando quel contenuto, hai appena definito un percorso e hai chiesto al tuo browser di OTTENERLO per te.

Una route è un URL mappato a un metodo specifico. Il core di WordPress legge quel percorso, con ogni barra '/' che rappresenta un particolare percorso , o parametro, che dovrebbe essere seguito.

Il percorso si conclude in un punto finale , dove le funzioni all'interno del core di WordPress possono prendere decisioni su quali dati fornire e cosa fare con i dati forniti.

Un esempio di endpoint potrebbe essere '/wp-json/wp/v2/posts/1', dove abbiamo aggiunto i percorsi '/posts' e '/1'. Questo particolare endpoint indica al nostro sito di esaminare i nostri dati, recuperare i nostri post e recuperare il post con l'ID 1.

Ciò che rende l'API REST così utile è il fatto che è estensibile, il che significa che puoi prendere qualsiasi dato all'interno del tuo sito Web e aggiungerlo come endpoint. La maggior parte delle funzionalità principali di WordPress è attualmente (o presto sarà) supportata.

Tuttavia, gli sviluppatori di temi e plug-in possono iniziare ad aggiungere i propri contenuti e impostazioni personalizzati come endpoint, consentendo agli utenti di interagire con i propri siti Web in modi nuovi.

Se sei curioso degli endpoint attualmente disponibili sul tuo sito WordPress, un'applicazione browser come Postman fornisce una GUI specifica per esplorare le API.

Intestazioni e autenticazione

La digitazione degli endpoint URL nel browser sembra semplice, ma in realtà include una serie di intestazioni predefinite insieme alla richiesta. A sua volta, una serie di intestazioni viene restituita anche con la risposta. Queste intestazioni includono molte informazioni utili, ma le più importanti per i nostri scopi hanno a che fare con il tipo di richiesta che stiamo facendo e se siamo autenticati o meno.

Se passi agli "strumenti per sviluppatori" del tuo browser, puoi esaminare le intestazioni HTTP per qualsiasi risorsa caricata nella finestra del browser, inclusi file HTML, fogli di stile CSS, immagini e altro.

Il primo header da considerare è il Request Method , che corrisponde direttamente a quelle richieste HTTP di cui abbiamo appreso in precedenza. Qui molto probabilmente vedrai GET come metodo di richiesta, se stiamo semplicemente visualizzando una pagina.

Un'applicazione che chiama l'API REST può scegliere di modificare il metodo di richiesta dell'intestazione in POST.

Un metodo POST dice al tuo sito web di inserire nuovi dati o modificare i dati esistenti nel tuo database WordPress. Inviando informazioni tramite il metodo POST, altre applicazioni hanno la possibilità di modificare i tuoi dati, senza accedere a wp-admin.

Non c'è bisogno di preoccuparsi, tuttavia, perché a meno che non abbiano incluso anche intestazioni che forniscono le credenziali appropriate per l'autenticazione , il tuo sito Web le rifiuterà.

NOTA: i metodi per l'autenticazione delle chiamate all'API REST non sono ancora finalizzati, il che rende l'autenticazione la più grande barriera all'ingresso per gli sviluppatori che desiderano lavorare con l'API REST per aggiungere o modificare dati.

Per ora, ci sono opzioni disponibili, incluso un plug-in degli sviluppatori dietro l'API REST. Poiché le procedure standard relative all'autenticazione si fanno strada nel core, gli ultimi ostacoli saranno chiari per un uso diffuso dell'API REST di WP.

Applicazione di esempio WP REST API

Ciò che rende l'API REST di WP così potente è il fatto che è coerente, quindi possiamo aspettarci gli stessi risultati di base da qualsiasi sito che esegue WordPress 4.7 o versioni successive. Tuttavia, WordPress è un'API distribuita, il che significa che non c'è un solo posto da cui ottenere tutti i dati.

Ogni sito Web che esegue WordPress è un'applicazione unica, con utenti e autenticazione unici. Sebbene possa richiedere tecniche di autorizzazione distinte per modificare i contenuti tramite l'API REST, possiamo effettivamente accedere ai post della maggior parte dei blog gestiti da WordPress abbastanza facilmente.

Per dimostrare, faremo una rapida demo di codepen che carica estratti degli ultimi post da alcuni blog popolari relativi a WordPress che, ovviamente, funzionano tutti su WordPress. Già che ci siamo, includeremo un modulo di ricerca, in modo che possiamo effettivamente cercare tutti questi siti contemporaneamente e estrarre gli articoli pertinenti da ciascuno.

Infine, ci assicureremo di includere il collegamento per leggere il testo completo dell'articolo sul sito Web originale.

Fase 1: ottenere post recenti

Inizieremo configurando un'istanza Vue rapida e montandola su un elemento. Includeremo anche Bootstrap in modo da poter avere una griglia e uno stile di base sugli elementi del modulo che aggiungeremo in seguito.

Quando definiamo i dati, vorremo un posto in cui archiviare il nome del sito (che non è incluso nella risposta predefinita), l'URL e i post una volta ottenuti. Ecco un esempio:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Noterai che abbiamo incluso anche il nostro primo parametro alla fine dell'URL, per_page . In genere, l'API REST di WP impagina i risultati seguendo le stesse regole che impagina un normale ciclo WP_Query. Limiteremo le nostre domande ai primi tre post.

Successivamente, definiremo il metodo loadPosts() , che scorrerà il nostro elenco di fonti, otterrà i risultati con vue-resource e popolerà l'array di posts vuoti di ciascuna fonte con i risultati.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Includeremo anche una chiamata iniziale a loadPosts() quando la nostra istanza Vue sarà montata correttamente.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Mantenere loadPosts() come metodo separato tornerà utile in futuro quando inizieremo a effettuare più chiamate all'API. Nel nostro HTML, utilizzeremo le semplici direttive di rendering dell'elenco di Vue e la sintassi del modello per generare tutti i nostri post.

Guarda la penna incorporata per una demo funzionante:

Vedi l'esempio di ricerca dell'API REST di Pen WP (Phase One) di Brian Coords (@bacoords) su CodePen.

Fase 2: filtraggio dei risultati

Aggiungiamo una barra laterale e creiamo dei filtri per mostrare/nascondere le varie sorgenti. Per fare ciò, aggiungiamo una nuova proprietà all'oggetto sources , un booleano che chiameremo .

Mentre aggiungiamo filtri, generiamo un filtro Vue per aiutarci a visualizzare correttamente anche la data. WordPress memorizza la data e l'ora del post come timestamp Unix.

Useremo la libreria di terze parti Moment.js per convertire la data in un formato più leggibile.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Guarda la penna incorporata per una demo funzionante:

Vedi l'esempio di ricerca dell'API REST di Pen WP (Phase One) di Brian Coords (@bacoords) su CodePen.

Fase finale: query di ricerca

Qui aggiungeremo un nuovo parametro alla nostra richiesta API. Abbiamo già aggiunto il parametro per_page=3 per limitare il numero di risultati che otteniamo da ciascun sito. Se c'è qualcosa scritto nella barra di ricerca, lo aggiungeremo come parametro aggiuntivo.

Questo ci consentirà di utilizzare la funzionalità di ricerca integrata di ogni sito, proprio come se stessimo interrogando la barra di ricerca su quel sito web.

Aggiungeremo una barra di ricerca e la legheremo a una variabile usando la direttiva v-model di Vue.

Invece di chiamare immediatamente tutte le API, quando l'utente inizia a digitare, aggiungeremo un pulsante e legheremo un evento all'invio del modulo. Quindi aggiungeremo un metodo alla nostra istanza Vue che aggiunge i parametri di ricerca (codificati con URL, ovviamente) all'URL.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Guarda la penna incorporata per una demo funzionante:

Vedi l'esempio di ricerca dell'API REST di Pen WP (Phase One) di Brian Coords (@bacoords) su CodePen.

Sebbene questo sia un semplice esempio dell'API REST di WP, potremmo immaginare una potenziale applicazione per qualcosa del genere all'interno di WordPress stesso. Ad esempio, esiste già il metabox "Notizie WordPress".

Potremmo facilmente trasformare questa demo in un plugin per WordPress, visualizzandolo sulla dashboard di WordPress. Ora abbiamo integrato la possibilità di cercare aiuto da alcuni dei migliori siti di tutorial di WordPress e web design direttamente dal nostro sito web.

Potenziale futuro dell'API REST

Sebbene l'esempio sopra scalfi solo la superficie delle capacità dell'API REST di WP, dovrebbe trasmettere alcune delle possibilità che iniziano a emergere quando inizi a giocare con i dati. Che venga utilizzato per migliorare l'esperienza dell'utente sul sito Web stesso o per raccogliere e manipolare i dati da una fonte esterna, è uno strumento potente.

Mentre alcuni esperti del settore hanno espresso preoccupazioni sulla possibilità che i tuoi contenuti vengano "raschiati" e visualizzati altrove, è importante ricordare che questa funzionalità è simile ai feed RSS ed è fondamentale per i gestori del sito avere un chiaro controllo di quali dati sono e sono non pubblico.

Man mano che l'API REST di WP diventa più radicata nel tessuto di WordPress, inizieremo a vederne gli effetti, forse senza nemmeno rendercene conto. Gli esempi hanno spaziato da semplici (Chris Coyier's Quotes on Design), a complesse applicazioni a pagina singola (sito Guggenheim).

Un altro caso d'uso popolare per l'API REST di WP è lo sviluppo di applicazioni mobili.

Poiché il contenuto è così accessibile tramite l'API REST, gli sviluppatori possono creare app native per iOS e Android ed evitare di dover creare origini dati duplicate.

Man mano che gli utenti interagiscono con queste app mobili, saranno in grado di recuperare e trasformare direttamente i dati del sito Web originale, senza che lo sviluppatore debba creare alcuna infrastruttura complessa per supportarlo.

Tuttavia, queste applicazioni rivolte ai visitatori dell'API REST sono solo l'inizio, poiché le vere implicazioni sono molto più profonde. Uno degli obiettivi per il team di sviluppo principale è iniziare a usarlo nell'interfaccia wp-admin.

Con i futuri aggiornamenti di WordPress, inizieremo a vedere admin-ajax sostituito a favore dell'API, si spera aumentando la velocità delle funzioni di base, come la modifica dei menu o la pubblicazione di post.

Questo potrebbe potenzialmente andare di pari passo con la maggiore attenzione di WordPress sul Customizer e l'Editor come punti di partenza facili da usare per i principianti di WordPress.

Sebbene l'API REST di WP sia estremamente utile così com'è, c'è ancora molto da fare. L'API non è completa. Ci sono ancora più funzionalità ed endpoint da aggiungere.

Alla fine, sarai in grado di interagire con il tuo sito WordPress senza nemmeno visitarlo. E mentre molti servizi ora utilizzano API personalizzate per interagire con WordPress, il passaggio a un'API REST di WordPress standard significa che più siti e servizi possono interconnettersi, parlando la stessa lingua.

WordPress è nato come piattaforma di blogging, un modo per i blogger di connettersi e condividere i propri pensieri e idee. Con lo sviluppo dell'API REST di WordPress, inizieremo a vedere un nuovo livello di connessione e condivisione dietro le quinte. Ciò consentirà agli utenti di costruire sui propri pensieri e idee in modi mai considerati in precedenza, portando WordPress e i suoi utenti verso frontiere completamente nuove.