{"id":69631,"date":"2024-04-02T10:16:58","date_gmt":"2024-04-02T09:16:58","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69631&#038;preview=true&#038;preview_id=69631"},"modified":"2024-04-04T17:51:34","modified_gmt":"2024-04-04T16:51:34","slug":"headless-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/","title":{"rendered":"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst"},"content":{"rendered":"<p>Gutenberg ist der Standard-Editor f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-next-js\/\">WordPress<\/a>. Mit dem Editor kannst du Inhalte mit einzelnen Bl\u00f6cken f\u00fcr Text, Bilder, Videos und andere Seitenelemente per Drag-and-Drop erstellen und gestalten. Dieser Ansatz verbessert die Flexibilit\u00e4t und die Gestaltungsm\u00f6glichkeiten von WordPress.<\/p>\n<p>In diesem Leitfaden wird erkl\u00e4rt, wie du Gutenberg-Inhalte \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-rest-api\/\">WordPress REST API<\/a> in einer statischen <a href=\"https:\/\/kinsta.com\/de\/blog\/next-js\/\">Next.js-Website<\/a> als <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a> parsen kannst. <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 dieser Anleitung zu folgen, brauchst du:<\/p>\n<ul>\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<\/li>\n<li>Grundkenntnisse in <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a><\/li>\n<li>Eine <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-erste-schritte\/neue-seite\/\">WordPress-Website<\/a> mit ein paar ver\u00f6ffentlichten Beitr\u00e4gen<\/li>\n<\/ul>\n<h2>Abrufen von Gutenberg-Inhalten \u00fcber eine REST-API<\/h2>\n<p>Um programmatisch mit deiner WordPress-Website zu interagieren und in <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">Gutenberg-Bl\u00f6cken<\/a> strukturierte Inhalte abzurufen, verwendest du die WordPress REST API oder das <a href=\"https:\/\/kinsta.com\/de\/blog\/wpgraphql-und-wp-rest-api\/\">WPGraphQL-Plugin<\/a>. Mit diesen Tools kannst du deine WordPress-Inhalte im JSON-Format abrufen.<\/p>\n<p>Um den Zugriff auf JSON-Daten \u00fcber die REST-API zu erm\u00f6glichen, musst du die Permalink-Einstellungen in WordPress anpassen (nicht auf &#8222;Plain&#8220;). Dies erm\u00f6glicht den API-Zugriff \u00fcber eine strukturierte URL, wie folgt:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n<p>Indem du API-Anfragen an diese URL stellst, kannst du programmatisch verschiedene Informationen abrufen und Vorg\u00e4nge auf deiner WordPress-Website durchf\u00fchren. Du kannst zum Beispiel eine Liste von Beitr\u00e4gen abrufen, indem du eine GET-Anfrage hierhin sendest:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<p>Du erh\u00e4ltst ein JSON-Objekt mit Informationen \u00fcber die Beitr\u00e4ge auf deiner WordPress-Website, einschlie\u00dflich Titel, Inhalt, Autorendetails und mehr.<\/p>\n<h2>Gutenberg-Bl\u00f6cke als HTML parsen<\/h2>\n<p>Wenn du Beitr\u00e4ge von einer WordPress-Website abrufst, die den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg-Editor<\/a> verwendet, k\u00f6nnen die gespeicherten Inhalte in der Datenbank eine Mischung aus HTML- und JSON-Metadaten enthalten, um verschiedene Blocktypen wie Zitate und Galerien zu beschreiben. Zum Beispiel:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:quote {\"className\":\"inspirational-quote\",\"style\":{\"typography\":{\"fontSize\":\"large\"}}} --&gt;\n&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n&lt;!-- \/wp:quote --&gt;\n\n&lt;!-- wp:gallery {\"ids\":[34,35],\"columns\":2,\"linkTo\":\"none\",\"sizeSlug\":\"medium\",\"className\":\"custom-gallery\"} --&gt;\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;\/ul&gt;\n&lt;!-- \/wp:gallery --&gt;<\/code><\/pre>\n<p>Dieses Snippet zeigt zwei Gutenberg-Bl\u00f6cke: ein Zitat und eine Galerie. Jeder ist mit JSON-Metadaten versehen, die in HTML-Kommentaren gekapselt sind. Die Metadaten definieren Attribute wie Klassennamen, Stile und andere Konfigurationen, die f\u00fcr die Darstellung des Blocks relevant sind.<\/p>\n<p>Wenn du diese Bl\u00f6cke \u00fcber die WordPress REST API oder WPGraphQL abrufst, verarbeitet WordPress sie und wandelt die Kombination aus HTML- und JSON-Metadaten in vollst\u00e4ndig gerenderte HTML-Elemente um, die du direkt in Webseiten einbinden kannst. Das umgewandelte HTML f\u00fcr die oben genannten Bl\u00f6cke w\u00fcrde wie folgt aussehen:<\/p>\n<pre><code class=\"language-html\">&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>F\u00fcr Entwickler, die entkoppelte oder Headless-Anwendungen mit JavaScript-Frameworks wie Next.js erstellen, ist dies eine einfache Methode, um Inhalte anzuzeigen, indem sie das HTML direkt in die Seite einf\u00fcgen und die <code>dangerouslySetInnerHTML<\/code> Eigenschaft zum Rendern des Markups verwenden.<\/p>\n<pre><code class=\"language-html\">&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code><\/pre>\n<p>Zus\u00e4tzlich musst du eventuell weitere Formatierungen f\u00fcr Elemente wie Links vornehmen und \u00fcberfl\u00fcssige Zeilenumbr\u00fcche behandeln (<code>\\n<\/code>), was in diesem Leitfaden sp\u00e4ter erkl\u00e4rt wird.<\/p>\n<h2>Inhalt der Gutenberg-Bl\u00f6cke in die statische Next.js-Site einbinden<\/h2>\n<p>In diesem Abschnitt werden wir WordPress-Inhalte in ein Next.js-Projekt holen und die Gutenberg-Bl\u00f6cke als HTML parsen.<\/p>\n<ol start=\"1\">\n<li>Beginne damit, eine Funktion einzurichten, die Beitr\u00e4ge von deiner WordPress-Website abruft. \u00d6ffne die Datei <strong>src\/page.js<\/strong> in deinem Projekt und ersetze ihren Inhalt durch den folgenden Codeschnipsel:\n<pre><code class=\"language-jsx\">const getWpPosts = async () =&gt; {\n\tconst res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n  \tconst posts = await res.json();\n\treturn posts;\n};<\/code><\/pre>\n<p>Diese asynchrone Funktion f\u00fchrt eine API-Anfrage an die WordPress REST API durch. Sie holt alle auf deiner Seite verf\u00fcgbaren Beitr\u00e4ge ab und gibt sie als Array zur\u00fcck.<\/li>\n<li>Als N\u00e4chstes verwenden wir die abgerufenen Beitr\u00e4ge in einer einfachen Next.js-Seitenkomponente, indem wir die Beitr\u00e4ge auf der Konsole protokollieren und eine einfache Begr\u00fc\u00dfung darstellen:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n  console.log(posts);\n  \n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Wenn du dein Projekt mit <code>npm run dev<\/code> ausf\u00fchrst, zeigt es die Nachricht &#8222;Hello World&#8220; an und protokolliert die abgerufenen Beitr\u00e4ge im Terminal.<\/p>\n<pre><code class=\"language-json\">[\n  {\n    \"_links\" : {\n      \"about\" : [...],\n      \"author\" : [...],\n      \"collection\" : [...],\n      \"curies\" : [...],\n      \"predecessor-version\" : [...],\n      \"replies\" : [...],\n      \"self\" : [...],\n      \"version-history\" : [...],\n      \"wp:attachment\" : [...],\n      \"wp:term\" : [...]\n    },\n    \"author\" : 1,\n    \"categories\" : [...],\n    \"comment_status\" : \"open\",\n    \"content\" : {\n      \"protected\" : false,\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    \"date\" : \"2024-02-27T12:08:30\",\n    \"date_gmt\" : \"2024-02-27T12:08:30\",\n    \"excerpt\" : {\n      \"protected\" : false,\n      \"rendered\" : \"&lt;p&gt;Fire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate. In ancient times, fire was a beacon of light and warmth, [\u2026]&lt;\/p&gt;\\n\"\n    },\n    \"featured_media\" : 0,\n    \"format\" : \"standard\",\n    \"guid\" : {\n      \"rendered\" : \"https:\/\/yoursite.com\/?p=13\"\n    },\n    \"id\" : 13,\n    \"link\" : \"https:\/\/yoursite.com\/?p=13\",\n    \"meta\" : {\n      \"footnotes\" : \"\"\n    },\n    \"modified\" : \"2024-02-29T16:45:36\",\n    \"modified_gmt\" : \"2024-02-29T16:45:36\",\n    \"ping_status\" : \"open\",\n    \"slug\" : \"fire-fire\",\n    \"status\" : \"publish\",\n    \"sticky\" : false,\n    \"tags\" : [],\n    \"template\" : \"\",\n    \"title\" : {\n      \"rendered\" : \"Fire\"\n    },\n    \"type\" : \"post\"\n   },\n  },\n  ...\n]<\/code><\/pre>\n<p>Die JSON-Objekte, die die einzelnen Gutenberg-Beitragsdaten repr\u00e4sentieren, enthalten verschiedene Felder, darunter die Felder content und excerpt, die als Gutenberg-Bl\u00f6cke zur\u00fcckgegeben und als HTML-Strings geparst werden.<\/li>\n<li>Um diese HTML-Inhalte in Next.js korrekt darzustellen, verwenden wir die Eigenschaft <code>dangerouslySetInnerHTML<\/code>:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt; Headless Blog &lt;\/h1&gt;\n\n      &lt;div&gt;\n        {posts.map((post) =&gt; (\n          &lt;Link href={'\/blog\/' + post.id} key={post.id}&gt;\n            &lt;h2&gt;\n              {post.title.rendered} &lt;span&gt;-&gt;&lt;\/span&gt;\n            &lt;\/h2&gt;\n            &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n          &lt;\/Link&gt;\n        ))}\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>In dieser aktualisierten Komponente mappen wir das Array der abgerufenen Beitr\u00e4ge, um eine Liste von Beitragsausz\u00fcgen zu erstellen. Jeder Auszug wird f\u00fcr die Navigation in eine <code>Link<\/code> Komponente verpackt, die den Titel des Beitrags und einen Ausschnitt des Inhalts anzeigt.<\/p>\n<p>Die Eigenschaft <code>dangerouslySetInnerHTML<\/code> wird verwendet, um den HTML-Inhalt des Feldes <code>excerpt.rendered<\/code> zu parsen und zu rendern.<\/li>\n<li>Als n\u00e4chstes erstellst du eine Datei <strong>blog\/[id]\/page.js<\/strong> im <strong>Anwendungs-Verzeichnis<\/strong>. Du verwendest Ordner, um Routen zu definieren. Indem du also einen <strong>Blog-Ordner<\/strong> erstellst, definierst du die <strong>Blog-Route<\/strong>. Du kombinierst dies mit <a href=\"https:\/\/kinsta.com\/de\/blog\/next-js\/#dynamic-routes\">dynamischem Routing<\/a>, um Routen f\u00fcr jeden Beitrag zu erstellen.<\/li>\n<li>Jeder Beitrag hat eine ID. Mit dieser ID erstellst du eine eindeutige Route, <code>\/blog\/{post_id}<\/code>, in deiner Anwendung. F\u00fcge den folgenden Code ein:\n<pre><code class=\"language-jsx\">import Link from 'next\/link';\n\nexport async function generateStaticParams() {\n    const res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n    const posts = await res.json();\n    return posts.map((post) =&gt; {\n        return {\n            params: {\n                id: post.id.toString(),\n            },\n        };\n    });\n}\n\nexport async function getPost(id) {\n    const response = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/' + id);\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n<p>Die Funktion <code>generateStaticParams()<\/code> generiert statisch Routen zur Erstellungszeit auf der Grundlage der entsprechenden ID, die f\u00fcr jeden Beitrag zur\u00fcckgegeben wird. Die Funktion <code>getPost()<\/code> holt Gutenberg-Daten von der REST-API f\u00fcr den Beitrag mit einer \u00fcbergebenen ID.<\/p>\n<p>Ein fr\u00fcherer Abschnitt zeigte ein Beispiel f\u00fcr geparste Gutenberg-Daten, die von der REST-API f\u00fcr einen Beitrag zur\u00fcckgegeben wurden. Im Moment interessieren wir uns nur f\u00fcr das Feld <code>content.rendered<\/code>:<\/p>\n<pre><code class=\"language-json\">[\n  {\n    ...\n    \"content\": {\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    ...\n  }\n]<\/code><\/pre>\n<p>Dieses Feld enth\u00e4lt das Roh-HTML des Beitrags. Es kann direkt mit der Eigenschaft <code>dangerouslySetInnerHTML<\/code> wie folgt gerendert werden: <code>&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code>.<\/li>\n<li>Als N\u00e4chstes kannst du die Daten verarbeiten, indem du interne Links analysierst und die Gr\u00f6\u00dfe von Bildern \u00e4nderst. Installiere das Paket <code>html-react-parser<\/code>, um das Parsen von Tags zu vereinfachen:\n<pre><code class=\"language-bash\">npm install html-react-parser --save<\/code><\/pre>\n<\/li>\n<li>F\u00fcge den folgenden Code in die Datei <strong>blog\/[id]\/page.js<\/strong> ein:\n<pre><code class=\"language-javascript\">import parse, { domToReact } from \"html-react-parser\";\n\n\/*\n * We use a regular expression (pattern) to match the specific URL you want to replace.\n * The (\\d+) part captures the numeric ID after ?p=.\n * Then, we use the replacement string 'data-internal-link=\"true\" href=\"\/blog\/$1\"',\n * where $1 is a placeholder for the captured ID.\n *\/\nexport function fixInternalLinks(html_string) {\n  const pattern = \/href=\"https:\\\/\\\/yoursite.com\\\/\\?p=(\\d+)\"\/g;\n  const replacement = 'data-internal-link=\"true\" href=\"\/blog\/$1\"';\n\n  return html_string.replace(pattern, replacement);\n}\n\nexport function parseHtml(html) {\n  \/\/ Replace 2+ sequences of '\\n' with a single '&lt;br \/&gt;' tag\n  const _content = html.replace(\/\\n{2,}\/g, '&lt;br \/&gt;');\n  const content = fixInternalLinks(_content);\n\n  const options = {\n    replace: ({ name, attribs, children }) =&gt; {\n      \/\/ Convert internal links to Next.js Link components.\n      const isInternalLink =\n        name === \"a\" && attribs[\"data-internal-link\"] === \"true\";\n\n      if (isInternalLink) {\n        return (\n          &lt;Link href={attribs.href} {...attribs}&gt;\n            {domToReact(children, options)}\n          &lt;\/Link&gt;\n    \t  );\n      } else if (name === \"img\") {\n        attribs[\"width\"] = \"250\";\n        attribs[\"height\"] = \"150\";\n        return (\n          &lt;img {...attribs}\/&gt;\n        );\n      }\n    },\n  };\n\n  return parse(content, options);\n}<\/code><\/pre>\n<p>Die Funktion <code>fixInternalLinks()<\/code> verwendet einen regul\u00e4ren Ausdruck, um im HTML-String Links zu Beitr\u00e4gen auf deiner WordPress-Seite zu finden. Im rohen HTML kannst du sehen, dass der Beitrag ein <code>List<\/code> Tag mit Links zu anderen Beitr\u00e4gen auf deiner Seite enth\u00e4lt. Diese Links werden durch interne Links zu Routen auf deiner statischen Seite ersetzt.<\/p>\n<p>Die Funktion <code>parseHTML()<\/code> findet mehrere Sequenzen von \u00fcberfl\u00fcssigen Zeilenumbr\u00fcchen, <code>n<\/code>und ersetzt sie durch <code>&lt;br \/&gt;<\/code> Tags. Sie findet auch interne Links und wandelt die Anker-Tags in Link-Tags um. Anschlie\u00dfend passt diese Funktion die Gr\u00f6\u00dfe von Bildern mithilfe von Tag-Attributen an.<\/li>\n<li>Um die Haupt-UI f\u00fcr jede dynamische Route zu erstellen, f\u00fcge den folgenden Code ein:\n<pre><code class=\"language-javascript\">export default async function Post({ params }) {\n  const post = await getPost(params.id);\n\n  const content = parseHtml(post.content.rendered);\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\n        {post.title.rendered}\n      &lt;\/h1&gt;\n \t \n      &lt;div&gt;{content}&lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Nach dem Parsen des Roh-HTML aus den Gutenberg-Daten gibt der Code JSX zur\u00fcck, das die formatierte Benutzeroberfl\u00e4che der Seite darstellt.<\/li>\n<\/ol>\n<p>Wenn du dein Projekt ausf\u00fchrst, wird auf der Startseite eine Liste der Beitr\u00e4ge in deinem WordPress angezeigt. Wenn du auf einzelne Beitr\u00e4ge klickst, werden die geparsten Gutenberg-Inhalte richtig dargestellt.<\/p>\n<h2>Bereitstellen deiner statischen Next.js-Website auf Kinsta<\/h2>\n<p>Wenn du Headless WordPress mit modernen Frameworks wie Next.js kombinierst, ist es wichtig, eine kosteneffiziente L\u00f6sung f\u00fcr die Bereitstellung zu finden, vor allem wenn du ein <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/\">leistungsstarkes WordPress-Hosting<\/a> wie das von Kinsta f\u00fcr deine WordPress-Website nutzt. Der <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Statische-Seiten-Hosting<\/a> Dienst von Kinsta bietet eine nahtlose und kosteng\u00fcnstige M\u00f6glichkeit, deine Website online zu stellen.<\/p>\n<p>Kinsta erm\u00f6glicht es dir, <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">bis zu 100 statische Websites <strong>kostenlos<\/strong> zu hosten<\/a>. Als erstes musst du deinen Code zu einem bevorzugten Git-Anbieter (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> oder <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) pushen. Sobald dein Repo fertig ist, befolge diese Schritte, um deine statische Website bei Kinsta einzurichten:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta bei deinem Git-Anbieter.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Statische Seiten<\/strong> und dann auf <strong>Website hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle das Repository und den Branch aus, von dem aus du bereitstellen m\u00f6chtest.<\/li>\n<li>Gib deiner Site einen eindeutigen Namen.<\/li>\n<li>F\u00fcge die Build-Einstellungen in folgendem Format hinzu:\n<ul>\n<li><strong>Build-Befehl<\/strong>: <code>npm run build<\/code><\/li>\n<li><strong>Node-Version<\/strong>: <code>18.16.0<\/code><\/li>\n<li><strong>Verzeichnis ver\u00f6ffentlichen<\/strong>: <code>out<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Zum Schluss klickst du auf <strong>Website erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Und das war&#8217;s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erh\u00e4ltst einen Link, \u00fcber den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst sp\u00e4ter deine <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">eigene Domain<\/a> und dein <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">SSL-Zertifikat<\/a> hinzuf\u00fcgen, wenn du m\u00f6chtest.<\/p>\n<p>Als Alternative zum statischen Website-Hosting kannst du deine statische Website auch mit dem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting<\/a> Dienst von Kinsta bereitstellen. Dieser bietet eine gr\u00f6\u00dfere Hosting-Flexibilit\u00e4t, ein breiteres Spektrum an Vorteilen und Zugang zu robusteren Funktionen wie Skalierbarkeit, individuelle Bereitstellung mit einem Dockerfile und <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">umfassende Analysen<\/a> mit Echtzeit- und historischen Daten. Au\u00dferdem musst du dein Next.js-Projekt nicht f\u00fcr statisches Rendering konfigurieren.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Leitfaden wurde erkl\u00e4rt, wie du Gutenberg-Blockinhalte \u00fcber die WordPress-API effektiv als HTML integrieren und parsen kannst. Das macht es m\u00f6glich, jede Art von Inhalt auf deinem Frontend zu rendern, wenn du Headless WordPress verwendest.<\/p>\n<p>Du kannst dein Headless WordPress auf unserem Managed WordPress Hosting Service hosten und deine statische Website auf unserem Statische-Seiten-Hosting Dienst bereitstellen. Das bedeutet, dass du alles \u00fcber deine Website in einem einzigen Dashboard findest: MyKinsta.<\/p>\n<p>Wenn du dich f\u00fcr Kinsta entscheidest, profitierst du von einem Hosting-Anbieter, der die optimale Leistung und Skalierbarkeit deiner Website in den Vordergrund stellt und sie gleichzeitig mit fortschrittlichen Sicherheitsma\u00dfnahmen sch\u00fctzt. <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Teste Kinsta noch heute<\/a>!<\/p>\n<p><em>Was h\u00e4ltst du von Headless WordPress und seiner Darstellung? Hast du eine bessere M\u00f6glichkeit, Gutenberg-Bl\u00f6cke zu integrieren? Teile deine Ideen im Kommentarbereich mit!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg ist der Standard-Editor f\u00fcr WordPress. Mit dem Editor kannst du Inhalte mit einzelnen Bl\u00f6cken f\u00fcr Text, Bilder, Videos und andere Seitenelemente per Drag-and-Drop erstellen und &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69632,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[945,951],"class_list":["post-69631","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-headless-cms","topic-javascript-frameworks"],"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 Gutenberg-Inhalte f\u00fcr WordPress ohne Kopfzeile parst - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.\" \/>\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\/headless-wordpress-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst\" \/>\n<meta property=\"og:description\" content=\"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/\" \/>\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-04-02T09:16:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-04T16:51:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.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=\"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.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=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst\",\"datePublished\":\"2024-04-02T09:16:58+00:00\",\"dateModified\":\"2024-04-04T16:51:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/\"},\"wordCount\":1460,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/\",\"name\":\"Wie man Gutenberg-Inhalte f\u00fcr WordPress ohne Kopfzeile parst - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"datePublished\":\"2024-04-02T09:16:58+00:00\",\"dateModified\":\"2024-04-04T16:51:34+00:00\",\"description\":\"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst\"}]},{\"@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 Gutenberg-Inhalte f\u00fcr WordPress ohne Kopfzeile parst - Kinsta\u00ae","description":"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.","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\/headless-wordpress-gutenberg\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst","og_description":"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.","og_url":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-04-02T09:16:58+00:00","article_modified_time":"2024-04-04T16:51:34+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst","datePublished":"2024-04-02T09:16:58+00:00","dateModified":"2024-04-04T16:51:34+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/"},"wordCount":1460,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/","url":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/","name":"Wie man Gutenberg-Inhalte f\u00fcr WordPress ohne Kopfzeile parst - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","datePublished":"2024-04-02T09:16:58+00:00","dateModified":"2024-04-04T16:51:34+00:00","description":"In dieser ausf\u00fchrlichen Anleitung erf\u00e4hrst du, wie du geparste Gutenberg-Inhalte als HTML in Ihre Website integrierst. Auch wie man den Inhalt in Next.js verwendet, wird hier dargestellt.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/headless-wordpress-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/de\/thema\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Wie man Gutenberg-Inhalte f\u00fcr Headless WordPress parst"}]},{"@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\/69631","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=69631"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69631\/revisions"}],"predecessor-version":[{"id":69660,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69631\/revisions\/69660"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69631\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/69632"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=69631"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=69631"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=69631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}