{"id":69976,"date":"2024-05-09T14:35:08","date_gmt":"2024-05-09T13:35:08","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69976&#038;preview=true&#038;preview_id=69976"},"modified":"2024-05-14T13:02:10","modified_gmt":"2024-05-14T12:02:10","slug":"wordpress-react-theme","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/","title":{"rendered":"Wie man ein WordPress-Theme mit React erstellt"},"content":{"rendered":"<p>Dieser praktische Artikel nutzt die Flexibilit\u00e4t <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-wordpress\/\">von WordPress<\/a> und die leistungsstarke Benutzeroberfl\u00e4che (UI) von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> f\u00fcr die Theme-Entwicklung. Wir zeigen dir, wie die Integration von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-react\/\">WordPress und React<\/a> deine WordPress-Projekte verbessert, und f\u00fchren dich durch die Schritte zur Erstellung eines Themes.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Voraussetzungen<\/h2>\n<p>Um diesem Artikel folgen zu k\u00f6nnen, solltest du Folgendes mitbringen:<\/p>\n<ul>\n<li>Eine WordPress-Website. Kinsta bietet mehrere Einrichtungsoptionen, darunter die <a href=\"https:\/\/kinsta.com\/local-development\/\">lokale Entwicklung<\/a> mit <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a>, ein benutzerfreundliches <a href=\"https:\/\/kinsta.com\/de\/mykinsta\/\">MyKinsta-Dashboard<\/a> oder die programmatische Einrichtung \u00fcber die Kinsta-API.<\/li>\n<li>Node.js und npm (<a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">Node Package Manager<\/a>) oder yarn auf deinem Computer installiert haben<\/li>\n<\/ul>\n<h2>Erstellen einer grundlegenden WordPress-Theme-Struktur<\/h2>\n<p>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.<\/p>\n<ol start=\"1\">\n<li>In deiner DevKinsta-Umgebung \u00f6ffnest du den Ordner deiner Website. Navigiere zum Verzeichnis <strong>wp-content\/themes<\/strong>.<\/li>\n<li>Erstelle einen neuen Ordner f\u00fcr dein Theme. Der Ordnername sollte eindeutig und beschreibend sein &#8211; zum Beispiel <strong>my-basic-theme<\/strong>.<\/li>\n<li>Erstelle im Theme-Ordner diese wichtigen Dateien und lass sie leer:\n<ul>\n<li><strong>style.css<\/strong> &#8211; Dies ist die wichtigste Stylesheet-Datei. Sie enth\u00e4lt auch die Header-Informationen f\u00fcr dein Theme.<\/li>\n<li><strong>functions.php<\/strong> &#8211; Diese Datei definiert Funktionen, Klassen, Aktionen und Filter, die von deinem Theme verwendet werden sollen.<\/li>\n<li><strong>index.php<\/strong> &#8211; Dies ist die wichtigste Vorlagendatei. Sie ist f\u00fcr alle Themes erforderlich.<\/li>\n<\/ul>\n<p>Wenn du nicht mit React arbeitest, musst du auch die folgenden Dateien erstellen. Aber mit React w\u00fcrden wir sp\u00e4ter Komponenten daf\u00fcr erstellen.<\/p>\n<ul>\n<li><strong>header.php<\/strong> &#8211; Enth\u00e4lt den Header-Bereich deiner Website.<\/li>\n<li><strong>footer.php<\/strong> &#8211; Enth\u00e4lt den Fu\u00dfzeilenbereich deiner Website.<\/li>\n<li><strong>sidebar.php<\/strong> &#8211; F\u00fcr den Bereich der Seitenleiste, wenn dein Theme Seitenleisten enth\u00e4lt.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Als N\u00e4chstes \u00f6ffnest du die Datei <strong>style.css<\/strong> und f\u00fcgst das Folgende am Anfang der Datei hinzu:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: My Basic Theme\nTheme URI: http:\/\/example.com\/my-basic-theme\/\nAuthor: Your Name\nAuthor URI: http:\/\/example.com\nDescription: A basic WordPress theme.\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nTags: blog, custom-background\nText Domain: my-basic-theme\n*\/<\/code><\/pre>\n<p>Dieses Codeschnipsel ist der Header-Abschnitt f\u00fcr die <strong>style.css-Datei<\/strong> eines WordPress-Themes und enth\u00e4lt wichtige Metadaten wie den Namen des Themes, Angaben zum Autor, die Version und die Lizenz. Er hilft WordPress, das Theme zu erkennen und im <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">Dashboard<\/a> anzuzeigen, einschlie\u00dflich seiner Beschreibung und Tags zur Kategorisierung.<\/p>\n<h2>React in WordPress einbinden<\/h2>\n<p>Wenn du React in ein WordPress-Theme integrierst, kannst du die komponentenbasierte Architektur von React nutzen, um dynamische, interaktive Benutzeroberfl\u00e4chen auf deiner WordPress-Website zu erstellen. Um React zu integrieren, verwendest du das <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\" target=\"_blank\" rel=\"noopener noreferrer\"> Paket @wordpress\/scripts<\/a>.<\/p>\n<p>Das ist eine Sammlung wiederverwendbarer Skripte, die auf die Entwicklung von WordPress zugeschnitten sind. WordPress stellt es zur Verf\u00fcgung, um den Konfigurations- und Erstellungsprozess zu vereinfachen, insbesondere wenn du moderne <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-Workflows<\/a> wie React in WordPress-Themes und Plugins integrierst.<\/p>\n<p>Dieses Toolset umfasst g\u00e4ngige Aufgaben und macht es einfacher, mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> im WordPress-\u00d6kosystem zu entwickeln.<\/p>\n<h3>Passe dein Theme an<\/h3>\n<p>Jetzt, wo du eine grundlegende WordPress-Theme-Struktur hast, kannst du dein Theme anpassen.<\/p>\n<ol start=\"1\">\n<li>F\u00fcge im Verzeichnis deines Themes den folgenden Code in die Datei <strong>functions.php <\/strong>ein:\n<pre><code class=\"language-php\">&lt;?php\nfunction my_react_theme_scripts() {\n    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '\/build\/index.js', array('wp-element'), '1.0.0', true);\n    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_react_theme_scripts');<\/code><\/pre>\n<p>Die Datei <strong>functions.php<\/strong> integriert React in dein WordPress-Theme. Sie verwendet die Funktionen <code>wp_enqueue_script<\/code> und <code>wp_enqueue_style<\/code>, um JavaScript- und Cascading Style Sheet (<a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a>)-Dateien zu deinem Theme hinzuzuf\u00fcgen.<\/p>\n<p>Die WordPress-Funktion <code>wp_enqueue_script<\/code> ben\u00f6tigt mehrere Argumente:<\/p>\n<ul>\n<li>Den Handle-Namen (<code>'my-react-theme-app'<\/code>), der das Skript eindeutig identifiziert<\/li>\n<li>Den Pfad zur Skriptdatei<\/li>\n<li>Das Array der Abh\u00e4ngigkeiten, <code>array('wp-element')<\/code>, das angibt, dass das Skript vom WordPress-Wrapper f\u00fcr React <code>('wp-element')<\/code> abh\u00e4ngt.<\/li>\n<li>Die Versionsnummer <code>('1.0.0')<\/code><\/li>\n<li>Die Position <code>true<\/code>, die angibt, dass das Skript in der Fu\u00dfzeile des HTML-Dokuments geladen werden soll, um die Ladegeschwindigkeit der Seite zu verbessern<\/li>\n<\/ul>\n<p>Die Funktion <code>wp_enqueue_style<\/code> nimmt die folgenden Argumente entgegen:<\/p>\n<ul>\n<li>Der Handle-Name <code>'my-react-theme-style'<\/code>, der das Stylesheet eindeutig identifiziert<\/li>\n<li>Die Quelle <code>get_stylesheet_uri()<\/code>, die die URL zum Hauptstylesheet des Themes (<strong>style.css<\/strong>) zur\u00fcckgibt und sicherstellt, dass die Stile des Themes angewendet werden<\/li>\n<\/ul>\n<ul>\n<li>Das <code>add_action<\/code> Element, das eine benutzerdefinierte Funktion <code>'my_react_theme_scripts'<\/code> mit einer bestimmten Aktion (<code>'wp_enqueue_scripts'<\/code>) verkn\u00fcpft. Dadurch wird sichergestellt, dass dein JavaScript und CSS korrekt geladen werden, wenn WordPress die Seite rendert.<\/li>\n<\/ul>\n<p>Dieser Code stellt sicher, dass die kompilierte JavaScript-Datei deiner React-Anwendung, die sich im <strong>&lt;Ihr-Theme-Verzeichnis&gt;\/build\/index.js<\/strong> befindet, und das Haupt-Stylesheet deines Themes mit deinem Theme geladen werden.<\/p>\n<p>Das <strong>\/build-Verzeichnis<\/strong> stammt in der Regel von der Kompilierung deiner React-Anwendung mit einem Tool wie <code>create-react-app<\/code> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/vite-vs-webpack\/\">webpack<\/a>, das deinen React-Code in eine produktionsreife, minimierte JavaScript-Datei b\u00fcndelt.<\/p>\n<p>Dieses Setup ist wichtig f\u00fcr die Integration von React-Funktionen in dein WordPress-Theme und erm\u00f6glicht dynamische, Anwendungs-\u00e4hnliche Benutzererfahrungen innerhalb einer WordPress-Website.<\/li>\n<li>Als N\u00e4chstes aktualisierst du den Inhalt der Datei <strong>index.php<\/strong>:\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;div id=\"app\"&gt;&lt;\/div&gt;\n    &lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Der Code in der <strong>index.php-Datei<\/strong> definiert die grundlegende HTML-Struktur des WordPress-Themes, einschlie\u00dflich der Hooks f\u00fcr WordPress zum Einf\u00fcgen der notwendigen Kopf- (<code>wp_head<\/code>) und Fu\u00dfzeilen (<code>wp_footer<\/code>) und einer <code>div<\/code> mit der ID <code>app<\/code>, in der die React-Anwendung eingebunden ist.<\/li>\n<\/ol>\n<h3>React mit @wordpress\/scripts einrichten<\/h3>\n<ol start=\"1\">\n<li>\u00d6ffne dein Terminal und navigiere zum Verzeichnis deines Themes:\n<pre><code class=\"language-bash\">cd wp-content\/themes\/my-basic-theme\n<\/code><\/pre>\n<\/li>\n<li>Initialisiere ein neues Node.js-Projekt:\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<\/li>\n<li>Installiere <code>@wordpress\/scripts<\/code> und <code>@wordpress\/element<\/code>:\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts @wordpress\/element --save-dev<\/code><\/pre>\n<p>Beachte, dass dieser Schritt einige Minuten dauern kann.<\/li>\n<li>\u00c4ndere deine <strong>package.json-Datei<\/strong> so, dass sie ein <code>start<\/code> und ein <code>build<\/code> Skript enth\u00e4lt:\n<pre><code class=\"language-json\">\"scripts\": {\n  \"start\": \"wp-scripts start\",\n  \"build\": \"wp-scripts build\"\n},<\/code><\/pre>\n<p>Das <code>'@wordpress\/scripts'<\/code> wird verwendet, um einen Entwicklungsserver mit Hot-Reloading f\u00fcr Entwicklungszwecke zu starten (<code>start<\/code>) und um die React-Anwendung in statische Assets f\u00fcr die Produktion zu kompilieren (<code>build<\/code>).<\/li>\n<\/ol>\n<h3>Ein React-Projekt erstellen<\/h3>\n<ol start=\"1\">\n<li>Erstelle ein neues Verzeichnis namens <strong>src<\/strong> f\u00fcr deine React-Quelldateien innerhalb deines Themes.<\/li>\n<li>Erstelle innerhalb des Ordners <strong>src<\/strong> zwei neue Dateien: <strong>index.js<\/strong> und <strong>App.js<\/strong>.<\/li>\n<li>F\u00fcge den folgenden Code in <strong>index.js<\/strong> ein:\n<pre><code class=\"language-jsx\">import { render } from '@wordpress\/element';\nimport App from '.\/App';\nrender(, document.getElementById('app'))<\/code><\/pre>\n<p>Der obige Code importiert die Funktion <code>render<\/code> von <code>@wordpress\/element<\/code> und die Komponente <code>App<\/code>. Dann f\u00fcgt er die Komponente <code>App<\/code> in das Document Object Model (DOM) ein.<\/li>\n<li>Als N\u00e4chstes f\u00fcgst du diesen Code in die Datei <strong>App.js<\/strong> ein:\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nexport default class App extends Component {\n  render() {\n    return (\n      &lt;div&gt; \n        &lt;h1&gt;Hello, WordPress and React!&lt;\/h1&gt;\n        {\/* Your React components will go here *\/}\n      &lt;\/div&gt;\n);\n    }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Schlie\u00dfe dein Theme ab und aktiviere es<\/h3>\n<p>So aktivierst du dein Theme:<\/p>\n<ol start=\"1\">\n<li>Starte den Entwicklungsserver mit <code>npm start<\/code>.<\/li>\n<li>Aktiviere dein neues Theme im WordPress-Dashboard, indem du zu <strong>Erscheinungsbild <\/strong>&gt; <strong>Themes<\/strong> navigierst, dein Theme ausw\u00e4hlst und auf <strong>Aktivieren<\/strong> klickst.<\/li>\n<li>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.<\/li>\n<li>Besuche das Frontend deiner WordPress-Website, um die \u00c4nderungen live zu sehen.<\/li>\n<\/ol>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/hello-wp-react.png\" alt=\"Auf der Startseite wird das neu erstellte React-basierte WordPress-Theme mit der Meldung - Hallo, WordPress und React - angezeigt\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Auf der Startseite wird das neu erstellte React-basierte WordPress-Theme mit der Meldung &#8211; Hallo, WordPress und React &#8211; angezeigt<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wenn du bereit bist, dein Theme einzusetzen, f\u00fchre aus: <code>npm run build<\/code>. Dieser Befehl kompiliert deine React-Anwendung in statische Assets in einem Build-Verzeichnis im Ordner deines Themes.<\/p>\n<\/aside>\n\n<h2>React-Komponenten f\u00fcr das Theme entwickeln<\/h2>\n<p>Als N\u00e4chstes wendest du einen komponentenbasierten Ansatz an, um das grundlegende React-Setup in deinem WordPress-Theme um bestimmte Komponenten zu erweitern, z. B. eine Kopfzeile.<\/p>\n<h3>Erstelle die Header-Komponente<\/h3>\n<p>Erstelle im <strong>src-Verzeichnis<\/strong> deines Themes eine neue Datei f\u00fcr die Header-Komponente. Gib ihr einen Namen, z. B. <strong>Header.js<\/strong>, und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Header extends Component {\n    render() {\n        const { toggleTheme, darkTheme } = this.props;\n        const headerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '10px 20px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n        };\n        return (\n            &lt;header style={headerStyle}&gt;\n                &lt;div&gt;My WP Theme&lt;\/div&gt;\n                &lt;button onClick={toggleTheme}&gt;{darkTheme ? 'Light Mode' : 'Dark Mode'}&lt;\/button&gt;\n            &lt;\/header&gt;\n        );\n    }\n}\nexport default Header;<\/code><\/pre>\n<p>Dieser Code definiert eine Kopfzeilenkomponente mit <code>'@wordpress\/element'<\/code>, die die Kopfzeile dynamisch auf der Grundlage von <code>darkTheme prop<\/code> gestaltet. Er enth\u00e4lt eine Schaltfl\u00e4che, mit der du zwischen hellen und dunklen Designs umschalten kannst, indem du die <code>toggleTheme<code> method passed as a prop<\/code><\/code> nutzt.<\/p>\n<h3>Erstellen der Fu\u00dfzeilenkomponente<\/h3>\n<p>Erstelle im <strong>src-Verzeichnis<\/strong> deines Themes eine neue Datei f\u00fcr die Fu\u00dfzeilenkomponente. Gib ihr einen Namen &#8211; zum Beispiel <strong>Footer.js<\/strong> &#8211; und f\u00fcge den folgenden Code ein:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Footer extends Component {\n    render() {\n        const { darkTheme } = this.props;\n        const footerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '20px',\n            textAlign: 'center',\n        };\n        return (\n            &lt;footer&gt; style={footerStyle}&gt;\n                \u00a9 {new Date().getFullYear()} My WP Theme\n            &lt;\/footer&gt;\n        );\n    }\n}\nexport default Footer;<\/code><\/pre>\n<p>Dieser Code definiert eine Fu\u00dfzeilenkomponente, die eine Fu\u00dfzeile mit dynamischem Styling auf der Grundlage der Requisite <code>darkTheme<\/code> darstellt und das aktuelle Jahr anzeigt.<\/p>\n<h3>Aktualisiere die Datei App.js<\/h3>\n<p>Um die neue Kopf- und Fu\u00dfzeile zu nutzen, ersetze den Inhalt der Datei <strong>App.js<\/strong> durch den folgenden Code:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;               \n                &lt;\/main&gt;\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Der Entwicklungsprozess, der auf \u00c4nderungen achtet und deinen Code neu kompiliert, sollte noch aktiv sein. Deine letzte Version der Vorlage sollte also \u00e4hnlich aussehen wie diese:<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/new-styles-react-wp.png\" alt=\"Die Startseite zeigt ein React-basiertes WordPress-Theme mit Header und Footer\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Die Startseite mit dem React-basierten WordPress-Theme einschlie\u00dflich Kopf- und Fu\u00dfzeile<\/figcaption><\/figure>\n<h2>Wie man mit WordPress-Daten in React umgeht<\/h2>\n<p>Die Integration von WordPress-Inhalten in React-Anwendungen bietet eine nahtlose Br\u00fccke zwischen den robusten <a href=\"https:\/\/kinsta.com\/de\/blog\/content-management-system\/\">Content-Management-Funktionen<\/a> von WordPress und dem dynamischen UI-Design von React. Dies ist mit der WordPress REST API m\u00f6glich.<\/p>\n<p>Um auf die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-rest-api\/\">WordPress REST API<\/a> zuzugreifen, aktiviere sie, indem du die Permalink-Einstellungen aktualisierst. Navigiere im WordPress-Admin-Dashboard zu <strong>Einstellungen<\/strong> &gt; <strong>Permalinks<\/strong>. W\u00e4hle die Option <strong>Postname<\/strong> oder eine andere Option als <strong>Einfach<\/strong> und speichere deine \u00c4nderungen.<\/p>\n<p>Erstelle im <strong>src<\/strong>-Verzeichnis deines Themes eine neue Datei namens <strong>Posts.js<\/strong> und f\u00fcge diesen Code hinzu:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Posts extends Component {\n    state = {\n        posts: [],\n        isLoading: true,\n        error: null,\n    };\n    componentDidMount() {\n        fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')\n            .then(response =&gt; {\n                if (!response.ok) {\n                    throw new Error('Something went wrong');\n                }\n                return response.json();\n            })\n            .then(posts =&gt; this.setState({ posts, isLoading: false }))\n            .catch(error =&gt; this.setState({ error, isLoading: false }));\n    }\n    render() {\n        const { posts, isLoading, error } = this.state;\n        if (error) {\n            return &lt;div&gt;Error: {error.message}&lt;\/div&gt;;\n        }\n        if (isLoading) {\n            return &lt;div&gt;Loading...&lt;\/div&gt;;\n        }\n        return (\n            &lt;div&gt;\n                {posts.map(post =&gt; (\n                    &lt;article key={post.id}&gt;\n                        &lt;h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/&gt;\n                        &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n                    &lt;\/article&gt;\n                ))}\n            &lt;\/div&gt;\n        );\n    }\n}\nexport default Posts;<\/code><\/pre>\n<p>Die URL <code>fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')<\/code> kann je nach dem WP-Deployment-Namen &#8211; also dem Ordner, in dem du WP installiert hast &#8211; etwas anders lauten. Alternativ kannst du auch den Hostnamen der Website aus dem DevKinsta-Dashboard nehmen und das Suffix <code>\/wp-json\/wp\/v2\/posts<\/code> anh\u00e4ngen.<\/p>\n<p>Die Komponente <code>Posts<\/code> ist ein Paradebeispiel f\u00fcr diese Integration. Sie demonstriert den Prozess des Abrufens und Verwaltens von WordPress-Daten &#8211; insbesondere von Beitr\u00e4gen &#8211; mithilfe der WordPress REST API.<\/p>\n<p>Durch die Initiierung einer Netzwerkanfrage innerhalb der Lebenszyklusmethode der Komponente, <code>componentDidMount<\/code>, ruft die Komponente effizient Beitr\u00e4ge von einer WordPress-Website ab und speichert sie in ihrem Status. Diese Methode zeigt ein Muster f\u00fcr die dynamische Einbindung von WordPress-Daten, wie z. B. Seiten oder benutzerdefinierte Beitragstypen, in React-Komponenten.<\/p>\n<p>Um eine neue Komponente zu verwenden, ersetze den Inhalt der Datei <strong>App.js<\/strong> durch den folgenden Code:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nimport Posts from '.\/Posts'; \/\/ Import the Posts component\n\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;\n                    &lt;Posts \/&gt; {\/* Render the Posts component *\/}\n                &lt;\/main&gt;\n\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Jetzt kannst du die neueste und endg\u00fcltige Version deines Themes \u00fcberpr\u00fcfen. Zus\u00e4tzlich zur Kopf- und Fu\u00dfzeile besteht sie aus einem dynamischen Inhaltsbereich, der die Beitr\u00e4ge pr\u00e4sentiert.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fetch-data-react-wp-theme.png\" alt=\"Die Startseite zeigt das fertige React-basierte WordPress-Theme mit Beitr\u00e4gen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Die Startseite zeigt das endg\u00fcltige React-basierte WordPress-Theme, einschlie\u00dflich der Beitr\u00e4ge<\/figcaption><\/figure>\n<h2>Das React WordPress-Theme in einem WordPress-Projekt verwenden<\/h2>\n<p>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 <code>@wordpress\/scripts<\/code>. Dieses Tool vereinfacht den Build-Prozess und erm\u00f6glicht es dir, React-Anwendungen in statische Assets zu kompilieren, die WordPress in die Warteschlange stellen kann.<\/p>\n<p>Die Erstellung des Themes ist mit den npm-Befehlen von <code>@wordpress\/scripts<\/code> ganz einfach. Wenn du <code>npm run build<\/code> im Theme-Verzeichnis ausf\u00fchrst, wird der React-Code in statische JavaScript- und CSS-Dateien kompiliert.<\/p>\n<p>Anschlie\u00dfend 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-\u00e4hnliches Nutzererlebnis auf die WordPress-Website bringen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>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.<\/p>\n<p>Wenn du bereit bist, deine React WordPress-Themes in Betrieb zu nehmen, bietet dir Kinsta einen gemanagten <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">WordPress-Hosting-Service<\/a> mit einer sicheren Infrastruktur, Edge Caching und anderen Funktionen, die die Geschwindigkeit und Leistung deiner Website steigern.<\/p>\n<p><em>Hast du vor, ein WordPress-Theme mit React zu erstellen? Bitte gib uns ein paar Tipps, warum du es f\u00fcr das Beste h\u00e4ltst und wie du es angehen w\u00fcrdest.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dieser praktische Artikel nutzt die Flexibilit\u00e4t von WordPress und die leistungsstarke Benutzeroberfl\u00e4che (UI) von React f\u00fcr die Theme-Entwicklung. Wir zeigen dir, wie die Integration von WordPress &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69977,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[975,1009],"class_list":["post-69976","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-wordpress-themes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man ein WordPress-Theme mit React erstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man ein WordPress-Theme mit React erstellt\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-09T13:35:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-14T12:02:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Wie man ein WordPress-Theme mit React erstellt\",\"datePublished\":\"2024-05-09T13:35:08+00:00\",\"dateModified\":\"2024-05-14T12:02:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\"},\"wordCount\":1748,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\",\"name\":\"Wie man ein WordPress-Theme mit React erstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg\",\"datePublished\":\"2024-05-09T13:35:08+00:00\",\"dateModified\":\"2024-05-14T12:02:10+00:00\",\"description\":\"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Themes\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man ein WordPress-Theme mit React erstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man ein WordPress-Theme mit React erstellt - Kinsta\u00ae","description":"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man ein WordPress-Theme mit React erstellt","og_description":"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-05-09T13:35:08+00:00","article_modified_time":"2024-05-14T12:02:10+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme-1024x512.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Wie man ein WordPress-Theme mit React erstellt","datePublished":"2024-05-09T13:35:08+00:00","dateModified":"2024-05-14T12:02:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/"},"wordCount":1748,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/","name":"Wie man ein WordPress-Theme mit React erstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg","datePublished":"2024-05-09T13:35:08+00:00","dateModified":"2024-05-14T12:02:10+00:00","description":"Lerne, wie du ein WordPress-Theme von Grund auf mit React erstellst und seine leistungsstarken Funktionen wie wiederverwendbare Komponenten und API-Anfragen nutzt.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/05\/wordpress-react-theme.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress-Themes","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/"},{"@type":"ListItem","position":3,"name":"Wie man ein WordPress-Theme mit React erstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=69976"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69976\/revisions"}],"predecessor-version":[{"id":70040,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69976\/revisions\/70040"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69976\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/69977"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=69976"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=69976"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=69976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}