Usa WordPress con React per creare un CMS Headless per la tua applicazione web

WordPress Rest API è una delle tante fantastiche funzionalità offerte da WordPress. Consente agli sviluppatori di creare plugin e temi affascinanti e consente loro anche di alimentare applicazioni di terze parti con WordPress CMS.

Nelle moderne applicazioni web, viene sviluppato anche il sistema di gestione dei contenuti per gestire il contenuto del sito web. Questo può aggiungere un carico di lavoro extra per gli sviluppatori. Con così tante possibilità offerte dall'API Rest , si può anche pensare di utilizzare WordPress con React come un CMS headless per le proprie applicazioni web basate su JavaScript.

Allora, cosa diavolo è WordPress senza testa?

Essere "senza testa" non significa sicuramente che al CMS manchi la sezione dell'intestazione. Significa che puoi utilizzare il CMS come un sistema di gestione dei contenuti generico indipendentemente dalla tecnologia utilizzata per costruire il front-end.

Rest API consente agli sviluppatori di interagire con interfacce intertecnologiche purché entrambi parlino la stessa lingua di JSON. WordPress Rest API sputa dati in formato JSON che è comprensibile da un gran numero di tecnologie web. JSON è una rappresentazione testuale di oggetti JavaScript che contiene dati nella coppia chiave-valore.

 "gli amici": [
      {
        "id": 0,
        "nome": "Harriet Stanley"
      },
      {
        "id": 1,
        "nome": "Benton Odom"
      },
      {
        "id": 2,
        "nome": "Jackie Edwards"
      }
    ],

Oggi dimostrerò la potenza dell'API Rest di WordPress utilizzandola con React e WordPress come CMS headless per la mia applicazione web di base.

Il vantaggio dell'utilizzo di un CMS WordPress senza testa

Essendo una piattaforma open source; WordPress offre una grande flessibilità per creare qualsiasi tipo di sito web. L'utilizzo di WordPress come CMS headless ti consente di creare il front-end della tua applicazione web utilizzando qualsiasi tecnologia web e gestirne i contenuti utilizzando uno dei CMS più diffusi.

Potresti imbatterti nella situazione in cui devi aggiungere una funzionalità di blog in un'app Web esistente creata con React o Angular. Invece di codificare il sistema di gestione dei contenuti completo nel framework nativo; usa il CMS headless di WordPress per gestire il contenuto utilizzando l'API Rest.

Configurare un sito WordPress

Iniziamo con la configurazione del sito WordPress, poiché fungerà da fonte di dati per la nostra applicazione React front-end.

Scarica il file zip del plugin API WP-Rest da git e carica la cartella zip all'interno della cartella dei plugin di WordPress. Una volta caricato il file, attiva il plugin. Ciò abiliterà l'API Rest di WordPress all'interno del tuo sito Web WordPress.

Ora vai su Impostazioni → Permalink e seleziona Nome articolo o Struttura personalizzata.

Poiché stiamo lavorando con le chiamate API, scarica l'estensione Chrome per Postman . All'interno del postino, inserisci l'URL nel seguente formato:

https://example.com/wp-json/wp/v2/posts

L'URL sopra recupererà i dati dei post all'interno del tuo sito WordPress.

Scarica il plug-in UI Custom Post Type per creare tipi di post personalizzati. Questo post personalizzato verrà visualizzato quando utilizzeremo WordPress con React nel passaggio successivo.

Installa e attiva il plug-in e procedi con l'aggiunta di un nuovo tipo di post. Per questo tutorial, creerò un tipo di post personalizzato per Libri.

All'interno di Post Type Slug, digita il nome del tuo post personalizzato.

Assicurati che la casella di controllo Mostra nell'API REST sia impostata su true e che sia impostato anche lo slug di base dell'API REST. Questo è obbligatorio se desideri utilizzare WordPress come CMS headless.

Seleziona tutte le caselle per le informazioni che desideri ottenere dall'API REST.

Dopo aver salvato le modifiche, noterai che una nuova opzione è popolata nella barra laterale. Fai clic su di esso per aggiungere il nuovo libro all'interno del tuo tipo di post personalizzato.

Ho creato il mio primo libro inserendo i dati di esempio e un estratto per il mio post.

Per verificare che i dati siano disponibili tramite API, vai avanti e premi l'URL all'interno del postino.

Ora, l'URL dovrebbe essere simile a https://exampe.com/wp-json/wp/v2/ libri

Possiamo anche aggiungere ulteriori campi come Publisher utilizzando ACF e ACF ai plug -in RestAPI .

Installa e attiva entrambi i plugin.

Per impostazione predefinita, ACF non parla con l'API Rest di WordPress, quindi è necessario scaricare anche il plug-in API REST di ACF .

Utilizzando il plug-in dei campi personalizzati, aggiungerò il campo Editore per i miei libri.

Assicurati di selezionare il tipo di post desiderato dall'elenco. Dopodiché premi " Pubblica ".

Viene compilato un nuovo campo all'interno del mio tipo di post personalizzato in cui posso definire l'editore del mio libro. Questo è tutto ciò che dovevamo fare per configurare il nostro WordPress per l'invio dei nostri dati alla nostra applicazione web ReactJS.

Iniziare con React

Cosa c'è di ReactJS

React è una libreria JavaScript per il Web gestita da Facebook e dalla comunità degli sviluppatori. JavaScript è un potente strumento per lo sviluppo web e ci sono diverse librerie scritte in JavaScript per migliorare la funzionalità dei siti web. ReactJS viene utilizzato principalmente per sviluppare applicazioni a pagina singola veloci, robuste e dinamiche.

Configurazione dell'app React

Per creare app usando React devi avere le seguenti dipendenze installate sul tuo computer.

• NodeJS e NPM.
• Editor di testo come Sublime o Visual Studio Code.
• Git per il controllo della versione (opzionale)

Dopo aver configurato l'ambiente, apri la riga di comando ed esegui il codice seguente per creare il progetto con ReactJS.

 frontend dell'app create-react-npx

Una volta creata l'app, cd (cambia directory) nella cartella dell'applicazione e digita il seguente comando per installare il pacchetto Axios per le chiamate API.

 npm i assi

Ora apri la cartella all'interno del tuo editor di testo preferito. Sto usando il codice di Visual Studio.

Avvia l'applicazione eseguendo il comando npm start.

Se tutto funziona correttamente, siamo pronti per costruire la nostra applicazione web con React utilizzando WordPress come CMS headless.

Crea una nuova cartella ' componenti ' all'interno della cartella src e all'interno della cartella ' componenti ' crea un nuovo file ' Books.js '.

Rendering dei dati dei post su ReactJS

All'interno del file Book.js , recupereremo i dati dall'API Rest di WordPress. Di seguito è riportato il codice che richiede l'endpoint dell'API Rest – che nel mio caso è ' /books ' – e visualizza i dati in formato JSON.

 import React, { Component } from 'react'
importare axios da 'axios';

la classe di esportazione Books estende il componente {
   stato = {
       libri: [],
       isLoaded: false
   }

 componenteDidMount() {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           libri: res.data,
           isLoaded: true
       }))
       .catch(err => console.log(err))
   }


   render() {
      console.log(this.state);
       Restituzione (
           <div>
              
           </div>
       )
   }
}

esporta libri predefiniti

Il codice sopra mostrerà l'array di dati nella console che viene quindi utilizzato all'interno del blocco di rendering.

Ora, all'interno del file App.js , chiama il componente Books come mostrato di seguito.

 import Reagire da 'reagire';
importa './App.css';
importa libri da './components/Books';

funzione App() {
 Restituzione (
   <div className="App">
    <Libri/>
   </div>
 );
}

esporta l'app predefinita;

App.js è il punto di ingresso della nostra applicazione web, quindi è importante fare riferimento ai componenti "Libri" all'interno di questo file.

Visualizzazione dei dati dei post su ReactJS

I dati possono essere visualizzati aggiungendo il codice all'interno del metodo render.

 render() {
       const {libri, isLoaded} = this.state;
       Restituzione (
           <div>
               {books.map(libro =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

Invece di visualizzare i dati qui, creeremo un nuovo componente e lo chiameremo " BookItems.js " poiché voglio tenerlo separato dal componente padre.

Cambia il metodo di rendering all'interno di Bookk.js in qualcosa del tipo:

 render() {
       const {libri, isLoaded} = this.state;
       Restituzione (
           <div>
               {books.map(libro =>
               <BookItems key={book.id} book={libro}/>
               )}
           </div>
       );
   }

Ora, dobbiamo invece eseguire il rendering del componente BookItems.

All'interno di BookItems.js aggiungi il seguente codice:

 import React, { Component } from 'react'
importare axios da 'axios';
importare PropTypes da 'prop-types';

la classe di esportazione BookItems estende il componente {
 
   render() {
       const { titolo } = this.props.book;
       Restituzione (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

esporta BookItems predefiniti

Nel codice sopra, sto facendo riferimento al prop del libro per ottenere il titolo e altre informazioni.

Nota: assicurati di fare riferimento al componente BookItems all'interno del componente "Books".

La mia versione finale di BookItems.js è simile a questa:

 import React, { Component } from 'react'
importare PropType da 'prop-types';
importare axios da 'axios';
la classe di esportazione BookItems estende il componente {

   stato = {
       imgUrl: '',
       autore: '',
       isLoaded: false
   }

   statici propTypes = {
       libro: PropTypes.object.isRequired
   }

   componenteDidMount() {
       const {featured_media, autore} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all([getImageUrl, getAuthor]).then(res => {

           console.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               autore: res[1].data.name,
               isLoaded: true

           });
       });
    }
 
   render() {
       const { titolo, estratto } = this.props.book;
       const {autore, imgUrl, isLoaded} = this.state;
       Restituzione (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{autore}</strong><br/>
              <div pericolosamenteSetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

esporta BookItems predefiniti

E l'output nel browser è simile a:

Non è il più carino vero? Bene, questo perché lo stile non rientra nell'ambito di questo tutorial.

Avvolgendo!

Oggi ti ho mostrato come utilizzare WordPress con React come CMS headless per la tua applicazione web. Il codice React è disponibile anche su Git per il download. Tuttavia, non si limita a Reagire. Puoi anche sperimentare VueJS, Angular o qualsiasi framework JavaScript. Ci sono tantissime cose che puoi fare con WordPress Rest API. Il cielo è il limite, quindi vai avanti e usa WordPress per il tuo prossimo progetto web.