Verwenden Sie WordPress mit React, um Headless CMS für Ihre Webanwendung zu erstellen

WordPress Rest API ist eine der vielen großartigen Funktionen, die WordPress bietet. Es ermöglicht Entwicklern, faszinierende Plugins und Themen zu erstellen und Anwendungen von Drittanbietern mit WordPress CMS zu betreiben.

Das Content-Management-System wurde auch entwickelt, um den Inhalt der Website in modernen Webanwendungen zu verwalten. Dies kann eine zusätzliche Arbeitsbelastung für die Entwickler bedeuten. Bei so vielen Möglichkeiten, die die Rest-API bietet, kann man auch daran denken, WordPress mit React als Headless-CMS für ihre JavaScript-basierten Webanwendung(en) zu verwenden.

Was ist Headless-WordPress?

Eine Headless-WordPress-Website ist eine Website, die WordPress hauptsächlich für das Content-Management verwendet und jede andere Technologie verwendet, um das Front-End zu erstellen und den Inhalt für die Website-Besucher anzuzeigen.

Die Rest-API ermöglicht Entwicklern die Interaktion mit technologieübergreifenden Schnittstellen, solange beide dieselbe JSON-Sprache sprechen. Die WordPress Rest API spuckt Daten im JSON-Format aus, das von einer Vielzahl von Webtechnologien verstanden wird. JSON ist eine textbasierte Darstellung von JavaScript-Objekten, die Daten in Schlüssel-Wert-Paaren enthält.

 "Freunde": [
      {
        "id": 0,
        "name": "Harriet Stanley"
      },
      {
        "ID": 1,
        "name": "Benton Odom"
      },
      {
        "id": 2,
        "name": "Jackie Edwards"
      }
    ],

Heute werde ich die Leistungsfähigkeit der WordPress-Rest-API demonstrieren, indem ich sie mit React und WordPress als Headless-CMS für meine grundlegende Webanwendung verwende.

Die Vorteile der Verwendung von Headless WordPress CMS

Als Open-Source-Plattform bietet WordPress eine große Flexibilität, um jede Website zu erstellen. Die Verwendung von WordPress als Headless-CMS ermöglicht es Ihnen, das Frontend Ihrer Webanwendung mit einer beliebigen Webtechnologie zu erstellen und deren Inhalt mit einem der beliebtesten CMS zu verwalten.

Möglicherweise stoßen Sie auf die Situation, in der Sie eine Blog-Funktion in eine vorhandene Web-App einfügen müssen, die entweder mit React oder Angular erstellt wurde. Anstatt das vollwertige Content-Management-System im nativen Framework zu codieren, verwenden Sie das Headless-WordPress-CMS, um den Inhalt mit der Rest-API zu verwalten.

So richten Sie eine WordPress-Site für ReactJS ein

Beginnen wir mit der Einrichtung der WordPress-Site, da diese als Datenquelle für unsere Front-End-React-Anwendung dient.

Laden Sie die Zip-Datei des WP-Rest-API- Plugins von Git herunter und laden Sie den Zip-Ordner in Ihren WordPress-Plugins-Ordner hoch. Sobald die Datei hochgeladen ist, aktivieren Sie das Plugin. Dadurch wird die WordPress-Rest-API in Ihrer WordPress-Website aktiviert.

Gehen Sie zu Einstellungen → Permalinks und wählen Sie entweder Beitragsname oder Benutzerdefinierte Struktur.

Da wir mit API-Aufrufen arbeiten, laden Sie die Chrome-Erweiterung für Postman herunter. Geben Sie im Postboten die URL im folgenden Format ein:

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

Die obige URL ruft die Beitragsdaten auf Ihrer WordPress-Site ab.

Laden Sie das UI- Plugin für benutzerdefinierte Beitragstypen herunter, um benutzerdefinierte Beitragstypen zu erstellen. Dieser benutzerdefinierte Beitrag wird angezeigt, wenn wir im nächsten Schritt WordPress mit React verwenden.

Installieren und aktivieren Sie das Plugin und fügen Sie einen neuen Beitragstyp hinzu. Für dieses Tutorial werde ich einen benutzerdefinierten Beitragstyp für Bücher erstellen.

Geben Sie im Beitragstyp-Slug den Namen Ihres benutzerdefinierten Beitrags ein.

Stellen Sie sicher, dass das Kontrollkästchen „ In REST-API anzeigen“ auf „ true “ und der REST-API-Basis-Slug ebenfalls festgelegt ist. Dies ist zwingend erforderlich, wenn Sie WordPress als Headless-CMS verwenden möchten.

Aktivieren Sie alle Kontrollkästchen für die Informationen, die Sie von der REST-API erhalten möchten.

Nach dem Speichern der Änderungen werden Sie feststellen, dass eine neue Option in der Seitenleiste ausgefüllt wird. Klicken Sie darauf, um das neue Buch zu Ihrem benutzerdefinierten Beitragstyp hinzuzufügen.

Ich habe mein erstes Buch erstellt, indem ich die Beispieldaten und einen Auszug für meinen Beitrag eingefügt habe.

Um zu überprüfen, ob die Daten über die API verfügbar sind, klicken Sie auf die URL im Postman.

Jetzt sollte die URL in etwa so aussehen: https://exampe.com/wp-json/wp/v2/books .

Wir können auch weitere Felder wie Publisher hinzufügen, indem wir ACF und ACF to RestAPI- Plugins verwenden.

Installieren und aktivieren Sie beide Plugins.

Standardmäßig spricht ACF nicht mit der WordPress-Rest-API. Daher müssen wir auch das ACF-REST-API -Plugin herunterladen.

Mit dem Plug-in für benutzerdefinierte Felder füge ich das Publisher-Feld für meine Bücher hinzu.

Stellen Sie sicher, dass Sie den gewünschten Beitragstyp aus der Liste auswählen. Klicken Sie danach auf „ Veröffentlichen “.

In meinem benutzerdefinierten Beitragstyp wird ein neues Feld ausgefüllt, in dem ich den Verlag meines Buchs definieren kann. Das ist alles, was wir tun mussten, um unser WordPress so einzurichten, dass es unsere Daten an unsere ReactJS-Webanwendung sendet.

Erste Schritte mit React

Was ist ReactJS

React ist eine JavaScript-Bibliothek für das Web, die von Facebook und der Entwickler-Community gepflegt wird. JavaScript ist ein leistungsstarkes Tool für die Webentwicklung, und es gibt mehrere in JavaScript geschriebene Bibliotheken, um die Funktionalität der Websites zu verbessern. ReactJS wird hauptsächlich verwendet, um Single-Page-Anwendungen zu entwickeln, die schnell, robust und dynamisch sind.

React-App einrichten

Um React-Apps zu erstellen, müssen die folgenden Abhängigkeiten auf Ihrem Computer installiert sein.

• NodeJS & NPM.
• Texteditor wie Sublime oder Visual Studio Code.
• Git zur Versionskontrolle (optional)

Öffnen Sie nach dem Einrichten der Umgebung die Befehlszeile und führen Sie den folgenden Code aus, um das Projekt mit ReactJS zu erstellen.

 npx create-react-app-Frontend

Sobald die App erstellt ist, cd (change directory) in den Anwendungsordner und geben Sie den folgenden Befehl ein, um das Axios -Paket für API-Aufrufe zu installieren.

 npm und axios

Öffnen Sie nun den Ordner in Ihrem bevorzugten Texteditor. Ich verwende den Visual Studio Code.

Starten Sie die Anwendung, indem Sie den Befehl npm start ausführen.

Wir sind bereit, unsere Webanwendung mit React unter Verwendung von WordPress als Headless-CMS zu erstellen, wenn alles richtig funktioniert.

Erstellen Sie im Ordner „ src “ einen neuen Ordner „ components “ und im Ordner „ components “ eine neue Datei „ Books.js “.

So rendern Sie Post-Daten auf ReactJS

Innerhalb der Book.js -Datei werden wir die Daten von der WordPress-Rest-API abrufen. Unten ist der Code, der den Rest-API-Endpunkt anfordert – in meinem Fall „ /books “ – und die Daten im JSON-Format anzeigt.

 import React, {Component} from 'react'
Axios aus 'axios' importieren;

export class Books erweitert Komponente {
   Zustand = {
       Bücher: [],
       isLoaded: falsch
   }

 KomponenteDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           Bücher: res.data,
           isLoaded: wahr
       }))
       .catch(err => Konsole.log(err))
   }


   rendern() {
      console.log (dieser.Zustand);
       Rückkehr (
           <div>
              
           </div>
       )
   }
}

Standardbücher exportieren

Der obige Code zeigt das Datenarray in der Konsole, das dann im Renderblock verwendet wird.

Rufen Sie nun in der App.js -Datei die Books -Komponente wie unten gezeigt auf.

 Reagieren von 'Reagieren' importieren;
'./App.css' importieren;
Bücher aus „./components/Books“ importieren;

Funktion App() {
 Rückkehr (
   <div className="App">
    <Bücher/>
   </div>
 );
}

Standard-App exportieren;

App.js ist der Einstiegspunkt unserer Webanwendung. Daher ist es wichtig, die „Books“-Komponenten in dieser Datei zu referenzieren.

So zeigen Sie Beitragsdaten auf ReactJS an

Die Daten können angezeigt werden, indem der Code innerhalb der Rendermethode hinzugefügt wird.

 rendern() {
       const {Bücher, isLoaded} = this.state;
       Rückkehr (
           <div>
               {Bücher.map(Buch =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

Anstatt hier Daten anzuzeigen, erstellen wir eine neue Komponente und nennen sie " BookItems.js ", da ich sie von der übergeordneten Komponente getrennt halten möchte.

Ändern Sie die Rendermethode in Bookk.js in etwas wie:

 rendern() {
       const {Bücher, isLoaded} = this.state;
       Rückkehr (
           <div>
               {Bücher.map(Buch =>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

Jetzt müssen wir stattdessen die BookItems-Komponente rendern.

Fügen Sie in BookItems.js den folgenden Code hinzu:

 import React, {Component} from 'react'
Axios aus 'axios' importieren;
PropTypes aus 'prop-types' importieren;

Exportklasse BookItems erweitert Komponente {
 
   rendern() {
       const { Titel } ​​= this.props.book;
       Rückkehr (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

Standard-BookItems exportieren

Im obigen Code verweise ich auf die Buchrequisite, um den Titel und andere Informationen zu erhalten.

Hinweis: Achten Sie darauf, die BookItems- Komponente innerhalb der „Books“-Komponente zu referenzieren.

Meine endgültige Version von BookItems.js sieht ungefähr so ​​​​aus:

 import React, {Component} from 'react'
PropTypes aus 'prop-types' importieren;
Axios aus 'axios' importieren;
Exportklasse BookItems erweitert Komponente {

   Zustand = {
       imgUrl: '',
       Autor: '',
       isLoaded: falsch
   }

   statische propTypes = {
       Buch: PropTypes.object.isRequired
   }

   KomponenteDidMount () {
       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]).then(res => {

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

           });
       });
    }
 
   rendern() {
       const { Titel, Auszug } = this.props.book;
       const {Autor, imgUrl, isLoaded} = this.state;
       Rückkehr (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{Autor}</strong><br/>
              <div DangerlySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

Standard-BookItems exportieren

Und die Ausgabe im Browser sieht so aus:

Nicht die Schönste, oder? Nun, das liegt daran, dass Styling außerhalb des Rahmens dieses Tutorials liegt.

Einpacken!

Heute habe ich Ihnen gezeigt, wie Sie WordPress mit React als Headless-CMS für Ihre Webanwendung verwenden. Der React-Code steht auch auf Git zum Download bereit. Es ist jedoch nicht auf Reagieren beschränkt. Sie können auch mit VueJS, Angular oder einem beliebigen JavaScript-Framework experimentieren. Es gibt unzählige Dinge, die Sie mit der WordPress Rest API tun können. Der Himmel ist die Grenze, also machen Sie weiter und verwenden Sie WordPress für Ihr nächstes Webprojekt.