Accendi un blog usando l'API di WordPress

Negli ultimi anni, lo sviluppo di un API di riposo per WordPress ha aperto nuove porte per gli sviluppatori. Gli sviluppatori che in precedenza erano stati limitati alla scrittura di un progetto wordpress-alimentato in PHP ora hanno più flessibilità e controllo nel modo in cui possono avvicinarsi alla pila tecnologica del loro sito web.

Ciò significa che è possibile conservare tutti i vantaggi del brillante Pannello di controllo WordPress, che è reso estremamente flessibile per popolare Plugin di wordpress. Come i campi personalizzati avanzati e hanno un frontone completamente personalizzato che interagisce solo con WordPress quando deve.

• Scarica i file tutorial

In questo Tutorial di WordPress. Esploreremo come implementare l'API di WordPress REST in una semplice app Blog, che sta attualmente utilizzando un file JSON locale come origine dati, ed è costruito come applicazione a pagine (SPA) utilizzando il popolare framework JavaScript Vue.js. . Ciò comporterà l'implementazione di VUEX, che utilizzerà per memorizzare i dati che richiediamo da un wordpress utilizzando una combinazione dei suoi metodi di azione e mutazione.

Una volta completato, avresti dovuto creare un centro termale magro, semplice, che ha tutta la reattività di VUE.JS, durante la visualizzazione di messaggi recuperati e gestiti da WordPress.

Per le più fantastiche API da esplorare, dai un'occhiata alle nostre guide al meglio JavaScript Apis. , APITORE HTML e Google Apis. .

01. Configurare l'area di lavoro e le dipendenze

Prima cosa prima, dovresti Scarica i file del progetto E aprili nel tuo editor preferito.

Nella console, CD in Modello di sito Web ed esegui il comando qui sotto per installare le dipendenze del nodo del progetto (se non si dispone di nodo installato, fallo prima ). Lavoreremo puramente nel src. directory da qui fuori.

npm install

02. Installa Vuex.

Quindi, usando il comando qui sotto, installeremo Vuex. , che è un modello di gestione dello stato e una biblioteca per applicazioni VUE.JS. Ciò fungerà da un archivio di informazioni centrali per tutti i componenti VUE che dipendono dai dati che riceviamo dall'API di WordPress. Per gli sviluppatori che hanno familiarità con reagire, VUEX è pesantemente ispirato dal flusso.

npm install vuex --save

03. Start Sviluppo Server

Nella console, eseguire il comando qui sotto per avviare il server di sviluppo. Ciò compilerà il progetto VUE.JS in quanto attualmente supporta e assegnalo a un URL in modo da poterlo accedere. Questo di solito è localhost: 8080. .

Un grande vantaggio Questo porta è in diretta di ricarica, quindi una volta apportate modifiche all'app e salva, la pagina nel tuo browser si aggiornerà senza la necessità di ricaricare manualmente.

npm run dev

04. Creare Vuex Store

Nel src. , crea una directory chiamata negozio e al suo interno un nuovo file chiamato index.js. . Questo sarà il punto in cui verrà definito il nostro negozio VUEX. Sebbene prima di arrivare, dobbiamo prima assicurarci che la nostra app vue.js sia consapevole della sua esistenza. Per fare questo, aperto main.js. e importare il negozio e includerlo come dipendenza, come nello snippet qui sotto.

 Importa VUE da 'VUE'
Importa app da './app'
Importa router da './router'
Import Store da './store'
Vue.config.productiontip = falso.
/ * ESLINT-Disabilita No-new * /
Nuova vue ({
  EL: '#App',
  router,
  negozio,
  Modello: '& lt; app / & gt;',
  Componenti: {app}
}) 

05. Creare Store Scaffolding e installa Axios

Per aiutarci a semplificare le richieste Ajax, il nostro negozio farà un'API WordPress, installeremo Axios, che è un client HTTP basato su promesse. Per fare ciò, aprire una finestra di console separata, naviga verso il Modello di sito Web directory e corsa NPM Installa Axios - Salva .

Quindi, iniziamo a scaffold il negozio istanziando un nuovo oggetto vuoto del negozio Vuex. Al momento, non sta facendo nulla, ma almeno Vue dovrebbe esserne consapevole.

 Importa Axios da 'Axios'
Importa Vue da 'VUE'
Importa Vuex da 'Vuex'
VUE.USE (VUEX)
Const Store = New Vuex.store ({
  Stato: {},
  Azioni: {},
  Mutazioni: {}
})
Esporta il negozio predefinito 

06. Creare messaggi stato

In VUEX, l'oggetto STATO contiene informazioni applicative, che in questo caso saranno i dati di WordPress Post che afferreremo l'API. All'interno di questo oggetto, crea una nuova proprietà chiamata post e assegnalo un valore di NULL.

 Stato: {
  Post: null.
} 

07. Creare l'azione di gettpost

In VUEX, le azioni sono il modo principale in cui vengono gestite le richieste asincroni. Questi sono tipicamente metodi definiti nel negozio, che possono quindi essere spediti come richiesto dall'app.

Nel vuoto Azioni Oggetto, definiamo uno in cui se il nostro stato dei post è ancora nullo, Axios viene utilizzato per eseguire una richiesta AJAX all'API di WordPress e restituire un elenco di post. Una volta ricevuto una risposta positiva, risolveremo quindi la promessa e commettere i post usando il storeposts. mutazione.

 GetPosts: funzione (contesto) {
  restituire la nuova promessa ((risoluzione, rifiutare) = & gt; {
  if (context.state.posts) {
  risolvere()
  }
  altro {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Post ')
  .then ((risposta) = & gt; {
  Context.comMit ('Storepost',
  Risposta.Data)
  risolvere()
  }). Catch ((Errore) = & GT; {
  rifiutare (errore);
  }););
  }
  })
} 

08. Creare mutazione storepost

Un altro concetto introdotto da Vuex è mutazioni, che sono anche in genere metodi definiti nel negozio. Le mutazioni sono l'unico modo per cambiare stato in un negozio VUEX, che consente allo stato di essere facilmente monitorato durante il debug.

Nel vuoto mutazioni oggetto, definiamo il storeposts. Metodo che ci referenziati nel passaggio precedente e rendiamo scavalcando la proprietà Post nell'oggetto statale con qualsiasi dato che la mutazione riceve come carico utile.

 Storepost (stato, risposta) {
   stato.posts = risposta} 

09. Trigger GetPosts Azione sul carico

Abbiamo creato i metodi di azione e mutazione che afferrano i post da WordPress API e li impegnano in VUEX, ma ora dobbiamo innescare questo processo da qualche parte. Nel componente VUE.JS di alto livello App.VUE. , aggiungi lo snippet qui sotto.

creato() è un gancio per il ciclo di vita che attiva il codice non appena il componente Vue viene creato sul carico, mentre l'uso del globale $ Store. La variabile ci consente di accedere al contenuto del nostro negozio VUEX e spedire il gettposts. Azione dal punto 7.

 creato () {
   Questo. $ store.dispatch ('getpost')} 

10. Aggiorna percorsi attributi

Se stai lavorando in cromo o firefox e hai il Vue.js devtools estensione. (Se no, consiglio di farlo come è molto utile), ora dovresti essere in grado di vedere i post di WordPress caricati in Stato di base sotto il Vuex. scheda.

Torna all'app, in /components/posts/posts.vue. , il modello HTML ha bisogno di puntare a questi dati, quindi modiziano alcuni dei percorsi di attributo.

 Switch 'Post.Title' a 'Post.Title.Rendered'
 Switch 'Post.Preview' to 'Post.acf.Preview'
 Switch 'post.previewimage' to 'Post.acf.header_Image_small' 

11. Aggiorna V-for Loop

Nel componente dei post, c'è una direttiva VUE.JS in uso chiamata V-per. . Questo anello attraverso tutti i post e per ognuno stampa un'istanza del componente Post, visualizzandole in un elenco.

Dobbiamo aggiornare il percorso passato a questa direttiva in quanto sta ancora utilizzando i dati del test fittizio locale. Aggiorna il V-per la direttiva allo snippet qui sotto per puntare ai nostri messaggi memorizzati nel negozio VUEX.

 V-for = "Posta in questo. $ STORE.STATE.POSTS" 

12. Fai un po 'di pulizia

Ora è necessario visualizzare un elenco dei post di WordPress. Poiché non stiamo più usando i dati postale locali, cancelliamo SRC / Data. . Quindi nel componente dei post, rimuovere il Post: postdata.data. Proprietà nel negozio di dati locali dei componenti e quindi sull'importazione PostData.

13. Fix Post Autore

Puoi notare che per ogni post che l'autore si sta mostrando come un numero. Questo perché l'API di WordPress restituisce un ID autore, piuttosto che un nome. Dobbiamo usare questo ID per interrogare WordPress per l'intera informazione dell'autore. Iniziamo creando un posto per archiviare questo nel nostro negozio Vuex, accanto alle nostre informazioni post, in negozio / index.js. .

 Stato: {
  Autori: NULL,
  Post: NULL} 

14. Creare un'azione Getauthors

Come con i post, creeremo un'azione in /store/index.js. Per attivare una richiesta Ajax per interrogare l'API di Wordpress. Una volta ricevuta una risposta di successo, la promessa risolverà e attiverà quindi il StoreAors. Mutazione, che creeremo il prossimo.

 Getauthors: funzione (contesto) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Utenti)
  .then (funzione (risposta) {
  Context.comMit ('StoreAuthors',
  Risposta.Data)
  })
} 

15. Crea mutazioni di deposito

All'interno dell'oggetto delle mutazioni del negozio VUEX, crea il StoreAors. mutazione usando lo snippet qui sotto. Come con storeposts. Dal passo 8, questo prende il carico utile è passato e lo imposta come il valore della proprietà degli autori nello stato del nostro negozio.

 StoreAuthors (stato, risposta) {
  stato.Authors = risposta} 

16. Trigger Getauthors sul carico

Dobbiamo ottenere le informazioni dell'autore da Wordpress non appena l'app comincia a caricare. Amendiamo il componente di livello superiore App.VUE. di nuovo e spedire il Getauthors. azione nello stesso creato() Gancio di ciclo di vita come il gettposts. azione.

 creato () {
  Questo. $ store.dispatch ('getauthors')
   Questo. $ store.dispatch ('getpost')} 

17. Crea metodo GetUserName

Ora interrogamiamo WordPress per le informazioni sull'autore sul carico, tutto ciò che dobbiamo fare è definire un metodo nel nostro componente post che ci consente di passare un ID autore e ottenere un nome in cambio. Copia lo snippet qui sotto nell'oggetto dei metodi dei componenti dei post, sotto l'esistente GetheringlePost. metodo.

 GetUserName: funzione (userid) {
  var username = 'sconosciuto';
  Questo. $ Store.State.
  Autori.Filter (funzione (utente) {
  se (user.id === userid) {
  username = user.name.
  }
  }););
  Return Nomename;
} 

18. Chiama il metodo GetUserName

Ora abbiamo solo bisogno di chiamare getUsername. . Ancora nel componente dei post, nel modello, sostituire il riferimento dell'attributo dell'autore a Post.Author. Quindi riflette lo snippet qui sotto. Il nome dell'autore dovrebbe ora essere visualizzato correttamente per ogni post.

: autore = "getUsername (post.author)" 

19. Caricamento del blog

Come caricando i dati post asincrono, c'è un momento prima che la richiesta sia completata dove l'applicazione è vuota. Per contrastare questo, implementeremo uno stato di caricamento attivo fino a quando il blog è completamente popolato. Nel componente dei post, incolla lo snippet qui sotto subito dopo l'apertura & lt; script & gt; Tagga per importare le icone che useremo.

 Icona di importazione da '@ / componenti / icone / icone'
Importa il caricamento da './../../
Asset / img / loading.svg '

20. Aggiungi icona all'elenco dei componenti

Successivamente, ancora all'interno dei post, aggiungi un riferimento all'icona negli oggetti dei componenti. Ciò rende il componente dei post consapevole del nostro componente dell'icona importato di recente.

 Componenti: {
   icona,
   Post} 

21. Creare elementi di caricamento

Ora dobbiamo solo aggiungere gli elementi di caricamento al modello di post in modo che venga visualizzato sulla pagina. Innanzitutto, avvolgi il secondo div nello snippet attorno ai due div con il V-IF. Direttive per assicurarsi che nessun post mostrasse fino al completamento del caricamento.

Quindi aggiungi il primo div dallo snippet sopra di esso. Questo contiene l'icona di caricamento e un V-IF. Direttiva, il che significa che sarà visibile solo fino al punto in cui l'app è completamente caricata. Una volta fatto, il caricamento dovrebbe ora essere implementato.

 & lt; div v-if = "! Questo. $ Store.state.posts"
class = "u-align-center" & gt;
   & lt; icona class = "c-icon-loading"
   Usa = "Caricamento" e GT; & lt; / icon & gt;
& lt; / div & gt;
& lt; div v-if = "questo. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Aggiorna i percorsi di attributo singolo singolo

L'unica cosa rimasta per fare è assicurarsi che i singoli posti siano impostati correttamente in modo che stiano utilizzando i dati di WordPress Post nel negozio VUEX. Il primo passo è aggiornare i percorsi dell'attributo nel modello dei componenti dei post all'interno del v-if = "this.type === 'single'" Div, che gestisce la visualizzazione dei singoli posti.

 Switch 'singlepost.title' a 'singlepost.title.Rendered'
 Switch 'singlepost.author' a 'getUsername (singlepost.author)'
 Switch 'singlepost.fullimage' a 'singlepost.acf.header_image'
 Switch 'singlepost.content' a 'singlepost. Contenuto.Rendering '

23. Metodo Refactor GetsinglePost

Dobbiamo anche refattura dei componenti dei post GetheringlePost. metodo. Ha bisogno di restituire una promessa che invia il gettposts. azione. Nel follow-up poi Funzione, cercheremo i messaggi del negozio VUEX per una voce con una corrispondenza delle lumaze è passata all'URL. Se trovato, copiare i dati nello stato locale del nostro componente e risolveremo la promessa. Se non viene trovato, la promessa sarà respinta.

 GeseGlePost: funzione () {
   restituire la nuova promessa
   ((risolvere, rifiutare) = & gt; {
  Questo. $ store.dispatch ('getposts')
  .then (() = & gt; {
  VAR Fooldpost = false;
  Questo. $ store.state.posts.
  Filtro ((post) = & GT; {
  IF (post.slug ===
  questo. $ route.params.slug) {
  questo.singlePost = post;
  Foundpost = true; }
  }););
  Foundpost? risolvere (): rifiutare ();
  })
  })
} 

24. Refactor Posts creato () gancio

Quindi, dobbiamo refactorre il creato() Gancio di ciclo di vita nel componente dei post. Se abbiamo bisogno di visualizzare un singolo post, il gancio dovrebbe chiamare il GetheringlePost. Metodo dal passaggio precedente, e se la sua promessa viene rifiutata, invia l'utente alla pagina 404 "Pagina non trovata". Questo è quello di spiegare gli scenari in cui gli utenti inseriscono un post non esistente di slug nell'URL.

 creato () {
  Se (This.Type === 'single') {
  questo.getsinglePost (). Quindi (NULL, () = & GT; {
  questo. $ router.push ({name: 'Pagenotfound'})
  }););
  }
} 

25. Aggiungi la direttiva V-IF

Il passo finale è aggiungere lo snippet sotto al componente post all'interno del v-if = "this.type === 'single'" Div nel modello. Questa direttiva significa che il post verrà visualizzato solo quando i dati del post locale sono resi disponibili dal GetheringlePost. il metodo è popolato. Questo per interrompere VUE da rendering prematuramente il componente e causando così errori.

 V-IF = "singlepost" 

26. Costruisci l'app

Ora con tutto il lavoro, nella console, annulla il npm run dev. Comando o Apri una nuova console ed eseguire il comando seguente per generare una versione pronta per la produzione da caricare sul proprio server. Questo apparirà nel distanziatore directory.

 NPM Run Build 

Questo articolo è apparso in emissione 268 di Web Designer, la rivista Creative Web Design - offrendo tutorial esperti, tendenze all'avanguardia e risorse gratuite. Iscriviti al web designer ora.

Per saperne di più:

• 32 I migliori temi WordPress gratuiti
• 10 Top WordPress Risorse
• Il Le migliori piattaforme di blogging gratuite