Der Autor hat dieElectronic Frontier Foundationausgewählt, um eine Spende im Rahmen desWrite for DOnations-Programms zu erhalten.
Einführung
WordPress ist ein beliebtes Content-Management-System, das laut W3Techs (Web Technology Surveys)over 33% of websites on the Internet unterstützt. Ein Grund für die große Beliebtheit ist die einfache Einrichtung mit einer übersichtlichen Dokumentation. Darüber hinaus gibt es viele Community-Ressourcen, die WordPress-Entwickler unterstützen. WordPress kann viele Anwendungsfälle mit einer kostengünstigen oder sogar sofort einsatzbereiten Lösung lösen. Schließlich wird WordPress mit einem gut definierten Plugin-System geliefert, mit dem Entwickler benutzerdefinierten Code schreiben können, um ihre eigenen Funktionen hinzuzufügen. Dieses Pluginsystem ist gut dokumentiert, funktioniert gut und ist, wie Sie später in diesem Tutorial sehen werden, einfach zu bedienen.
Entwickler, die die reichhaltigsten und interaktivsten Erlebnisse bieten möchten, könnenJavaScript verwenden, die von Frameworks wieReact unterstützt werden. React ist eine JavaScript-Bibliothek, mit der Entwickler auf einfache Weise dynamische, interaktive Benutzeroberflächen erstellen können, die über eine typische statische Seite oder ein Formular hinausgehen. React wurde von Facebook entwickelt und ist daher aus Gründen der Sicherheit, Stabilität und Benutzerfreundlichkeit sehr beliebt. Es verfügt über eine gute Dokumentation und ein gut etabliertes, von der Community betriebenes Ökosystem mit Dokumentationen und Plugins.
In diesem Tutorial erfahren Sie, wie Sie eine React-Anwendung in eine WordPress-Site einbetten. Als Beispiel wird ein allgemeiner Anwendungsfall verwendet: Erstellen eines Widgets, das auf mehreren Seiten und manchmal auch mehrmals auf einer Seite eingebettet werden soll. Auf der Serverseite wird es alsWordPress shortcode implementiert. Ein Shortcode ähnelt einem HTML-Tag, verwendet jedoch eckige Klammern ([...]) anstelle von spitzen Klammern (<...>). Anstatt ein HTML-Element direkt zu rendern, wird eine PHP-Funktion aufgerufen, die wiederum HTML-Code rendert, der mit Daten aus der Datenbank interpoliert wird.
Am Ende dieses Tutorials haben Sie Ihren eigenen Shortcode erstellt, diesen in eine Seite in WP Admin eingefügt und diese Seite veröffentlicht. Auf dieser Seite wird Ihr React-Widget vom Browser angezeigt.
Voraussetzungen
Um diesem Tutorial folgen zu können, müssen Sie über Folgendes verfügen:
-
Ein Ubuntu 18.04-Server, der mit dem LernprogrammInitial Server Setup with Ubuntu 18.04eingerichtet wurde, um eine Firewall für Ihren Server zusammen mit einem neuen Benutzer mit Root-Rechten zu konfigurieren.
-
Ein vollständig registrierter Domainname. In diesem Tutorial wird
your_domainals Beispiel verwendet. Sie können einen Domain-Namen fürNamecheap kaufen, einen fürFreenom kostenlos erhalten oder den Domain-Registrar Ihrer Wahl verwenden. -
Die beiden folgenden DNS-Einträge wurden für Ihren Server eingerichtet. Sie könnenthis introduction to DigitalOcean DNS folgen, um Details zum Hinzufügen zu erhalten.
-
Ein A-Datensatz mit
your_domain, der auf die öffentliche IP-Adresse Ihres Servers verweist. -
Ein A-Datensatz mit
www.your_domain, der auf die öffentliche IP-Adresse Ihres Servers verweist.
-
-
Installationen von Apache, MySQL und PHP auf Ihrem Server. Sie können dies erhalten, indem SieHow To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 18.04 folgen.
-
Gesicherter Apache mitLet’s Encrypt durch Befolgen vonHow To Secure Apache with Let’s Encrypt on Ubuntu 18.04, um ein kostenloses SSL-Zertifikat zu generieren.
-
Eine WordPress-Installation, die Sie erhalten, indem SieHow To Install WordPress with LAMP on Ubuntu 18.04 und seine Voraussetzungen befolgen.
-
Installation vonNode.js durch Befolgen der Option „Installation mit einem PPA“ inHow To Install Node.js on Ubuntu 18.04. In diesem Lernprogramm wird Version
11.15.0verwendet. Wenn Sie alsocurlzum Herunterladen des Installationsskripts verwenden, ersetzen Sie10.xdurch11.x, um die in diesem Lernprogramm beschriebenen Schritte auszuführen.
[[Schritt-1 - Aktualisieren und Konfigurieren von Dateisystemberechtigungen]] == Schritt 1 - Aktualisieren und Konfigurieren von Dateisystemberechtigungen
Wenn Sie als Nicht-Root-Benutzer angemeldet sind, der unter der Voraussetzung vonInitial Server Setup with Ubuntu 18.04erstellt wurde, haben Sie keinen Zugriff auf das Anzeigen oder Bearbeiten von Dateien im WordPress-Verzeichnis. Dies ist ein Problem, da Sie später Dateien hinzufügen und ändern, um Ihr WordPress-Plugin und Ihre React-Anwendung zu erstellen. Um dieses Problem zu beheben, aktualisieren Sie in diesem Schritt Ihre WordPress-Konfiguration, sodass Sie Zugriff auf die Bearbeitung Ihrer WordPress-Dateien haben.
Führen Sie den folgenden Befehl aus, indem Sie den Namen Ihres Nicht-Root-Benutzers durchsammy und den Pfad zu Ihrem WordPress-Verzeichnis (dem Stammordner des Apache-Dokuments, den Sie in der Voraussetzung erstellt haben) durch/var/www/wordpress ersetzen:
sudo chown -R sammy:www-data /var/www/wordpressLassen Sie uns diesen Befehl aufschlüsseln:
-
sudo- Hiermit können Sie diesen Befehl alsrootausführen, da Sie Dateien ändern, auf diesammykeinen Zugriff hat. -
chown- Dieser Befehl ändert den Dateieigentum. -
-R- Dieses Flag ändert den Besitz rekursiv, einschließlich aller Unterordner und Dateien. -
sammy:www-data- Hiermit wird der Eigentümer als Ihr Nicht-Root-Benutzer (sammy) festgelegt und die Gruppe alswww-databeibehalten, sodass Apache weiterhin auf die Dateien zugreifen kann, um sie bereitzustellen. -
/var/www/wordpress- Dies gibt den Pfad zu Ihrem WordPress-Verzeichnis an. Dies ist das Verzeichnis, in dem sich der Eigentümer ändert.
Um zu überprüfen, ob dieser Befehl erfolgreich war, listen Sie den Inhalt des WordPress-Verzeichnisses auf:
ls -la /var/www/wordpressSie sehen eine Auflistung des Inhalts des Verzeichnisses:
Outputtotal 216
drwxr-x--- 5 sammy www-data 4096 Apr 13 15:42 .
drwxr-xr-x 4 root root 4096 Apr 13 15:39 ..
-rw-r----- 1 sammy www-data 235 Apr 13 15:54 .htaccess
-rw-r----- 1 sammy www-data 420 Nov 30 2017 index.php
-rw-r----- 1 sammy www-data 19935 Jan 1 20:37 license.txt
-rw-r----- 1 sammy www-data 7425 Jan 9 02:56 readme.html
-rw-r----- 1 sammy www-data 6919 Jan 12 06:41 wp-activate.php
drwxr-x--- 9 sammy www-data 4096 Mar 13 00:18 wp-admin
-rw-r----- 1 sammy www-data 369 Nov 30 2017 wp-blog-header.php
-rw-r----- 1 sammy www-data 2283 Jan 21 01:34 wp-comments-post.php
-rw-r----- 1 sammy www-data 2898 Jan 8 04:30 wp-config-sample.php
-rw-r----- 1 sammy www-data 3214 Apr 13 15:42 wp-config.php
drwxr-x--- 6 sammy www-data 4096 Apr 13 15:54 wp-content
-rw-r----- 1 sammy www-data 3847 Jan 9 08:37 wp-cron.php
drwxr-x--- 19 sammy www-data 12288 Mar 13 00:18 wp-includes
-rw-r----- 1 sammy www-data 2502 Jan 16 05:29 wp-links-opml.php
-rw-r----- 1 sammy www-data 3306 Nov 30 2017 wp-load.php
-rw-r----- 1 sammy www-data 38883 Jan 12 06:41 wp-login.php
-rw-r----- 1 sammy www-data 8403 Nov 30 2017 wp-mail.php
-rw-r----- 1 sammy www-data 17947 Jan 30 11:01 wp-settings.php
-rw-r----- 1 sammy www-data 31085 Jan 16 16:51 wp-signup.php
-rw-r----- 1 sammy www-data 4764 Nov 30 2017 wp-trackback.php
-rw-r----- 1 sammy www-data 3068 Aug 17 2018 xmlrpc.phpDiese Dateien sind diejenigen, die im WordPress-Kern in der Dateilatest.tar.gz enthalten sind, die Sie vonwordpress.org in der VoraussetzungHow To Install WordPress with LAMP on Ubuntu 18.04 heruntergeladen haben. Wenn die Berechtigungen wie in der vorherigen Ausgabe angezeigt werden, bedeutet dies, dass Ihre Dateien und Verzeichnisse korrekt aktualisiert wurden.
In diesem Schritt haben Sie Ihre WordPress-Installation so aktualisiert, dass Sie die Dateien selbst bearbeiten können. Im nächsten Schritt werden Sie diesen Zugriff verwenden, um Dateien zu erstellen, aus denen ein WordPress-Plugin besteht.
[[Schritt-2 - Erstellen eines einfachen WordPress-Plugins]] == Schritt 2 - Erstellen eines einfachen WordPress-Plugins
Nachdem Sie nun Zugriff auf das Ändern von Dateien im WordPress-Verzeichnis haben, erstellen Sie ein einfaches WordPress-Plugin und fügen es der Installation hinzu. Dadurch kann React später im Tutorial mit WordPress interagieren.
Ein WordPress-Plugin kann so einfach sein wie:
-
Ein Verzeichnis in
wp-content/plugins. -
Eine Datei in diesem Verzeichnis mit demselben Namen und der Dateierweiterung
.php. -
Ein spezieller Kommentar oben in dieser Datei, der WordPress wichtige Plugin-Metadaten liefert.
Um ein Plugin für den React-Code zu erstellen, den Sie später schreiben werden, erstellen Sie zunächst ein Verzeichnis für das WordPress-Plugin. In diesem Tutorial wird der Einfachheit halber das Pluginreact-wordpress genannt. Führen Sie den folgenden Befehl aus und ersetzen Siewordpress durch Ihren Apache-Dokumentstamm:
mkdir /var/www/wordpress/wp-content/plugins/react-wordpressNavigieren Sie dann zu dem neu erstellten Verzeichnis. Nachfolgende Befehle werden von hier aus ausgeführt.
cd /var/www/wordpress/wp-content/plugins/react-wordpressLassen Sie uns jetzt die Plugin-Datei erstellen. In diesem Lernprogramm wird nano, das mit dem Befehlnano aufgerufen wird, als Befehlszeilentexteditor für alle Dateien verwendet. Sie können auch einen anderen Texteditor Ihrer Wahl verwenden, z. B.Pico,Vim oderEmacs.
Öffnen Siereact-wordpress.php zum Bearbeiten:
nano react-wordpress.phpFügen Sie Ihrer Datei die folgenden Zeilen hinzu, um den Start des Plugins zu erstellen:
/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
Der kommentierte Abschnitt oben enthält Metadaten für das Plugin, und die Zeile, in der nach der KonstanteABSPATHgesucht wird, verhindert, dass ein schlechter Akteur direkt über seine URL auf dieses Skript zugreift. ABSPATH ist der absolute Pfad zu Ihrem WordPress-Stammverzeichnis. Wenn alsoABSPATH definiert ist, können Sie sicher sein, dass die Datei über die WordPress-Umgebung geladen wurde.
[.note] #Note: Für einen Plugin-Metadatenkommentar sind viele Felder verfügbar, aber nurPlugin Name ist erforderlich. Weitere Informationen finden Sie auf der SeiteHeader Requirements in der WordPress-Dokumentation.
#
Öffnen Sie als Nächstes einen Webbrowser und navigieren Sie zur SeitePluginsIhrer Domain (https://your_domain/wp-admin/plugins.php). Sie sehen Ihr Plugin zusammen mit den Standard-Plugins von WordPress:
Klicken Sie aufActivate, um Ihr Plugin zu aktivieren.
Sobald Sie Ihr Plugin aktiviert haben, wird die Zeile mit Ihrem Plugin blau hervorgehoben, mit einem blauen Rand links, und anstelle eines Links darunter, derActivate sagt, gibt es einen, derDeactivateagt ) s:
Als nächstes legen Sie die Struktur Ihres Plugins fest.
Gehen Sie zurück zu Ihrem Terminal, umreact-wordpress.php zu öffnen:
nano react-wordpress.phpAktualisieren Sie es dann, um die folgenden hervorgehobenen Zeilen hinzuzufügen, die nützliche Konstanten definieren:
/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
In den neu hinzugefügten Zeilen haben Sie drei Konstanten definiert:
-
ERW_WIDGET_PATH- Dies ist der Pfad zur React-Anwendung. -
ERW_ASSET_MANIFEST- Dies ist der Pfad zum React-Asset-Manifest, einer Datei, die die Liste der JavaScript- und CSS-Dateien enthält, die auf der Seite enthalten sein müssen, damit Ihre Anwendung funktioniert. -
ERW_INCLUDES- Dieses Unterverzeichnis enthält alle PHP-Dateien.
Beachten Sie, dass sich jedesdefine() aufplugin_dir_path( __FILE__ ) bezieht. Das steht für den Verzeichnispfad zu dieser Datei.
Speichern Sie nach dem Hinzufügen der Konstantendefinitionen die Datei und schließen Sie den Editor.
[.note] #Note: Es ist wichtig,namespace Ihre Konstanten zu verwenden. In diesem Fall verwenden wir den NamespaceERW_, der fürEmbedding React in WordPress steht. Durch das Präfixieren von Variablen mit diesem Namespace wird sichergestellt, dass sie eindeutig sind, damit sie nicht mit Konstanten in Konflikt stehen, die in anderen Plugins definiert sind.
#
Beginnen Sie zum Erstellen des Ordnersincludes/, der die anderen PHP-Dateien enthält, auf der obersten Ebene des Plugin-Verzeichnisses/var/www/your_domain/wp-content/plugins/react-wordpress. Dann erstellen Sie den Ordner:
mkdir includesNachdem Sie die PHP-bezogenen Dateien und Ordner, die für die Erstellung eines WordPress-Plugins erforderlich sind, gerüstet haben, erstellen Sie die ersten Dateien und Ordner für React.
[[Schritt 3 - Initialisieren der Reaktionsanwendung]] == Schritt 3 - Initialisieren der Reaktionsanwendung
In diesem Schritt verwenden SieCreate React App, um Ihre React-Anwendung zu initialisieren.
Dieses Tutorial wurde mit Create React App Version3.0.1 getestet. Version3.0.0 hat wichtige Änderungen an der Struktur vonasset-manifest.json vorgenommen, sodass diese frühere Version ohne Änderungen nicht mit diesem Lernprogramm kompatibel ist. Um sicherzustellen, dass Sie die hier erwartete Version verwenden, führen Sie diesen Befehl aus, um Create React App zu installieren:
sudo npm install --global [email protected]Dieser Befehl installiert die Version3.0.1der Create React App. Das Flag--global installiert es systemweit. Durch die systemweite Installation wird sichergestellt, dass Sie die gerade installierte Version verwenden, wenn Siecreate-react-app (odernpx create-react-app) ohne angegebenen Pfad ausführen.
Verwenden Sie diese nach der Installation von Create React App, um die React-Anwendung zu erstellen. In diesem Tutorial wird die Appwidget benannt:
sudo create-react-app widgetDieser Befehl verwendetnpx, eine Binärdatei, die mitNPM geliefert wird. Es wurde entwickelt, um die Verwendung von CLI-Tools und anderen ausführbaren Dateien, die auf NPM gehostet werden, zu vereinfachen. Diese Tools werden installiert, wenn sie nicht lokal gefunden werden.
Der Befehlcreate-react-app generiert einen Projektordner und alle erforderlichen Dateien für eine grundlegende React-App. Dies umfasst eineindex.html-Datei, die JavaScript-, CSS- und Testdateien startet, und einepackage.json-Datei zum Definieren Ihres Projekts und Ihrer Abhängigkeiten. Es enthält Abhängigkeiten und Skripts, mit denen Sie Ihre Anwendung für die Produktion erstellen können, ohne zusätzliche Build-Tools installieren und konfigurieren zu müssen.
Sobald Sie diewidget-App eingerichtet haben, sieht die Ausgabe im Terminal ungefähr so aus:
Output...
Success! Created widget at /var/www/wordpress/wp-content/plugins/react-wordpress/widget
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd widget
npm start
Happy hacking!Navigieren Sie als Nächstes zum neu erstellten Verzeichnis:
cd widgetSie können Ihre Anwendung jetzt mitdefault build command,npm run build erstellen. Dieser Befehlbuild überprüft die Dateipackage.json unter dem Schlüsselscripts für ein Skript mit dem Namenbuild:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json
{
"name": "widget",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}Dies ruft die ausführbare Dateireact-scripts.jsauf, die vom Knotenmodulreact-scriptsbereitgestellt wird. Dies ist eine der Kernkomponenten, die voncreate-react-app bereitgestellt werden. Dies ruft wiederum das Build-Skript auf, daswebpack verwendet, um Ihre Projektdateien in statische Asset-Dateien zu kompilieren, die Ihr Browser versteht. Dies geschieht durch:
-
Abhängigkeiten auflösen.
-
Kompilieren vonSASS Dateien in CSS und JSX oderTypeScript in JavaScript.
-
Umwandlung der Syntax vonES6in die Syntax vonES5mit besserer browserübergreifender Kompatibilität.
Nachdem Sie etwas überbuild wissen, führen Sie den Befehl in Ihrem Terminal aus:
sudo npm run buildSobald der Befehl ausgeführt wurde, erhalten Sie eine Ausgabe ähnlich der folgenden:
Output> [email protected] build /var/www/wordpress/wp-content/plugins/react-wordpress/widget
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
36.83 KB (+43 B) build/static/js/2.6efc73d3.chunk.js
762 B (+44 B) build/static/js/runtime~main.a8a9905a.js
710 B (+38 B) build/static/js/main.2d1d08c1.chunk.js
539 B (+44 B) build/static/css/main.30ddb8d4.chunk.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://bit.ly/CRA-deployIhr Projekt ist jetzt erstellt, aber bevor Sie mit dem nächsten Schritt fortfahren, sollten Sie sicherstellen, dass Ihre Anwendung nur geladen wird, wenn sie vorhanden ist.
React verwendet ein HTML-Element im DOM, in dem die Anwendung gerendert wird. Dies wird alstarget-Element bezeichnet. Standardmäßig hat dieses Element die IDroot. Um sicherzustellen, dass dieserroot-Knoten die App ist, die Sie erstellen, ändern Siesrc/index.js, um die ID dertarget auf die Namespaceerw-root zu überprüfen. Öffnen Sie dazu zuerstsrc/index.js:
sudo nano src/index.jsÄndern Sie die markierten Linien und fügen Sie sie hinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const target = document.getElementById('erw-root');
if (target) { ReactDOM.render(Speichern und beenden Sie die Datei, wenn Sie mit der Bearbeitung fertig sind.
In dieser Datei haben Sie zwei wichtige Änderungen an der Standarddateiindex.jsvorgenommen:
-
Sie haben das Zielelement von
<div id="root"></div>in<div id="erw-root"></div>geändert, damit es für Ihre Anwendung einen Namespace hat. -
Sie haben den Aufruf von
ReactDOM.render()in eineif (...)-Anweisung eingeschlossen, sodass die App nur geladen wird, wenn sie vorhanden ist.
[.note] #Note: Wenn Sie erwarten, dass das Widget auf jeder Seite vorhanden ist, möchten Sie möglicherweise auch eine Zeile zur Fehlerbehandlung hinzufügen, die eine Nachricht an die Konsole druckt, wenn ein Element mit der IDerw-root wird nicht gefunden. In diesem Tutorial wird dieser Schritt jedoch weggelassen. Eine Zeile wie diese würde auf jeder Seite, auf der das Element nicht vorhanden ist, einen Konsolenfehler verursachen, einschließlich solcher, in die Sie das Element nicht aufnehmen möchten. Diese mehrfachen JavaScript-Konsolenfehler können dazu führen, dass die Suchmaschinen-Rankings für Ihre Website gesenkt werden.
#
Nach dem Ändern einer JavaScript- oder CSS-Datei in Ihremsrc/-Verzeichnis ist es wichtig, dass Sie Ihre App neu kompilieren, damit Ihre Änderungen übernommen werden. Führen Sie zum Neuerstellen Ihrer App Folgendes aus:
sudo npm run buildJetzt enthält Ihrbuild/-Verzeichnis eine funktionierende React-Anwendung in Form von JavaScript- und CSS-Dateien. Der nächste Schritt besteht darin, einige PHP-Dateien einzurichten, mit denen Sie JavaScript und CSS in die Seite einreihen können.
[[Schritt 4 - Einreihen der Javascript- und CSS-Dateien]] == Schritt 4 - Einreihen der JavaScript- und CSS-Dateien
In diesem Schritt verwenden Sie WordPress-Aktionen und -Filter, um:
-
Geben Sie den Script-Enqueueing-Code zum entsprechenden Zeitpunkt im WordPress-Seitenladezyklus aus.
-
Enqueue your JavaScript and CSS files auf eine Weise, die die Seitenladegeschwindigkeit am wenigsten beeinflusst.
WordPress verwendetactions and filters als primäre Hooks. Mit Aktionen können Sie Code zu einem bestimmten Zeitpunkt im Ladezyklus der Seite ausführen. Durch Filter wird das bestimmte Verhalten geändert, indem der Rückgabewert von Funktionen geändert wird, die Sie ansonsten nicht besitzen.
Um diese Hooks zu verwenden, erstellen Sie eine PHP-Datei, die den Code enthält, der das Asset-Manifest analysiert. Dies ist dieselbe Datei, die Sie später verwenden werden, um alle Assets in die Warteschlange zu stellen, sodass die Skripte in das Tag<head> geschrieben werden.
Verwenden Sie vor dem Erstellen der Datei den folgenden Befehl, um aus dem Verzeichnis mit Ihrer React-App in das Plugin-Verzeichnisreact-wordpressder obersten Ebene zu navigieren:
cd /var/www/wordpress/wp-content/plugins/react-wordpressErstellen Sie die Dateienqueue.php im Ordnerincludes/:
nano includes/enqueue.phpPlatzieren Sie zunächst das öffnende<?php-Tag oben in der Datei. Fügen Sie auch die Zeile hinzu, die nachABSPATH sucht. Dies ist, wie bereits erwähnt, eine bewährte Methode in jeder PHP-Datei:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php
Speichern und beenden Sie diese Datei.
Aktualisieren Sie dannreact-wordpress.php, umenqueue.php vom Projekt zu fordern. Öffnen Sie zuerst die Datei zum Bearbeiten:
nano react-wordpress.phpFügen Sie die folgende hervorgehobene Zeile hinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
In WordPress-Plugins ist es üblich, andere PHP-Dateien aus dem Verzeichnisincludes/zu benötigen, um wichtige Aufgaben in Blöcke aufzuteilen. Die Funktionrequire_once()analysiert den Inhalt der als Argument übergebenen Datei, als ob der PHP-Code dieser Datei genau dort inline geschrieben worden wäre. Im Gegensatz zum ähnlichen Befehlinclude löstrequire eine Ausnahme aus, wenn die Datei, die Sie benötigen, nicht gefunden werden kann. Die Verwendung vonrequire_once() (im Gegensatz zu nurrequire()) stellt sicher, dassenqueue.php nicht mehrmals analysiert wird, wenn die Direktiverequire_once( ERW_INCLUDES . '/enqueue.php' ); mehrmals angegeben wird.
Speichern und schließen Sie die Datei.
Öffnen Sie nunincludes/enqueue.php erneut:
nano includes/enqueue.phpFügen Sie dann den folgenden hervorgehobenen Code hinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php
Wenn Sie der Aktioniniteine Funktion hinzufügen, wird dieser Code während derinit-Phase des Ladevorgangs ausgeführt, nachdem Ihr Theme und andere Plugins geladen wurden.
Durch Festlegen der Attributeasync unddefer für die Tags<script> mithilfe des Filtersscript_loader_tag wird der Browser angewiesen, die Skripts asynchron zu laden, anstatt die DOM-Erstellung und das Rendern von Seiten zu blockieren.
Die Aktionwp_enqueue_scriptstellt dann Front-End-Elemente in die Warteschlange. Weitere Informationen finden Sie unterthis page.
Stellen Sie sicher, dass Sie die Datei schreiben und beenden.
Sie haben WordPress nun angewiesen, Skript- und Stylesheet-Tags auf die Seite zu schreiben. Im nächsten Schritt analysieren Sie eine Datei mit dem Namen Asset-Manifest. Auf diese Weise erhalten Sie die Pfade zu allen Dateien, die Sie in die Warteschlange stellen müssen.
[[Schritt 5 - Analyse des Asset-Manifests]] == Schritt 5 - Analyse des Asset-Manifests
In diesem Schritt analysieren Sie das vom React-Build generierte Asset-Manifest in eine Liste von JavaScript- und CSS-Dateien.
Wenn Sie die Anwendung erstellen, erstellt das React-Erstellungsskript Ihr Projekt in mehrere JavaScript- und CSS-Dateien. Die Anzahl und Namen der Dateien variieren von Build zu Build, da jeder einen Hash des Dateiinhalts enthält. Das Asset-Manifest enthält den Namen jeder im letzten Build generierten Datei sowie den Pfad zu dieser Datei. Indem Sie es programmgesteuert analysieren, können Sie sicher sein, dass Skript- und Stylesheet-Tags, die Sie auf die Seite schreiben, immer auf die richtigen Dateien verweisen, auch wenn sich die Namen ändern.
Untersuchen Sie zunächst dieasset-manifest.json mit dem Befehlcat:
cat widget/build/asset-manifest.jsonEs wird ungefähr so aussehen:
Output{
"files": {
"main.css": "/static/css/main.2cce8147.chunk.css",
"main.js": "/static/js/main.a284ff71.chunk.js",
"main.js.map": "/static/js/main.a284ff71.chunk.js.map",
"runtime~main.js": "/static/js/runtime~main.fa565546.js",
"runtime~main.js.map": "/static/js/runtime~main.fa565546.js.map",
"static/js/2.9ca06fd6.chunk.js": "/static/js/2.9ca06fd6.chunk.js",
"static/js/2.9ca06fd6.chunk.js.map": "/static/js/2.9ca06fd6.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js": "/precache-manifest.e40c3c7a647ca45e36eb20f8e1a654ee.js",
"service-worker.js": "/service-worker.js",
"static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",
"static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
}
}Um es zu analysieren, sucht Ihr Code nach Objektschlüsseln, die mit.js und.css enden.
Öffnen Sie die Dateienqueue.php:
nano includes/enqueue.phpFügen Sie das markierte Snippet hinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/enqueue.php
$value ) {
if ( preg_match( '@static/js/(.*)\.chunk\.js@', $key, $matches ) ) {
if ( $matches && is_array( $matches ) && count( $matches ) === 2 ) {
$name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
wp_enqueue_script( $name, get_site_url() . $value, array( 'erw-main' ), null, true );
}
}
if ( preg_match( '@static/css/(.*)\.chunk\.css@', $key, $matches ) ) {
if ( $matches && is_array( $matches ) && count( $matches ) == 2 ) {
$name = "erw-" . preg_replace( '/[^A-Za-z0-9_]/', '-', $matches[1] );
wp_enqueue_style( $name, get_site_url() . $value, array( 'erw' ), null );
}
}
}
});
});Wenn Sie fertig sind, schreiben Sie die Datei und beenden Sie sie.
Der hervorgehobene Code bewirkt Folgendes:
-
Liest die Asset-Manifestdatei und analysiert sie als JSON-Datei. Es greift auf den Inhalt zu, der unter dem Schlüssel
'files'gespeichert ist, und speichert ihn in der Variablen$asset_manifest. -
Stellt die CSS-Hauptdatei in eine Warteschlange, falls vorhanden.
-
Stellt zuerst die React-Laufzeit und dann die JavaScript-Hauptdatei in die Warteschlange und legt die Laufzeit als Abhängigkeit fest, um sicherzustellen, dass sie zuerst auf die Seite geladen wird.
-
Analysiert die Liste der Asset-Manifest-Dateien nach JavaScript-Dateien mit dem Namen
static/js/<hash>.chunk.jsund stellt sie auf der Seite nach der Hauptdatei in die Warteschlange. -
Analysiert die Liste der Asset-Manifest-Dateien nach CSS-Dateien mit dem Namen
static/css/<hash>.chunk.cssund stellt sie auf der Seite nach der CSS-Hauptdatei in die Warteschlange.
[.note] #Note: Wenn Siewp_enqueue_script() undwp_enqueue_style verwenden, werden die Tags<script> und<link> für die in die Warteschlange gestellten Dateien auf jeder Seite angezeigt. Das letzte Argumenttrue weist WordPress an, die Datei unter der Fußzeile des Seiteninhalts und nicht am unteren Rand des Elements<head>zu platzieren. Dies ist wichtig, damit das Laden der JavaScript-Dateien den Rest der Seite nicht verlangsamt.
#
In diesem Schritt haben Sie die Dateipfade der von Ihrer App verwendeten Skripte und Stile isoliert. Im nächsten Schritt stellen Sie sicher, dass diese Dateipfade auf dasbuild-Verzeichnis Ihrer React-App verweisen und dass keine Ihrer Quelldateien über den Browser zugänglich ist.
[[Schritt 6 - Bereitstellen und Sichern statischer Dateien]] == Schritt 6 - Bereitstellen und Sichern statischer Dateien
Zu diesem Zeitpunkt haben Sie WordPress mitgeteilt, welche JavaScript- und CSS-Dateien geladen werden sollen und wo sie zu finden sind. Wenn Sie jedochhttps://your_domain im Browser besuchen und sich die JavaScript-Konsole ansehen, werden HTTP 404-Fehler angezeigt. (Weitere Informationen zur Verwendung der JavaScript-Konsole finden Sie unterthis article.)
Dies liegt daran, dass die URL-Route zur Datei (z. B./static/js/main.2d1d08c1.chunk.js) nicht mit dem tatsächlichen Pfad zur Datei übereinstimmt (z. B./wp-content/plugins/react-wordpress/widget/build/static/js/main.2d1d08c1.chunk.js).
In diesem Schritt korrigieren Sie dieses Problem, indem Sie React mitteilen, wo sich das Erstellungsverzeichnis befindet. Sie werden der.htaccess-Datei auch eine Apache-Umschreiberegel hinzufügen, um zu verhindern, dass Ihre Quelldateien im Browser angezeigt werden.
Öffnen Siepackage.json im Verzeichnis Ihrer React-Anwendung, um React den richtigen Pfad zu Ihrer App zu geben:
sudo nano widget/package.jsonFügen Sie dann die markierte Zeilehomepagehinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/package.json
{
"name": "widget",
"version": "0.1.0",
"private": true,
"homepage": "/wp-content/plugins/react-wordpress/widget/build",
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}Schreiben Sie und beenden Sie die Datei. Erstellen Sie dann Ihre React-Anwendung neu. Gehen Sie zur obersten Ebene vonwidget/:
cd widgetFühren Sie dann den Befehlbuild aus:
sudo npm run buildÜberprüfen Sie nach Abschluss des Build-Befehls das Asset-Manifest, indem Sie dessen Inhalt auf dem Terminal ausgeben:
cat build/asset-manifest.jsonSie werden sehen, dass sich alle Dateipfade geändert haben:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/build/asset-manifest.json
{
"files": {
"main.css": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css",
"main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js",
"main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/main.a28d856a.chunk.js.map",
"runtime~main.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js",
"runtime~main.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/runtime~main.2df87c4b.js.map",
"static/js/2.9ca06fd6.chunk.js": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js",
"static/js/2.9ca06fd6.chunk.js.map": "/wp-content/plugins/react-wordpress/widget/build/static/js/2.9ca06fd6.chunk.js.map",
"index.html": "/wp-content/plugins/react-wordpress/widget/build/index.html",
"precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js": "/wp-content/plugins/react-wordpress/widget/build/precache-manifest.233e0a9875cf4d2df27d6280d12b780d.js",
"service-worker.js": "/wp-content/plugins/react-wordpress/widget/build/service-worker.js",
"static/css/main.2cce8147.chunk.css.map": "/wp-content/plugins/react-wordpress/widget/build/static/css/main.2cce8147.chunk.css.map",
"static/media/logo.svg": "/wp-content/plugins/react-wordpress/widget/build/static/media/logo.5d5d9eef.svg"
}
}Dies teilt Ihrer App mit, wo die richtigen Dateien zu finden sind, stellt jedoch auch ein Problem dar: Es zeigt den Pfad zumsrc-Verzeichnis Ihrer App an, und jemand, der mitcreate-react-app vertraut ist, kannhttps://your_domain/wp-content/plugins/react-wordpress/widget/src/index.js und besuchen Beginnen Sie mit dem Durchsuchen der Quelldateien für Ihre App. Versuch es selber!
Um die Pfade zu schützen, auf die Benutzer nicht zugreifen sollen, fügen Sie der.htaccess-Datei Ihres WordPress eine Apache-Umschreiberegel hinzu.
nano /var/www/wordpress/.htaccessFügen Sie die vier markierten Zeilen hinzu:
/var/www/wordpress/.htaccess
RewriteRule ^wp-content/plugins/react-wordpress/widget/(build|public)/(.*) - [L]
RewriteRule ^wp-content/plugins/react-wordpress/widget/* totally-bogus-erw.php [L]
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPressDies weist Apache an, Browseranforderungen anwp-content/plugins/react-wordpress/widget/build/ oderwp-content/react-wordpress/widget/public/ zuzulassen. Alles andere wird zutotally-bogus-erw.php umgeleitet. Sofern Sie nicht eine Datei mit dem Namentotally-bogus-erw.php auf Ihrer obersten Ebene haben, wird diese Anforderung von WordPress bearbeitet, wodurch ein 404-Fehler ausgegeben wird.
Es gibt WordPress-Plugins wieStream, die die Anforderungsaktivität überwachen und 404s protokollieren. In den Protokollen werden auf der Anfrage die IP-Adresse und die Seite angezeigt, die angefordert wurden, als der Benutzer den 404 erhalten hat. Wenn Sie nachtotally-bogus-erw.php suchen, erfahren Sie, ob eine bestimmte IP-Adresse versucht, dassrc-Verzeichnis Ihrer React-App zu crawlen.
Achten Sie darauf, die Datei zu schreiben und zu beenden.
Nachdem Sie das Routing festgelegt haben, das zum Laden Ihrer JavaScript- und CSS-Dateien auf die Seite erforderlich ist, ist es an der Zeit, der Seite, mit der JavaScript interagiert, HTML-Elemente hinzuzufügen, um Ihre App zu rendern.
[[Schritt-7 - Erstellen eines Shortcodes]] == Schritt 7 - Erstellen eines Shortcodes
Mit Shortcodes können komplexe HTML-Blöcke, die mit serverseitigen Daten interpoliert sind, mit einer sehr einfachen In-Page-Syntax eingefügt werden. In diesem Schritt erstellen und registrieren Sie einen WordPress-Shortcode und verwenden diesen, um Ihre Anwendung in die Seite einzubetten.
Navigiere zur obersten Ebene deines Plugins:
cd /var/www/wordpress/wp-content/plugins/react-wordpress/Erstellen Sie eine neue PHP-Datei, die den Shortcode enthält:
touch includes/shortcode.phpBearbeiten Sie dann Ihre Haupt-PHP-Datei so, dassincludes/shortcode.php erforderlich ist, wenn Ihr Plugin geladen wird. Erste offenereact-wordpress.php:
nano react-wordpress.phpFügen Sie dann die folgende hervorgehobene Zeile hinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/react-wordpress.php
Schreiben Sie und beenden Sie die Datei.
Öffnen Sie nun die neu erstellte Shortcode-Datei:
nano includes/shortcode.phpFügen Sie den folgenden Code hinzu:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
Dieser Code enthält meistens Boilerplate. Es registriert einen Shortcode mit dem Namenerw_widget, der beim Aufrufen<div id="erw-root"></div>, das Stammelement der React-App, auf die Seite druckt.
Speichern und beenden Sieshortcode.php.
Um die React-App in Aktion zu sehen, müssen Sie eine neue WordPress-Seite erstellen und den Shortcode hinzufügen.
Navigieren Sie in einem Webbrowser zuhttps://your_domain/wp-admin. Ganz oben auf der Seite sehen Sie einen schwarzen Balken mit dem WordPress-Logo auf der linken Seite, gefolgt von einem Haussymbol, dem Namen Ihrer Website, einem Kommentarblasensymbol und einer Nummer sowie einem weiteren Link mit der Aufschrift+ New. Bewegen Sie den Mauszeiger über die Taste+ New und ein Menü wird geöffnet. Klicken Sie auf den MenüpunktPage.
Wenn der Bildschirm geladen wird, wird Ihr Cursor auf das Textfeld fokussiert, in demAdd title angezeigt wird. Klicken Sie dort und geben Sie den gewünschten Titel für die neue Seite ein. In diesem Tutorial werdenMy React App verwendet:
Angenommen, Sie verwendenWordPress Gutenberg editor, wird oben auf der Seite unter dem Titel eine Textzeile mitStart writing or type / to choose a block angezeigt. Wenn Sie mit der Maus über den Text fahren, werden rechts drei Symbole angezeigt. Wählen Sie den nächsten, der[/] ähnelt, um einen Shortcode-Block hinzuzufügen:
Geben Sie den Shortcode[erw_widget] in den neu hinzugefügten Textbereich ein. Klicken Sie dann auf die blaue SchaltflächePublish… in der oberen rechten Ecke des Fensters und drücken Sie zur BestätigungPublish.
Sie sehen einen grünen Balken, der bestätigt, dass die Seite veröffentlicht wurde. Klicken Sie auf den LinkView Page:
Auf dem Bildschirm sehen Sie Ihre App:
Jetzt, da Sie auf der Seite ein grundlegendes Rendering für React-Apps haben, können Sie diese App mit Optionen anpassen, die ein Administrator serverseitig bereitstellt.
[[Schritt 8 - Einfügen von vom Server generierten Einstellungen]] == Schritt 8 - Injizieren von vom Server generierten Einstellungen
In diesem Schritt fügen Sie Einstellungen in die Anwendung ein, indem Sie sowohl vom Server generierte als auch vom Benutzer bereitgestellte Daten verwenden. Auf diese Weise können Sie dynamische Daten in Ihrer Anwendung anzeigen und das Widget mehrmals auf einer Seite verwenden.
Öffnen Sie zunächst die Dateiindex.js:
sudo nano widget/src/index.jsLöschen Sie dann die Zeileimport App from './App'; und aktualisieren Sie den Inhalt vonindex.js mit den folgenden hervorgehobenen Zeilen:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
const App = () => (
Hello,
World!
);
const target = document.getElementById('erw-root');
if (target) { ReactDOM.render(Dadurch wird Ihre React-Anwendung so geändert, dass anstelle des Standardbildschirms "React-App erstellen" ein Element zurückgegeben wird, dasHello, World! lautet.
Speichern und beenden Sie die Datei. Öffnen Sie dannindex.css zum Bearbeiten:
nano widget/src/index.cssErsetzen Sie den Inhalt vonindex.css durch den folgenden Code:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css
.App {
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
margin-right: 20px;
position: relative;
}
.App .App__Message {
font-size: 15px;
line-height: 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}Die Stile für.App rendern ein 100-Pixel-Quadrat mit einem durchgezogenen Rand, und die Stile für.App__Message rendern Text, der sowohl vertikal als auch horizontal innerhalb des Quadrats zentriert ist.
Schreiben und beenden Sie die Datei und erstellen Sie die Anwendung neu:
cd widget
sudo npm run buildAktualisieren Sie nach erfolgreichem Buildhttps://your_domain/index.php/my-react-app/ in Ihrem Browser. Sie sehen nun das Feld, das Sie mit CSS gestaltet haben, zusammen mit dem TextHello, World!:
Als Nächstes fügen Sie benutzerdefinierte Einstellungen hinzu, die aus einer benutzerdefinierten Rahmenfarbe und -größe bestehen. Sie übergeben auch den Anzeigenamen des aktuellen Benutzers vom Server.
Aktualisieren des Shortcodes zum Akzeptieren von Argumenten
Um ein vom Benutzer angegebenes Argument zu übergeben, müssen Sie dem Benutzer zunächst die Möglichkeit geben, ein Argument zu übergeben. Zurück im Terminal, navigiere zurück zur obersten Ebene deines Plugins:
cd ..Öffnen Sie als Nächstes die Dateishortcode.phpzur Bearbeitung:
nano includes/shortcode.phpAktualisieren Sie Ihre Shortcode-Datei so, dass sie die folgenden hervorgehobenen Zeilen enthält:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
'black' );
$args = shortcode_atts( $default_atts, $atts );
return "";
});Schreiben Sie und beenden Sie die Datei. Beachten Sie, wie der Code dem Array$default_atts'color' => 'black' hinzufügt. Der Array-Schlüsselcolor weist WordPress an, zu erwarten, dass das Attributcolor möglicherweise an den Shortcode[erw_widget] übergeben wird. Der Array-Wertblack legt den Standardwert fest. Alle Shortcode-Attribute werden als Zeichenfolgen an die Shortcode-Funktion übergeben. Wenn Sie also keinen Standardwert festlegen möchten, können Sie stattdessen die leere Zeichenfolge ('') verwenden. In der letzten Zeile wird eine Klasse anstelle einer ID verwendet, da davon ausgegangen wird, dass mehr als ein Element auf der Seite vorhanden ist.
Kehren Sie nun zu Ihrem Browser zurück und klicken Sie auf die SchaltflächeEdit unter dem FeldHello, World!. Aktualisieren Sie die WordPress-Seite in Ihrem Browser, um eine zweite Instanz des Shortcodes hinzuzufügen, und fügen Sie beiden Instanzen ein Farbattribut hinzu. In diesem Tutorial werden[erw_widget color="#cf6f1a"] und[erw_widget color="#11757e"] verwendet:
Klicken Sie zum Speichern auf die blaue SchaltflächeUpdate.
[.note] #Note: Das zweite Widget wird noch nicht angezeigt. Sie müssen die React-App aktualisieren, um zu erwarten, dass mehrere Instanzen von einer Klasse anstelle einer einzelnen Instanz identifiziert werden, die durch eine ID identifiziert wird.
#
Öffnen Sie als Nächstesindex.js zum Bearbeiten:
sudo nano widget/src/index.jsAktualisieren Sie es mit den folgenden:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
const App = () => (
Hello,
World!
);
const targets = document.querySelectorAll('.erw-root');
Array.prototype.forEach.call(targets, target => ReactDOM.render(Schreiben Sie und beenden Sie die Datei. Die aktualisierten Zeilen rufen die React-App für jede Instanz mit der Klasseerw-root auf. Wenn der Shortcode also zweimal verwendet wird, werden auf der Seite zwei Quadrate angezeigt.
Öffnen Sie abschließendindex.css zum Bearbeiten:
sudo nano widget/src/index.cssAktualisieren Sie die Datei so, dass sie die folgende hervorgehobene Zeile enthält:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.css
.erw-root { display: inline-block; }
.App {
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
margin-right: 20px;
position: relative;
}
.App .App__Message {
font-size: 15px;
line-height: 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}Mit dieser hinzugefügten Zeile werden mehrere benachbarte Widgets nebeneinander anstatt übereinander angezeigt.
Speichern und beenden Sie die Datei.
Kompilieren Sie jetzt Ihre React-App neu:
cd widget
sudo npm run buildWenn Sie nun die Seite in Ihrem Browser aktualisieren, werden beide Widgets angezeigt:
Beachten Sie, dass die Widgets die Rahmenfarbe immer noch nicht anzeigen. Dies wird in einem zukünftigen Abschnitt behandelt.
Jede Widget-Instanz eindeutig identifizieren
Um jedes Widget eindeutig zu identifizieren, muss eine ID vom Server übergeben werden. Dies kann über das Attributdata-id des Stammelements erfolgen. Dies ist wichtig, da jedes Widget auf der Seite unterschiedliche Einstellungen haben kann.
Kehren Sie dazu zu Ihrem Plugin-Verzeichnis der obersten Ebene zurück und öffnen Sieshortcode.php zur Bearbeitung:
cd ..
nano includes/shortcode.phpAktualisieren Sie es mit den folgenden hervorgehobenen Zeilen:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
'black' );
$args = shortcode_atts( $default_atts, $atts );
$uniqid = uniqid('id');
return "";
});Die erste neue Zeile generiert eine eindeutige ID mit dem Präfixid. In der aktualisierten Zeile wird die ID mithilfe des Attributsdata-idan den React-Stamm angehängt. Dadurch wird die ID in React zugänglich.
Speichern Sie die Datei, aber beenden Sie sie noch nicht.
Schreiben Sie Einstellungen in das JavaScriptwindow-Objekt
In der Shortcode-Datei schreiben Sie die Einstellungen in ein fensterglobales JavaScript-Objekt auf die Seite. Durch die Verwendung deswindow-Objekts wird sichergestellt, dass über React darauf zugegriffen werden kann.
Wennshortcode.phpnoch geöffnet ist, aktualisieren Sie es so, dass es Folgendes enthält:
/var/www/wordpress/wp-content/plugins/react-wordpress/includes/shortcode.php
'black' );
$args = shortcode_atts( $default_atts, $atts );
$uniqid = uniqid('id');
global $current_user;
$display_name = $current_user ? $current_user->display_name : 'World';
ob_start(); ?>
Diese Aktualisierungen schreiben einen<script>-Block vor jedes Element, das das fensterglobale Einstellungsobjekt initialisiert und mit den in WP Admin bereitgestellten Daten füllt.
[.note] #Note: Die Syntax<?= ist eine Abkürzung für<?php echo
#
Speichern und beenden Sie die Datei.
Jetzt istinspectdie WordPress-Seite in Ihrem Webbrowser. Dies zeigt Ihnen den HTML-Code für Ihre Seite. Wenn SieCTRL+F und nachwindow.erwSettings suchen, werden die Einstellungen wie folgt in den HTML-Code Ihrer Seite geschrieben:
...
window.erwSettings = window.erwSettings || {};
window.erwSettings["id5d5f1958aa5ae"] = {
'color': '#cf6f1a',
'name': 'sammy',
}
...Einstellungen von React abrufen
In der React-App rufen Sie die Einstellungen basierend auf der ID ab und übergeben den Randfarbwert als Eigenschaft (prop) an die KomponenteApp. Auf diese Weise kann die KomponenteAppden Wert verwenden, ohne wissen zu müssen, woher er stammt.
Öffnen Sieindex.js zum Bearbeiten:
sudo nano widget/src/index.jsAktualisieren Sie es so, dass es die folgenden hervorgehobenen Zeilen enthält:
/var/www/wordpress/wp-content/plugins/react-wordpress/widget/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
const App = ({ settings }) => (
Hello,
{settings.name}!
);
const targets = document.querySelectorAll('.erw-root');
Array.prototype.forEach.call(targets, target => {
const id = target.dataset.id;
const settings = window.erwSettings[id];
ReactDOM.render(Speichern Sie die Datei und beenden Sie Ihren Texteditor.
Ihre React-App verwendet jetzt die eindeutige ID aus dem Fenster-globalenwindow.erwSettings-Objekt, um Einstellungen abzurufen und an dieApp-Komponente zu übergeben. Um dies zu erreichen, kompilieren Sie Ihre Anwendung erneut:
cd widget
sudo npm run buildAktualisieren Sie nach Abschluss dieses letzten Schritts die WordPress-Seite in Ihrem Browser. In den Widgets werden die vom Benutzer bereitgestellte Rahmenfarbe und der vom Server bereitgestellte Anzeigename angezeigt:
