Dieser praktische Artikel nutzt die Flexibilität von WordPress und die leistungsstarke Benutzeroberfläche (UI) von React für die Theme-Entwicklung. Wir zeigen dir, wie die Integration von WordPress und React deine WordPress-Projekte verbessert, und führen dich durch die Schritte zur Erstellung eines Themes.
Voraussetzungen
Um diesem Artikel folgen zu können, solltest du Folgendes mitbringen:
- Eine WordPress-Website. Kinsta bietet mehrere Einrichtungsoptionen, darunter die lokale Entwicklung mit DevKinsta, ein benutzerfreundliches MyKinsta-Dashboard oder die programmatische Einrichtung über die Kinsta-API.
- Node.js und npm (Node Package Manager) oder yarn auf deinem Computer installiert haben
Erstellen einer grundlegenden WordPress-Theme-Struktur
Bei der Erstellung einer grundlegenden WordPress-Theme-Struktur geht es darum, eine Reihe von Dateien und Verzeichnissen einzurichten, die WordPress verwendet, um die Stile, Funktionen und Layouts deines Themes auf eine WordPress-Website anzuwenden.
- In deiner DevKinsta-Umgebung öffnest du den Ordner deiner Website. Navigiere zum Verzeichnis wp-content/themes.
- Erstelle einen neuen Ordner für dein Theme. Der Ordnername sollte eindeutig und beschreibend sein – zum Beispiel my-basic-theme.
- Erstelle im Theme-Ordner diese wichtigen Dateien und lass sie leer:
- style.css – Dies ist die wichtigste Stylesheet-Datei. Sie enthält auch die Header-Informationen für dein Theme.
- functions.php – Diese Datei definiert Funktionen, Klassen, Aktionen und Filter, die von deinem Theme verwendet werden sollen.
- index.php – Dies ist die wichtigste Vorlagendatei. Sie ist für alle Themes erforderlich.
Wenn du nicht mit React arbeitest, musst du auch die folgenden Dateien erstellen. Aber mit React würden wir später Komponenten dafür erstellen.
- header.php – Enthält den Header-Bereich deiner Website.
- footer.php – Enthält den Fußzeilenbereich deiner Website.
- sidebar.php – Für den Bereich der Seitenleiste, wenn dein Theme Seitenleisten enthält.
Als Nächstes öffnest du die Datei style.css und fügst das Folgende am Anfang der Datei hinzu:
/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/Dieses Codeschnipsel ist der Header-Abschnitt für die style.css-Datei eines WordPress-Themes und enthält wichtige Metadaten wie den Namen des Themes, Angaben zum Autor, die Version und die Lizenz. Er hilft WordPress, das Theme zu erkennen und im Dashboard anzuzeigen, einschließlich seiner Beschreibung und Tags zur Kategorisierung.
React in WordPress einbinden
Wenn du React in ein WordPress-Theme integrierst, kannst du die komponentenbasierte Architektur von React nutzen, um dynamische, interaktive Benutzeroberflächen auf deiner WordPress-Website zu erstellen. Um React zu integrieren, verwendest du das Paket @wordpress/scripts.
Das ist eine Sammlung wiederverwendbarer Skripte, die auf die Entwicklung von WordPress zugeschnitten sind. WordPress stellt es zur Verfügung, um den Konfigurations- und Erstellungsprozess zu vereinfachen, insbesondere wenn du moderne JavaScript-Workflows wie React in WordPress-Themes und Plugins integrierst.
Dieses Toolset umfasst gängige Aufgaben und macht es einfacher, mit JavaScript im WordPress-Ökosystem zu entwickeln.
Passe dein Theme an
Jetzt, wo du eine grundlegende WordPress-Theme-Struktur hast, kannst du dein Theme anpassen.
- Füge im Verzeichnis deines Themes den folgenden Code in die Datei functions.php ein:
<?php function my_react_theme_scripts() { wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true); wp_enqueue_style('my-react-theme-style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'my_react_theme_scripts');Die Datei functions.php integriert React in dein WordPress-Theme. Sie verwendet die Funktionen
wp_enqueue_scriptundwp_enqueue_style, um JavaScript- und Cascading Style Sheet (CSS)-Dateien zu deinem Theme hinzuzufügen.Die WordPress-Funktion
wp_enqueue_scriptbenötigt mehrere Argumente:- Den Handle-Namen (
'my-react-theme-app'), der das Skript eindeutig identifiziert - Den Pfad zur Skriptdatei
- Das Array der Abhängigkeiten,
array('wp-element'), das angibt, dass das Skript vom WordPress-Wrapper für React('wp-element')abhängt. - Die Versionsnummer
('1.0.0') - Die Position
true, die angibt, dass das Skript in der Fußzeile des HTML-Dokuments geladen werden soll, um die Ladegeschwindigkeit der Seite zu verbessern
Die Funktion
wp_enqueue_stylenimmt die folgenden Argumente entgegen:- Der Handle-Name
'my-react-theme-style', der das Stylesheet eindeutig identifiziert - Die Quelle
get_stylesheet_uri(), die die URL zum Hauptstylesheet des Themes (style.css) zurückgibt und sicherstellt, dass die Stile des Themes angewendet werden
- Das
add_actionElement, das eine benutzerdefinierte Funktion'my_react_theme_scripts'mit einer bestimmten Aktion ('wp_enqueue_scripts') verknüpft. Dadurch wird sichergestellt, dass dein JavaScript und CSS korrekt geladen werden, wenn WordPress die Seite rendert.
Dieser Code stellt sicher, dass die kompilierte JavaScript-Datei deiner React-Anwendung, die sich im <Ihr-Theme-Verzeichnis>/build/index.js befindet, und das Haupt-Stylesheet deines Themes mit deinem Theme geladen werden.
Das /build-Verzeichnis stammt in der Regel von der Kompilierung deiner React-Anwendung mit einem Tool wie
create-react-appoder webpack, das deinen React-Code in eine produktionsreife, minimierte JavaScript-Datei bündelt.Dieses Setup ist wichtig für die Integration von React-Funktionen in dein WordPress-Theme und ermöglicht dynamische, Anwendungs-ähnliche Benutzererfahrungen innerhalb einer WordPress-Website.
- Den Handle-Namen (
- Als Nächstes aktualisierst du den Inhalt der Datei index.php:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="app"></div> <?php wp_footer(); ?> </body> </html>Der Code in der index.php-Datei definiert die grundlegende HTML-Struktur des WordPress-Themes, einschließlich der Hooks für WordPress zum Einfügen der notwendigen Kopf- (
wp_head) und Fußzeilen (wp_footer) und einerdivmit der IDapp, in der die React-Anwendung eingebunden ist.
React mit @wordpress/scripts einrichten
- Öffne dein Terminal und navigiere zum Verzeichnis deines Themes:
cd wp-content/themes/my-basic-theme - Initialisiere ein neues Node.js-Projekt:
npm init -y - Installiere
@wordpress/scriptsund@wordpress/element:npm install @wordpress/scripts @wordpress/element --save-devBeachte, dass dieser Schritt einige Minuten dauern kann.
- Ändere deine package.json-Datei so, dass sie ein
startund einbuildSkript enthält:"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },Das
'@wordpress/scripts'wird verwendet, um einen Entwicklungsserver mit Hot-Reloading für Entwicklungszwecke zu starten (start) und um die React-Anwendung in statische Assets für die Produktion zu kompilieren (build).
Ein React-Projekt erstellen
- Erstelle ein neues Verzeichnis namens src für deine React-Quelldateien innerhalb deines Themes.
- Erstelle innerhalb des Ordners src zwei neue Dateien: index.js und App.js.
- Füge den folgenden Code in index.js ein:
import { render } from '@wordpress/element'; import App from './App'; render(, document.getElementById('app'))Der obige Code importiert die Funktion
rendervon@wordpress/elementund die KomponenteApp. Dann fügt er die KomponenteAppin das Document Object Model (DOM) ein. - Als Nächstes fügst du diesen Code in die Datei App.js ein:
import { Component } from '@wordpress/element'; export default class App extends Component { render() { return ( <div> <h1>Hello, WordPress and React!</h1> {/* Your React components will go here */} </div> ); } }
Schließe dein Theme ab und aktiviere es
So aktivierst du dein Theme:
- Starte den Entwicklungsserver mit
npm start. - Aktiviere dein neues Theme im WordPress-Dashboard, indem du zu Erscheinungsbild > Themes navigierst, dein Theme auswählst und auf Aktivieren klickst.
- Vergewissere dich, dass der Build-Prozess deines React-Projekts so konfiguriert ist, dass er in das richtige Theme-Verzeichnis ausgibt, damit WordPress deine React-Komponenten rendern kann.
- Besuche das Frontend deiner WordPress-Website, um die Änderungen live zu sehen.
React-Komponenten für das Theme entwickeln
Als Nächstes wendest du einen komponentenbasierten Ansatz an, um das grundlegende React-Setup in deinem WordPress-Theme um bestimmte Komponenten zu erweitern, z. B. eine Kopfzeile.
Erstelle die Header-Komponente
Erstelle im src-Verzeichnis deines Themes eine neue Datei für die Header-Komponente. Gib ihr einen Namen, z. B. Header.js, und füge den folgenden Code hinzu:
import { Component } from '@wordpress/element';
class Header extends Component {
render() {
const { toggleTheme, darkTheme } = this.props;
const headerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '10px 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
};
return (
<header style={headerStyle}>
<div>My WP Theme</div>
<button onClick={toggleTheme}>{darkTheme ? 'Light Mode' : 'Dark Mode'}</button>
</header>
);
}
}
export default Header;Dieser Code definiert eine Kopfzeilenkomponente mit '@wordpress/element', die die Kopfzeile dynamisch auf der Grundlage von darkTheme prop gestaltet. Er enthält eine Schaltfläche, mit der du zwischen hellen und dunklen Designs umschalten kannst, indem du die toggleTheme nutzt. method passed as a prop
Erstellen der Fußzeilenkomponente
Erstelle im src-Verzeichnis deines Themes eine neue Datei für die Fußzeilenkomponente. Gib ihr einen Namen – zum Beispiel Footer.js – und füge den folgenden Code ein:
import { Component } from '@wordpress/element';
class Footer extends Component {
render() {
const { darkTheme } = this.props;
const footerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '20px',
textAlign: 'center',
};
return (
<footer> style={footerStyle}>
© {new Date().getFullYear()} My WP Theme
</footer>
);
}
}
export default Footer;Dieser Code definiert eine Fußzeilenkomponente, die eine Fußzeile mit dynamischem Styling auf der Grundlage der Requisite darkTheme darstellt und das aktuelle Jahr anzeigt.
Aktualisiere die Datei App.js
Um die neue Kopf- und Fußzeile zu nutzen, ersetze den Inhalt der Datei App.js durch den folgenden Code:
import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}Der Entwicklungsprozess, der auf Änderungen achtet und deinen Code neu kompiliert, sollte noch aktiv sein. Deine letzte Version der Vorlage sollte also ähnlich aussehen wie diese:
Wie man mit WordPress-Daten in React umgeht
Die Integration von WordPress-Inhalten in React-Anwendungen bietet eine nahtlose Brücke zwischen den robusten Content-Management-Funktionen von WordPress und dem dynamischen UI-Design von React. Dies ist mit der WordPress REST API möglich.
Um auf die WordPress REST API zuzugreifen, aktiviere sie, indem du die Permalink-Einstellungen aktualisierst. Navigiere im WordPress-Admin-Dashboard zu Einstellungen > Permalinks. Wähle die Option Postname oder eine andere Option als Einfach und speichere deine Änderungen.
Erstelle im src-Verzeichnis deines Themes eine neue Datei namens Posts.js und füge diesen Code hinzu:
import { Component } from '@wordpress/element';
class Posts extends Component {
state = {
posts: [],
isLoading: true,
error: null,
};
componentDidMount() {
fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
.then(response => {
if (!response.ok) {
throw new Error('Something went wrong');
}
return response.json();
})
.then(posts => this.setState({ posts, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { posts, isLoading, error } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</article>
))}
</div>
);
}
}
export default Posts;Die URL fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') kann je nach dem WP-Deployment-Namen – also dem Ordner, in dem du WP installiert hast – etwas anders lauten. Alternativ kannst du auch den Hostnamen der Website aus dem DevKinsta-Dashboard nehmen und das Suffix /wp-json/wp/v2/posts anhängen.
Die Komponente Posts ist ein Paradebeispiel für diese Integration. Sie demonstriert den Prozess des Abrufens und Verwaltens von WordPress-Daten – insbesondere von Beiträgen – mithilfe der WordPress REST API.
Durch die Initiierung einer Netzwerkanfrage innerhalb der Lebenszyklusmethode der Komponente, componentDidMount, ruft die Komponente effizient Beiträge von einer WordPress-Website ab und speichert sie in ihrem Status. Diese Methode zeigt ein Muster für die dynamische Einbindung von WordPress-Daten, wie z. B. Seiten oder benutzerdefinierte Beitragstypen, in React-Komponenten.
Um eine neue Komponente zu verwenden, ersetze den Inhalt der Datei App.js durch den folgenden Code:
import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Import the Posts component
export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
<Posts /> {/* Render the Posts component */}
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}Jetzt kannst du die neueste und endgültige Version deines Themes überprüfen. Zusätzlich zur Kopf- und Fußzeile besteht sie aus einem dynamischen Inhaltsbereich, der die Beiträge präsentiert.
Das React WordPress-Theme in einem WordPress-Projekt verwenden
Die Integration eines React-basierten Themes in ein WordPress-Projekt beginnt mit der Umwandlung des React-Codes in ein WordPress-kompatibles Format mit Hilfe von Paketen wie @wordpress/scripts. Dieses Tool vereinfacht den Build-Prozess und ermöglicht es dir, React-Anwendungen in statische Assets zu kompilieren, die WordPress in die Warteschlange stellen kann.
Die Erstellung des Themes ist mit den npm-Befehlen von @wordpress/scripts ganz einfach. Wenn du npm run build im Theme-Verzeichnis ausführst, wird der React-Code in statische JavaScript- und CSS-Dateien kompiliert.
Anschließend platzierst du diese kompilierten Assets im entsprechenden Verzeichnis des Themes, damit WordPress die React-Komponenten als Teil des Themes korrekt laden und darstellen kann. Nach der Integration kannst du das React-WordPress-Theme wie jedes andere aktivieren und sofort ein modernes, Anwendungs-ähnliches Nutzererlebnis auf die WordPress-Website bringen.
Zusammenfassung
Indem du ein Theme mit den leistungsstarken UI-Funktionen von React erstellst und in WordPress integrierst, kannst du flexible, hochgradig interaktive und nutzerzentrierte Web-Erlebnisse schaffen.
Wenn du bereit bist, deine React WordPress-Themes in Betrieb zu nehmen, bietet dir Kinsta einen gemanagten WordPress-Hosting-Service mit einer sicheren Infrastruktur, Edge Caching und anderen Funktionen, die die Geschwindigkeit und Leistung deiner Website steigern.
Hast du vor, ein WordPress-Theme mit React zu erstellen? Bitte gib uns ein paar Tipps, warum du es für das Beste hältst und wie du es angehen würdest.
Schreibe einen Kommentar