Usa WordPress con React per creare CMS senza testa per la tua applicazione web

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

Il sistema di gestione dei contenuti è sviluppato anche per gestire i contenuti del sito web nelle moderne applicazioni web. Questo può aggiungere un carico di lavoro aggiuntivo 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.

Cos'è WordPress senza testa?

Un sito Web WordPress senza testa è un sito che utilizza principalmente WordPress per la gestione dei contenuti e utilizza qualsiasi altra tecnologia per creare il front-end e mostrare il contenuto ai visitatori del sito Web.

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

 "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.

I vantaggi dell'utilizzo di CMS WordPress senza testa

Essendo una piattaforma open source, WordPress offre una grande flessibilità per creare qualsiasi 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 è necessario aggiungere una funzionalità del blog in un'app Web esistente creata con React o Angular. Invece di codificare il sistema di gestione dei contenuti completo nel framework nativo, utilizza il CMS WordPress senza testa per gestire il contenuto utilizzando Rest API.

Come configurare un sito WordPress per ReactJS

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 plug -in API WP-Rest da git e carica la cartella zip all'interno della cartella dei plug-in di WordPress. Una volta caricato il file, attiva il plugin. Ciò abiliterà l'API Rest di WordPress all'interno del tuo sito Web WordPress.

Vai su Impostazioni → Permalink e seleziona Nome post 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 dell'interfaccia utente del tipo di post personalizzato per creare tipi di post personalizzati. Questo post personalizzato verrà visualizzato quando utilizzeremo WordPress con React nel passaggio successivo.

Installa e attiva il plugin e aggiungi un nuovo tipo di post. Per questo tutorial, creerò un tipo di post personalizzato per i libri.

All'interno del 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 cerchi di ottenere dall'API REST.

Dopo aver salvato le modifiche, noterai che una nuova opzione viene popolata nella barra laterale. Fare clic su di esso per aggiungere il nuovo libro all'interno del 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 assomigliare a https://exampe.com/wp-json/wp/v2/books .

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. Pertanto, è necessario scaricare anche il plug-in ACF REST API .

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

Assicurati di selezionare il tipo di post desiderato dall'elenco. Successivamente, premi " Pubblica ".

All'interno del mio tipo di post personalizzato viene compilato un nuovo campo 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

Cos'è 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 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.

 npx create-react-app frontend

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

 npm io assio

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

Avviare l'applicazione eseguendo il comando npm start.

Siamo tutti pronti per creare la nostra applicazione web con React utilizzando WordPress come CMS headless se tutto funziona correttamente.

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

Come eseguire il 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.

 importa React, { Component } da 'react'
importare assios da 'assios';

export class Books estende il componente {
   stato = {
       libri: [],
       isLoaded: falso
   }

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


   render() {
      console.log(questo.stato);
       Restituzione (
           <div>
              
           </div>
       )
   }
}

esporta libri predefiniti

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

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

 import React da 'react';
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. Pertanto, è importante fare riferimento ai componenti "Libri" all'interno di questo file.

Come visualizzare i dati dei post su ReactJS

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

 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 principale.

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={book}/>
               )}
           </div>
       );
   }

Ora, dobbiamo invece eseguire il rendering del componente BookItems.

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

 importa React, { Component } da 'react'
importare assios da 'assios';
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 BookItem predefiniti

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

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

La mia versione finale di BookItems.js assomiglia a questa:

 importa React, { Component } da 'react'
importare PropTypes da 'prop-types';
importare assios da 'assios';
la classe di esportazione BookItems estende il componente {

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

   propTypes statico = {
       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: vero

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

esporta BookItem predefiniti

E l'output nel browser è simile a questo:

Non è il più bello, 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 per il download su Git. Tuttavia, non si limita a Reagire. Puoi anche sperimentare con VueJS, Angular o qualsiasi framework JavaScript. Ci sono tantissime cose che puoi fare con l'API Rest di WordPress. Il cielo è il limite, quindi vai avanti e usa WordPress per il tuo prossimo progetto web.