Utilizați WordPress cu React pentru a crea CMS fără cap pentru aplicația dvs. web

API-ul WordPress Rest este una dintre numeroasele caracteristici excelente pe care le oferă WordPress. Le permite dezvoltatorilor să creeze pluginuri și teme fascinante și le permite, de asemenea, să alimenteze aplicații de la terți cu WordPress CMS.

În aplicațiile web moderne, sistemul de gestionare a conținutului este, de asemenea, dezvoltat pentru a gestiona conținutul site-ului web. Acest lucru poate adăuga o sarcină de lucru suplimentară pentru dezvoltatori. Cu atâtea posibilități pe care le oferă Rest API , ne putem gândi, de asemenea, să folosim WordPress cu React ca un CMS fără cap pentru aplicațiile web bazate pe JavaScript.

Deci, ce naiba este WordPress fără cap?

A fi „fără cap” nu înseamnă cu siguranță că CMS lipsește secțiunea antet. Înseamnă că puteți utiliza CMS ca sistem generic de gestionare a conținutului, indiferent de tehnologia utilizată pentru a construi front-end-ul.

Rest API permite dezvoltatorilor să interacționeze cu interfețe de tehnologie încrucișată atâta timp cât ambii vorbesc aceeași limbă a JSON. API-ul WordPress Rest scuipă date în format JSON, care este de înțeles de un număr mare de tehnologii web. JSON este o reprezentare bazată pe text a obiectelor JavaScript care conține date în pereche cheie-valoare.

 "prieteni": [
      {
        „id”: 0,
        „nume”: „Harriet Stanley”
      },
      {
        „id”: 1,
        „nume”: „Benton Odom”
      },
      {
        „id”: 2,
        „nume”: „Jackie Edwards”
      }
    ],

Astăzi, voi demonstra puterea API-ului WordPress Rest folosindu-l cu React și WordPress ca un CMS fără cap pentru aplicația mea web de bază.

Avantajul utilizării Headless WordPress CMS

Fiind o platformă open-source; WordPress oferă o mare flexibilitate pentru a crea orice fel de site web. Utilizarea WordPress ca CMS fără cap vă permite să creați front-end-ul aplicației dvs. web utilizând orice tehnologie web și să gestionați conținutul acesteia folosind unul dintre cele mai populare CMS.

S-ar putea să întâlniți situația în care trebuie să adăugați o funcție de blog într-o aplicație web existentă construită fie cu React, fie cu Angular. În loc să codifice sistemul complet de gestionare a conținutului în cadrul nativ; utilizați WordPress CMS fără cap pentru a gestiona conținutul folosind Rest API.

Configurarea unui site WordPress

Să începem cu configurarea site-ului WordPress, deoarece acesta va acționa ca o sursă de date pentru aplicația noastră front-end React.

Descărcați fișierul zip al pluginului API WP-Rest din git și încărcați folderul zip în folderul dvs. de pluginuri WordPress. Odată ce fișierul este încărcat, activați pluginul. Aceasta va activa WordPress Rest API în interiorul site-ului dvs. WordPress.

Acum, accesați Setări → Legături permanente și selectați fie Numele postării, fie Structura personalizată.

Deoarece lucrăm cu apeluri API, descărcați extensia Chrome pentru Postman . În Postman, introduceți adresa URL în următorul format:

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

Adresa URL de mai sus va prelua datele postărilor în site-ul dvs. WordPress.

Descărcați pluginul UI Custom Post Type pentru crearea de tipuri de postări personalizate. Această postare personalizată va fi afișată când vom folosi WordPress cu React în pasul următor.

Instalați și activați pluginul și continuați pentru a adăuga un nou tip de postare. Pentru acest tutorial, voi crea un tip de postare personalizată pentru Cărți.

În secțiunea Post Type Slug, tastați numele postării dvs. personalizate.

Asigurați-vă că caseta de selectare Afișare în REST API este setată la adevărat și că este activată și slugul de bază REST API. Acest lucru este obligatoriu dacă doriți să utilizați WordPress ca CMS fără cap.

Bifați toate căsuțele pentru informațiile pe care doriți să le obțineți din API-ul REST.

După salvarea modificărilor, veți observa că o nouă opțiune este populată în bara laterală. Faceți clic pe ea pentru a adăuga noua carte în tipul dvs. personalizat de postare.

Mi-am creat prima carte prin introducerea eșantionului de date, precum și un extras pentru postarea mea.

Pentru a verifica dacă datele sunt disponibile prin API, continuați și apăsați adresa URL din Postman.

Acum, adresa URL ar trebui să arate ca https://exampe.com/wp-json/wp/v2/ cărți

De asemenea, putem adăuga câmpuri suplimentare, cum ar fi Publisher, utilizând pluginurile ACF și ACF la RestAPI .

Instalați și activați ambele pluginuri.

În mod implicit, ACF nu vorbește cu WordPress Rest API, prin urmare, trebuie să descărcăm și pluginul ACF REST API .

Utilizând pluginul pentru câmpuri personalizate, voi adăuga câmpul Publisher pentru cărțile mele.

Asigurați-vă că selectați din listă tipul de postare dorit. După aceea, a lovit „ Publicați ”.

Un nou câmp este completat în tipul meu personalizat de postare, unde pot defini editorul cărții mele. Asta este tot ce trebuia să facem pentru a ne configura WordPress pentru trimiterea datelor către aplicația noastră web ReactJS.

Noțiuni introductive despre React

Ce este ReactJS

React este o bibliotecă JavaScript pentru web întreținută de Facebook și de comunitatea de dezvoltatori. JavaScript este un instrument puternic pentru dezvoltarea web și există mai multe biblioteci scrise în JavaScript pentru a îmbunătăți funcționalitatea site-urilor web. ReactJS este utilizat în principal pentru a dezvolta aplicații cu o singură pagină, rapide, robuste și dinamice.

Configurarea aplicației React

Pentru a crea aplicații utilizând React, trebuie să aveți următoarele dependențe instalate pe computer.

• NodeJS și NPM.
• Editor de text precum Sublime sau Visual Studio Code.
• Git pentru controlul versiunii (opțional)

După configurarea mediului, deschideți linia de comandă și rulați următorul cod pentru a crea proiectul cu ReactJS.

 npx create-react-app frontend

Odată ce aplicația este creată, cd (schimbare director) în folderul aplicației și tastați următoarea comandă pentru a instala pachetul Axios pentru apeluri API.

 npm i axios

Acum, deschideți folderul din editorul de text preferat. Folosesc Visual Studio Code.

Lansați aplicația executând comanda npm start.

Dacă totul funcționează corect, suntem pregătiți să construim aplicația noastră web cu React folosind WordPress ca CMS fără cap.

Creați un folder nou „ componente ” în folderul src , iar în folderul „ componente ” creați un nou fișier „ Books.js ”.

Redarea datelor postate pe ReactJS

În fișierul Book.js , vom prelua datele din API-ul WordPress Rest. Mai jos este codul care solicită punctul final Rest API - care în cazul meu este „ / cărți ” - și afișează datele în format JSON.

 importă React, {Component} din „react”
import axios din „axios”;

clasa de export Cărți extinde Componenta {
   state = {
       cărți: [],
       isLoaded: false
   }

 componentDidMount () {
   axios.get („https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/”)
       .then (res => this.setState ({
           cărți: res.data,
           isLoaded: adevărat
       }))
       .catch (err => console.log (err))
   }


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

export Cărți implicite

Codul de mai sus va afișa matricea de date din consolă, care este apoi utilizată în interiorul blocului de redare.

Acum, în fișierul App.js, apelați componenta Cărți așa cum se arată mai jos.

 import React din „reacționează”;
import './App.css';
importați cărți din „./components/Books”;

funcția App () {
 întoarcere (
   <div className = "App">
    <Cărți />
   </div>
 );
}

exportați aplicația implicită;

App.js este punctul de intrare al aplicației noastre web, prin urmare, este important să faceți referire la componentele „Cărți” din acest fișier.

Afișarea datelor de postare pe ReactJS

Datele pot fi afișate prin adăugarea codului în interiorul metodei de redare.

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

În loc să afișăm date aici, vom crea o componentă nouă și o vom denumi „ BookItems.js ” deoarece vreau să o păstrez separat de componenta părinte.

Schimbați metoda de redare din Bookk.js la ceva de genul:

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

Acum, trebuie să redăm componenta BookItems.

În interiorul BookItems.js adăugați următorul cod:

 importă React, {Component} din „react”
import axios din „axios”;
import PropTypes din „prop-types”;

clasa de export BookItems extinde Componenta {
 
   render () {
       const {title} = this.props.book;
       întoarcere (
           <div>
              <h2> {title.rendered} </h2>
           </div>
       )
   }
}

export implicit BookItems

În codul de mai sus, fac referire la propunerea cărții pentru a obține titlul și alte informații.

Notă: asigurați-vă că faceți referire la componenta BookItems din componenta „Cărți”.

Versiunea mea finală a BookItems.js arată cam așa:

 importă React, {Component} din „react”
import PropTypes din „prop-types”;
import axios din „axios”;
clasa de export BookItems extinde Componenta {

   state = {
       imgUrl: '',
       autor: '',
       isLoaded: false
   }

   static propTypes = {
       carte: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {featured_media, author} = 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]). Apoi (res => {

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

           });
       });
    }
 
   render () {
       const {title, excerpt} = this.props.book;
       const {author, imgUrl, isLoaded} = this.state;
       întoarcere (
           <div>
              <h2> {title.rendered} </h2>
              <img src = {imgUrl} alt = {title.rendered} />
              <strong> {autor} </strong> <br/>
              <div dangerouslySetInnerHTML = {{__ html: excerpt.rendered}}> </div>
           </div>
       )
   }
}

export implicit BookItems

Iar ieșirea din browser arată ca:

Nu cea mai frumoasă nu? Ei bine, asta pentru că stilul nu intră în sfera acestui tutorial.

Încheiem!

Astăzi, v-am arătat cum să utilizați WordPress cu React ca un CMS fără cap pentru aplicația dvs. web. Codul React este disponibil și pe Git pentru al descărca. Cu toate acestea, nu se limitează la React. De asemenea, puteți experimenta cu VueJS, Angular sau orice cadru JavaScript. Există o mulțime de lucruri pe care le puteți face cu WordPress Rest API. Cerul este limita, așa că mergeți mai departe și utilizați WordPress pentru următorul dvs. proiect web.