So erstellen Sie mit React und WordPress einen Skin für Ihre Web-App

Sie haben sich also zum Web Engineer ausbilden lassen und wollen nun einen blitzschnellen Online-Shop für Ihre Kunden aufbauen. Die Produktliste soll im Handumdrehen erscheinen und auch die Suche sollte nicht länger als Sekundenbruchteile verschwenden. Ist das der Stoff für Tagträume?

Nicht mehr. Nun, zumindest ist es nichts, was nicht mit der Kombination aus der REST-API von WordPress und React, einer modernen JavaScript-Bibliothek, erreicht werden kann.

Warte was? WordPress-REST-API?

Ja, die WordPress-REST-API hilft Ihnen beim Aufbau der Back-End-Grundlage für Ihre Webanwendung. Dies ist eine gute Wahl für die Back-End-Technologie Ihrer Webanwendung, wenn Sie eine inhaltsgesteuerte Lösung erstellen. WordPress wird auch reibungslos mit anderen Technologien zusammenarbeiten; Sie könnten Node.js als Mittelpunkt Ihrer Anwendung verwenden , um eine Verbindung zu anderen RESTful-Diensten herzustellen.

Die WordPress-REST-API ist ein Game-Changer für WordPress, das jetzt sicher als Webanwendungs-Framework bezeichnet werden kann – nicht nur als CMS. Jetzt, da Front- und Backend vollständig entkoppelt sind, kann WordPress als mobiles App-Backend oder als Backend für jedes inhaltsorientierte System verwendet werden.

Aber warum WordPress? Der Grund: Sie werden staunen, welche Funktionalitäten out of the box mit WordPress auftauchen. Sie erhalten eine umfassende Benutzerverwaltung, Medienverwaltung und einen unglaublich entwicklerfreundlichen Satz von APIs, um Ihre Arbeit zu erweitern.

In diesem Artikel werde ich Sie durch die Erstellung eines SPA (Single Page Application)-WordPress-Themes unter Verwendung der JavaScript-Bibliothek namens React führen, die eine Verbindung zur WP REST API herstellt.

Lassen Sie uns in den Aufbau des Themas einsteigen

In diesem Artikel wird davon ausgegangen, dass Sie bereits mit den verschiedenen vorhandenen WordPress-APIs vertraut sind, insbesondere mit denen, die die Entwicklung von Themen für die Ästhetik Ihrer Website und Funktionen für die Plugins Ihrer Website vorantreiben. Ich gehe auch davon aus, dass Sie Ihre Entwicklungsplattform für WordPress eingerichtet haben, z. B. den LAMP-Stack in einer Linux- oder MacOS-Umgebung.

Der Einfachheit halber beziehe ich mich jedoch nur auf absolute Pfade, wie sie bei der XAMPP-Plattform sichtbar sind, die mit Windows verwendet wird.

Lassen Sie uns nun eine Instanz von WordPress in unserem Localhost erstellen und ihr den Namen „Celestial“ geben. Das ist der Name des WordPress-Themes, das wir verwenden werden, um uns dabei zu helfen, die Richtung für den Aufbau zukünftiger Themes festzulegen, die für die Verwendung mit Webanwendungen bereit sind, die von der WordPress-REST-API unterstützt werden. Sie sind vielleicht bereits mit der beliebten Vorlagenhierarchie von WordPress vertraut, aber mit der REST-API haben Sie die Möglichkeit, etwas anderes zu entdecken!

Wir müssen dann einen Ordner für das Thema im Ordner wp-content\themes erstellen. Navigieren Sie zu C:\xampp\htdocs\celestial\wp-content\themes\ (oder gleichwertig) und erstellen Sie einen Ordner celestial . Fügen Sie diese Dateien in den celestial Themenordner ein:

1. index.php
   Die Catch-All-Datei für das Design.
2. style.css
   Diese enthält Informationen über das Design (und nicht das eigentliche CSS).
3. functions.php
   Schreiben der Funktionalität und Importieren von CSS- und JS-Dateien.

Fügen Sie eine Bilddatei mit dem Namen screenshot.jpg , wenn Sie möchten, dass ein Bild für Ihr Design im Dashboard angezeigt wird.

Hinweis : Der Code für jede Datei ist ein paar Zeilen lang und kann auf GitHub gefunden werden .

Melden Sie sich als Nächstes bei Ihrem WordPress-Dashboard an, gehen Sie zu Aussehen → Themen und wählen Sie „Celestial“ als Thema aus. Nachdem die Grundlage nun gelegt ist, können wir uns an die Erstellung des Themas machen.

Erste Schritte mit React und Webpack für das Theme

React ist eine sehr beliebte UI-Bibliothek, die von Facebook unterstützt und gepflegt wird. Laut den Ergebnissen der Developer Survey 2017 von Stack Overflow ist „React unter Entwicklern am beliebtesten.“

Um das Projekt zu starten, müssen Sie das Projekt als NPM-Projekt (Node Package Manager) initialisieren. Dies geschieht mit dem Befehl npm init im Terminal (nachdem Sie Node.js und NPM auf Ihrem Computer installiert haben). Beim Initialisieren des Projekts werden Sie zur Eingabe bestimmter Konfigurationsinformationen aufgefordert. Nach erfolgreicher Initialisierung erstellt NPM eine package.json-Datei im Stammverzeichnis des Designs. Diese Datei enthält die Projektdetails und alle Abhängigkeiten des Projekts.

React steht jetzt unter MIT-Lizenz, daher werden wir Version 16 von React als JavaScript-Bibliothek für dieses Projekt verwenden. React hat einige coole Funktionen unter der Haube, wie das virtuelle DOM (eine Darstellung des Dokuments im Speicher) und eine Vielzahl von Tools, die es umgeben, wie den React Router. React wird auch im WordPress-Projekt Calypso verwendet – dem Dashboard für WordPress.com.

Wir werden nun die erforderlichen NPM-Pakete im Projekt installieren:

1. Geben Sie im Terminal npm install --save react react-dom ein und drücken Sie die Eingabetaste, um die Pakete zu installieren.

   

   Da wir das Theme als Single Page Application (SPA) aufbauen, benötigen wir die Hilfe eines Tools wie Webpack. Wir werden Code als verschiedene Komponenten schreiben, und Webpack wird uns helfen, sie alle zusammen zu packen und sie als eine einzige .js- oder .css-Datei auszugeben. Kurz gesagt, es ist ein Modulbündelr.
   
   Webpack muss zunächst global auf Ihrem Rechner installiert werden. Dazu können wir wieder NPM verwenden.
2. Geben Sie den Befehl npm install -g webpack ein, um die neueste stabile Version von Webpack global auf Ihrem System zu installieren.
   
   Als Nächstes installieren wir NPM-Pakete, die Webpack in unserer App unterstützen.
3. Gehen Sie zur Datei „package.json “ in meinem Git-Repo und kopieren Sie die restlichen Abhängigkeiten von dort in den Abschnitt „Abhängigkeiten“ Ihrer Datei „ package.json “. Führen Sie dann npm install erneut aus, um alle Pakete in package.json zu installieren.

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   Das Obige ist eine Liste aller erforderlichen Pakete in der Datei „package.json“ für dieses Projekt.
4. Kopieren Sie die Konfigurationen von GitHub und fügen Sie sie in die Datei webpack.config.js Ihres Designordners ein.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   Wichtig : Bitte beachten Sie, dass module.exports → module → rules[3] → use → publicPath sich ändern kann, je nachdem, wo sich die Dist-Images Ihres Projekts in localhost befinden. Wenn dies falsch ist, werden Bilder möglicherweise nicht richtig in der Web-App angezeigt.
5. Anschließend kann mit diesen Befehlen das Projekt kompiliert werden:
   • webpack oder npm run build um das Projekt zu kompilieren, oder
   • webpack --watch oder npm run watch , um das Projekt zu kompilieren und auf Änderungen zu achten.

Hinweis : Um Webpack besser zu verstehen, lesen Sie diesen Artikel von Joseph Zimmerman im Smashing Magazine .

Erweiterung der WordPress REST API

Die WordPress-REST-API verfügt über viele verschiedene Endpunkte zum Abrufen von Beiträgen, Seiten, Medien usw. Sie enthalten jedoch möglicherweise nicht immer alle Details in ihrer Antwort. Beispielsweise gibt die posts-Methode nicht die URL des vorgestellten Bildes oder den Namen des Autors an. Daher müssen wir jedes dieser Elemente separat aufrufen.

Aber was ist, wenn Sie möchten, dass Ihre eigenen Daten in der Antwort auf den Beitrag erscheinen? Hier kommt die Magie der Erweiterung der REST-API ins Spiel. Der folgende Code fügt der Antwort auf die Posts -Anfrage zwei zusätzliche Variablen hinzu, nämlich author_name und featured_image_src . Der Code befindet sich in der Datei functions.php :

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

Eine globale JavaScript-Variable

Es gibt bestimmte WordPress-Konstanten (oder bekannt als „Variablen“), die wir in der gesamten React-App verwenden werden. Dies sind Informationen über die verschiedenen Routen der Anwendung (und später WooCommerce-spezifische).

Diese Variable wird in der Datei functions.php definiert. Es wird "CelestialSettings" genannt und an celestial-scripts angehängt, das Handle für die eingereihte app.js- Datei:

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

Der obige Code zeigt ein Beispiel für das Abrufen von WordPress (PHP)-Variablen an das Frontend, eine wichtige und sehr nützliche Technik beim Erstellen eines entkoppelten Designs. Diese Objektvariable enthält den Seitentitel, den Pfad, die URL für die API und den Stamm sowie drei Variablen, die sich auf WooCommerce beziehen (später erklärt).

Reagieren und JSX

React unterscheidet sich von den anderen großen JavaScript-Bibliotheken. Damit meine ich, dass wir im Allgemeinen JavaScript in unser HTML schreiben. Wenn es jedoch um React geht, schreiben wir HTML in unseren JavaScript-Code. Genauer gesagt schreiben wir JSX in JS. JSX ist HTML sehr ähnlich, weist jedoch einige Unterschiede auf. Das class Attribut wird beispielsweise als className geschrieben. Diese wird dann über Webpack und Babel in einfaches JavaScript konvertiert und in app.js gespeichert .

Es gibt jedoch einige Einschränkungen beim Schreiben von JSX. Beispielsweise können wir in unserer render() -Methode nur ein untergeordnetes Element haben, das als Root-Element für eine Komponente dient. Der Vorteil ist jedoch, dass es einfacher zu debuggen ist. Wir können genau wissen, wo wir einen Fehler gemacht haben, während in normalem HTML unser Fehler normalerweise nicht explizit angezeigt wird. Wir werden JSX für dieses Projekt schreiben, daher haben die JavaScript-Dateien die Erweiterung .jsx . Es könnte jedoch auch .js sein, wenn Sie dies bevorzugen.

Erstellen Sie die folgenden Dateien im src Ordner:

1. index.jsx (die Hauptdatei und diejenige, die die React-Router-Konfigurationen enthält)
2. header.jsx (die Header-Komponente)
3. footer.jsx (die Fußzeilenkomponente)
4. posts.jsx (für das Archiv der Beiträge)
5. post-list.jsx (Komponente für einen einzelnen Beitrag innerhalb posts.jsx )
6. post.jsx (für einen einzelnen Beitrag)
7. products.jsx (enthält alle Produkte von WooCommerce)
8. product.jsx (zeigt ein einzelnes Produkt von WooCommerce an)
9. style.scss (um den gesamten CSS-Code im SASS-Format zu enthalten)

ReactDOM.render()

Die Datei index.jsx ist das Stammverzeichnis des Projekts. Was ich damit meine ist, dass die index.jsx die Komponente App enthält, die in das DOM gerendert wird.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

Die anderen Komponenten werden im React Router angegeben und beim Besuch der verschiedenen Routen geladen.

So schreiben wir modulare Komponenten, bei denen alle verschiedenen Komponenten letztendlich bei index.jsx enden .

Zustandsbehaftete vs. zustandslose Komponenten

Sie hätten bemerkt, dass Komponenten auf eine der beiden folgenden Arten geschrieben wurden:

1. const App = () => (
2. class Post extends React.Component {

Der erste Weg ist, wie wir zustandslose Komponenten schreiben, und der zweite ist ein Beispiel für zustandsbehaftete Komponenten. Zustandslos bedeutet, dass die Komponente keinen „Zustand“ enthält. „state“ ist im Wesentlichen eine Variable, die Informationen innerhalb der Komponente enthält, und jedes Mal, wenn sich die Variable ändert, wird die Komponente neu gerendert. Zustandsbehaftete Komponenten werden auch als „intelligente Komponenten“ bezeichnet. Die Zustandsvariablen werden somit für die interne Kommunikation innerhalb dieser Komponente verwendet.

Der zweite Typ, zustandslose Komponenten, enthält keine Zustandsvariable und wird manchmal als „dumme Komponente“ bezeichnet. Wie Stateful Components haben sie jedoch „Requisiten“, also Eigenschaften, die von ihren Elternkomponenten an sie weitergegeben werden.

Stateful-Komponenten haben die React-Lebenszyklusmethoden, während die Stateless-Komponente nur die render() Methode hat, die die Standardmethode dafür ist.

Lebenszyklusmethoden reagieren

Dies sind Methoden, die in verschiedenen Phasen des Lebenszyklus der Komponente aufgerufen werden und die wir überschreiben können, um unseren eigenen Code in diesen Instanzen auszuführen. Wir verwenden die folgenden Methoden in unserer Anwendung:

• constructor()
  Wird aufgerufen, bevor eine Komponente bereitgestellt wird.
• componentDidMount()
  Wird unmittelbar nach dem Mounten einer Komponente aufgerufen.
• render()
  Die Methode, die zum Rendern des JSX (HTML)-Inhalts aufgerufen wird.
• componentDidUpdate()
  Wird aufgerufen, wenn die Komponente aktualisiert wird.
• componentWillUnmount()
  Wird aufgerufen, wenn eine Komponente entfernt werden soll.

Hinweis : Um mehr über Komponenten und ihren Lebenszyklus zu erfahren, lesen Sie die Dokumentation hier .

JavaScript verspricht

Wir werden JavaScript Promises verwenden, um Daten von unserer WordPress REST API zu erhalten. Erstens haben wir die URL zur REST-API in unserer functions.php , wo wir sie als JavaScript-Variable angehängt haben, auf die wir vom Frontend zugreifen können.

Wir werden die Abruf-API-Methode von JavaScript verwenden, um Daten von den verschiedenen Endpunkten abzurufen. Wir fügen einen Loader hinzu, um dem Benutzer zu zeigen, während der Inhalt abgerufen wird:

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

Verwendung des React-Routers

React Router ist die Bibliothek, die das clientseitige Routing für unsere Anwendung übernimmt. Serverseitiges Routing ist mit WordPress möglich, aber um ein echtes SPA-Erlebnis zu erreichen, brauchen wir die Hilfe von React Router.

Seit Version 4 wurde React Router in drei Pakete unterteilt: React react-router , React react-router-dom und React react-router-native . Wir werden für dieses Projekt den react-router-dom verwenden, da dieser in Webanwendungen verwendet wird.

Da react-router-dom bereits installiert ist, können wir die Router-Konfiguration in die Datei index.jsx schreiben. Der Code wird wie folgt sein:

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

Der obige Code kümmert sich um das gesamte Routing, das auf der Clientseite gehandhabt wird. Das * in der letzten Zeile besagt, dass jede andere Route, die oben nicht erwähnt wurde, den Benutzer zur Seite „404 Not Found“ führt.

Das <Link to=""> Tag wird anstelle des <a href=””> -Tags verwendet, um mit React Router zwischen verschiedenen Seiten zu verlinken:

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

Testdaten abrufen

Nachdem Sie das Thema erstellt haben, ist es an der Zeit, einige Daten hinzuzufügen. Eine Möglichkeit, Daten hinzuzufügen, besteht darin, eigene Inhalte zu erstellen. Es gibt jedoch eine einfachere (und bessere) Möglichkeit, Daten zu unserer WordPress-Site hinzuzufügen. Diese Methode importiert Platzhalterdaten aus einer externen Quelle:

• Gehen Sie zu https://codex.wordpress.org/Theme_Unit_Test und laden Sie die Unit-Test-Daten des Themes herunter
• Gehen Sie zu Tools > Import > WordPress , um den WordPress-Importer zu installieren.
• Nachdem der WordPress-Importer installiert ist, klicken Sie auf Run Importer.
• Klicken Sie im Importer auf „Datei auswählen“.
• Wählen Sie die heruntergeladene Datei aus und importieren Sie die Unit-Testdaten des WordPress-Themes

Jetzt müssen Sie die Datei theme-unit-test-data.xml auswählen und alle Platzhalterinhalte befinden sich jetzt auf Ihrer Website.

WooCommerce-Integration

Jetzt sind wir bereit, unseren Shop mit React zu betreiben. Wir verwenden zu diesem Zweck die Dateien products.jsx und product.jsx , deren Code posts.jsx bzw. post.jsx ähnelt .

Wir werden CelestialSettings unter 'woo' drei weitere Variablen hinzufügen (siehe Eine globale JavaScript-Variable):

1. URL
2. consumer_key
3. consumer_secret

Der Verbraucherschlüssel und das Verbrauchergeheimnis müssen über Dashboard → WooCommerce → Einstellungen → API → Schlüssel/Apps generiert werden.

Für die Woo-URL müssen Sie sie manuell hinzufügen (da WooCommerce die Übertragung nur über SSL zulässt, fügen Sie die URL mit https hinzu, dh https://localhost/celestial/wp-json/wc/v2/ ).

Kopieren Sie den Verbraucherschlüssel und das Verbrauchergeheimnis und fügen Sie sie an den entsprechenden Stellen in der functions.php ein. Dies dient als Authentifizierung für den Zugriff auf WooCommerce über einen API-Aufruf.

Besuchen Sie die WooCommerce-REST-API-Dokumentation für weitere Informationen über die API. Die Datei products.jsx enthält den Code zum Füllen des Shops mit Produkten. Die Produkte können von einem Administrator über das Dashboard hinzugefügt werden. Gehen Sie einfach zu Dashboard → Produkte → Neu hinzufügen und geben Sie die Produktdetails ein.

Wenn Sie auf ein bestimmtes Produkt klicken, werden Sie zur Seite product.jsx weitergeleitet :

Der Code für die obige Seite ähnelt post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

Dauerlinks

Damit das Theme korrekt funktioniert, müssen wir die folgenden Permalinks innerhalb von Dashboard → Einstellungen → Permalinks setzen:

1. Unter Allgemeine Einstellungen → Benutzerdefinierte Struktur : https://localhost/celestial/posts/%postname%/

2. Unter Produkt-Permalinks → Benutzerdefinierte Basis : /products/

Wenn Sie die Permalinks nicht wie oben setzen, funktioniert das Theme möglicherweise nicht wie gewünscht.

Ein WooCommerce-Fix

Wenn Sie zu localhost/celestial/products navigieren, erhalten Sie wahrscheinlich eine leere Stelle, an der die Produkte geladen werden sollen. Dies geschieht, weil WooCommerce authentifizierte Anfragen benötigt, während unser lokaler Host nicht https ist. So beheben Sie das Problem:

1. Besuchen Sie https://localhost/celestial/wp-json/wc/v2/products. Dies gibt uns eine Warnung:

1. Klicken Sie auf ADVANCED > Proceed to localhost (unsafe) .
2. Wenn Sie jetzt zur Produktseite zurückkehren, werden die Artikel korrekt angezeigt.

Hinweis : Wenn Sie Valet auf einem Mac verwenden, müssen Sie Valet Secure auf Ihrer Website ausführen, um die lokale Website mit einem TLS-Zertifikat zu sichern. Dies ist eine weitere Möglichkeit, das Problem zu beheben.

Was ist ScrollMagic?

ScrollMagic ist eine Bibliothek, mit der wir bestimmte Aktionen ausführen können, wenn wir durch die Seite scrollen. Um ScrollMagic zu verwenden, werden wir die ScrollMagic-JavaScript-Bibliothek in functions.php einreihen. Wir verwenden ScrollMagic für zwei Instanzen in diesem Projekt:

1. So laden Sie Beiträge innerhalb der Komponente posts.jsx verzögert :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   Lazy-Loading von Posts innerhalb der posts.jsx-Komponente
2. So zeigen Sie eine Einblendanimation für Beiträge an, die beim Scrollen durch Beiträge und Produkte in den Komponenten posts.jsx bzw. products.jsx erscheinen:

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   Anwenden einer Einblendanimation für Beiträge, die beim Scrollen erscheinen

Wir sind jetzt bereit, unser Design vom Front-End aus anzuzeigen. Navigieren Sie in Ihrem Webbrowser zu localhost/celestial und sehen Sie Ihr Design in Aktion.

Und klopfen Sie sich auf die Schulter, denn Sie haben das Thema nun erfolgreich erstellt!

Andere WordPress-Themes mit JavaScript-Bibliotheken

Wenn Sie dies hilfreich fanden, können Sie sich andere tolle entkoppelte WordPress-Designs ansehen, die mit modernen JavaScript-Bibliotheken/Frameworks erstellt wurden:

• Foxhound: Das erste entkoppelte Theme, das es in das WordPress-Themes-Repository geschafft hat. Dieses von Kelly Dwan geschriebene Thema verwendet React, Redux und React Router.
• Anadama React: Ein weiteres Theme vom gleichen Autor, aber mit Flux statt Redux und Page statt React Router.
• Wallace: Dieses von Kirby geschriebene Theme verwendet Angular mit der WordPress-REST-API.
• Picard: Von Automattic selbst geschrieben, um die Leistungsfähigkeit der WordPress-REST-API zu demonstrieren.
• React Verse: Ein React- und Redux-Theme, das ich basierend auf Foxhound geschrieben habe.

Nächste Schritte

Die Hauptabschnitte, die ich Ihnen zeigen wollte, sind jetzt fertig. Sie können mit dem Aufbau des Projekts fortfahren, um weitere Informationen zu erhalten. Dies sind einige Empfehlungen, die Sie befolgen könnten:

1. Ein vollwertiger Shop mit dem WooCommerce-Plugin, inklusive Checkout und Warenkorb;
2. Jeweils eine Seite für Archiv, Tag, Taxonomie usw.;
3. Zustandsverwaltung mit Redux oder Flux.
   

Viel Glück und fröhliches Programmieren!