Verwenden Sie WordPress mit React, um ein 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 Themes zu erstellen, und ermöglicht ihnen auch, Anwendungen von Drittanbietern mit WordPress CMS zu betreiben.

In modernen Webanwendungen wird das Content Management System auch entwickelt, um die Inhalte der Website zu verwalten. Dies kann zusätzliche Arbeitsbelastung für die Entwickler verursachen. Bei so vielen Möglichkeiten, die die Rest API bietet, kann man sich auch vorstellen, WordPress mit React als Headless-CMS für ihre JavaScript-basierten Webanwendungen zu verwenden.

Was zum Teufel ist also Headless WordPress?

Headless zu sein bedeutet definitiv nicht, dass dem CMS der Header-Bereich fehlt. Das bedeutet, dass Sie das CMS unabhängig von der Technologie, mit der das Frontend erstellt wurde, als generisches Content-Management-System verwenden können.

Die Rest-API ermöglicht es Entwicklern, mit technologieübergreifenden Schnittstellen zu interagieren, solange beide dieselbe Sprache von JSON sprechen. Die WordPress Rest API spuckt Daten im JSON-Format aus, das für eine Vielzahl von Webtechnologien verständlich ist. JSON ist eine textbasierte Darstellung von JavaScript-Objekten, die Daten in einem Schlüssel-Wert-Paar 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.

Der Vorteil der Verwendung von Headless WordPress CMS

Als Open-Source-Plattform; WordPress bietet große Flexibilität, um jede Art von Website zu erstellen. Wenn Sie WordPress als Headless-CMS verwenden, können Sie das Frontend Ihrer Webanwendung mit jeder Webtechnologie erstellen und ihren Inhalt mit einem der beliebtesten CMS verwalten.

Möglicherweise stoßen Sie auf die Situation, in der Sie einer vorhandenen Web-App, die entweder mit React oder Angular erstellt wurde, eine Blogfunktion hinzufügen müssen. 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.

Einrichten einer WordPress-Site

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 nun 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 Postman die URL im folgenden Format ein:

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

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

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

Installieren und aktivieren Sie das Plugin und legen Sie los, um einen neuen Beitragstyp hinzuzufügen. Für dieses Tutorial werde ich einen benutzerdefinierten Beitragstyp für Bücher erstellen.

Geben Sie im Post Type Slug den Namen Ihres benutzerdefinierten Beitrags ein.

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

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

Nachdem Sie die Änderungen gespeichert haben, werden Sie feststellen, dass in der Seitenleiste eine neue Option angezeigt wird. Klicken Sie darauf, um das neue Buch zu Ihrem benutzerdefinierten Beitragstyp hinzuzufügen.

Ich habe mein erstes Buch erstellt, indem ich die Beispieldaten sowie einen Auszug für meinen Beitrag eingegeben habe.

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

Nun sollte die URL in etwa so aussehen https://exampe.com/wp-json/wp/v2/ Bücher

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

Installieren und aktivieren Sie beide Plugins.

ACF spricht standardmäßig nicht mit der WordPress Rest API, daher müssen wir auch das ACF REST API Plugin herunterladen.

Durch die Verwendung des Plugins für benutzerdefinierte Felder füge ich das Publisher-Feld für meine Bücher hinzu.

Achten Sie darauf, den gewünschten Beitragstyp aus der Liste auszuwählen. Danach klicken Sie auf ' Veröffentlichen '.

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

Erste Schritte mit React

Was ist ReactJS

React ist eine JavaScript-Bibliothek für das Web, die von Facebook und der Entwickler-Community verwaltet wird. JavaScript ist ein leistungsstarkes Werkzeug 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 Apps mit React zu erstellen, müssen die folgenden Abhängigkeiten auf Ihrem Computer installiert sein.

• NodeJS und 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 wurde, wechseln Sie mit cd (change directory) in den Anwendungsordner und geben Sie den folgenden Befehl ein, um das Axios- Paket für API-Aufrufe zu installieren.

 npm ich 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.

Wenn alles richtig funktioniert, sind wir bereit, unsere Webanwendung mit React mit WordPress als Headless-CMS zu erstellen.

Erstellen Sie einen neuen Ordner ' components ' im src- Ordner und erstellen Sie im ' components' -Ordner eine neue Datei ' Books.js '.

Rendern von Beitragsdaten auf ReactJS

In der Datei Book.js holen wir die Daten aus der WordPress Rest API. 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 Component {
   Zustand = {
       Bücher: [],
       isLoaded: false
   }

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


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

Standardbücher exportieren

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

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

 importiere React aus 'react';
import './App.css';
Importieren von Büchern aus './components/Books';

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

Standard-App exportieren;

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

Anzeige von Beitragsdaten auf ReactJS

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

 render() {
       const {books, isLoaded} = this.state;
       Rückkehr (
           <div>
               {books.map(book =>
               <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 trennen möchte.

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

 render() {
       const {books, isLoaded} = this.state;
       Rückkehr (
           <div>
               {books.map(book =>
               <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;
Importieren Sie PropTypes von 'prop-types';

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

Standard-BookItems exportieren

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

Hinweis: Stellen Sie sicher, dass Sie innerhalb der Komponente „Books“ auf die Komponente BookItems verweisen .

Meine endgültige Version von BookItems.js sieht in etwa so aus:

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

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

   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 => {

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

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

Standard-BookItems exportieren

Und die Ausgabe im Browser sieht so aus:

Nicht der Schönste, oder? Das liegt daran, dass das Styling nicht im Rahmen dieses Tutorials liegt.

Einpacken!

Heute habe ich Ihnen gezeigt, wie Sie WordPress mit React als Headless-CMS für Ihre Webanwendung nutzen können. Der React-Code steht auch auf Git zum Download bereit. Es ist jedoch nicht auf React 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.