Was ist ein Headless CMS?<\/h2>\n
Ein Headless CMS ist ein spezielles Content Management System, das ausschlie\u00dflich das Backend deiner Website verwaltet. Im Gegensatz zu herk\u00f6mmlichen CMS bestimmt es nicht, wie die Inhalte auf dem Frontend erscheinen. Stattdessen bietet es Entwicklern<\/a> eine Anwendungsprogrammierschnittstelle (API<\/a>), \u00fcber die sie Inhalte f\u00fcr jedes Ger\u00e4t oder jede Plattform abrufen und bereitstellen k\u00f6nnen.<\/p>\n Heute gibt es zahlreiche Headless-CMS-Plattformen. Die Umstellung deiner Inhalte von WordPress, mit dem du bereits vertraut bist, mag jedoch unn\u00f6tig erscheinen. Zum Gl\u00fcck gibt es eine Alternative \u2014 Headless WordPress.<\/p>\n WordPress<\/a> in seiner traditionellen Form ist nicht von Natur aus ein Headless CMS. WordPress ist ein beliebtes und leistungsstarkes CMS, das f\u00fcr seine Benutzerfreundlichkeit und Flexibilit\u00e4t bei der Erstellung und Verwaltung von Inhalten bekannt ist. Es kombiniert jedoch traditionell die Verwaltung von Inhalten und deren Pr\u00e4sentation in einem einzigen System.<\/p>\n Heutzutage haben Entwickler\/innen Headless-Implementierungen von WordPress entwickelt, indem sie die REST-API nutzen. In diesen F\u00e4llen funktioniert WordPress immer noch als CMS, in dem du Inhalte erstellst, verwaltest und speicherst. Anstatt jedoch das Frontend oder die Website direkt \u00fcber WordPress-Templates<\/a> und -Themes darzustellen, wird die Frontend-Pr\u00e4sentation vom Backend entkoppelt oder losgel\u00f6st.<\/p>\n So k\u00f6nnen Entwickler\/innen Anwendungen mit unterschiedlichen Technologien und Frameworks entwickeln und gleichzeitig die vertrauten Content-Management-Funktionen von WordPress nutzen. Es ist eine M\u00f6glichkeit, WordPress etwas mehr „headless“ werden zu lassen, auch wenn es nicht die Standardkonfiguration ist.<\/p>\n In diesem Artikel werden zwei Methoden vorgestellt, mit denen du Daten aus deinem Headless WordPress CMS in dein Frontend-Framework einspeisen kannst, wobei der Schwerpunkt auf zwei Methoden liegt: WPGraphQL und REST API.<\/p>\n Die REST-API ist ein Grundpfeiler der WordPress-Entwicklung, der das Abrufen von Daten im JSON-Format erm\u00f6glicht. Seit WordPress 4.7<\/a> ist sie in WordPress integriert und erfordert kein Plugin, damit sie funktioniert.<\/p>\n Sie erm\u00f6glicht den Datenzugriff auf die Inhalte deiner Website und setzt dieselben Authentifizierungsbeschr\u00e4nkungen um: \u00d6ffentliche Inhalte auf deiner Website sind in der Regel \u00fcber die REST-API \u00f6ffentlich zug\u00e4nglich, w\u00e4hrend private Inhalte, passwortgesch\u00fctzte Inhalte, interne Benutzer, benutzerdefinierte Beitragstypen und Metadaten nur mit Authentifizierung verf\u00fcgbar sind oder wenn du sie ausdr\u00fccklich so einstellst.<\/p>\n Um deine WordPress-Daten im JSON-Format zu erhalten, h\u00e4nge Wenn die JSON-API nicht standardm\u00e4\u00dfig aktiviert ist, wenn du Dies funktioniert f\u00fcr lokale und \u00f6ffentliche WordPress-Seiten und bietet Endpunkte<\/a> f\u00fcr Beitr\u00e4ge<\/a>, Seiten<\/a>, Kommentare<\/a>, Medien<\/a> usw.<\/p>\n Mit der REST-API kannst du noch mehr machen. Lies unseren vollst\u00e4ndigen Leitfaden<\/a>, um mehr zu erfahren.<\/p>\n Im Jahr 2012 f\u00fchrte Facebook GraphQL ein, einen revolution\u00e4ren Ansatz f\u00fcr die Datenabfrage \u00fcber APIs. Seine deklarative Natur und der selektive Datenabruf boten eine robuste Alternative zu traditionellen REST-APIs.<\/p>\n Im Jahr 2015 erkannte Jason Bahl<\/a> die Nachfrage nach einer L\u00f6sung, die die Flexibilit\u00e4t von GraphQL mit den inhaltlichen M\u00f6glichkeiten von WordPress kombiniert, und brachte WPGraphQL<\/a> heraus, eine revolution\u00e4re L\u00f6sung f\u00fcr WordPress-Entwickler.<\/p>\n WPGraphQL ist ein GraphQL-basiertes Plugin, das einen effizienteren und ma\u00dfgeschneiderten Ansatz zur Datenabfrage bietet. Es stellt einen einzigen Endpunkt dar, der einen pr\u00e4zisen Datenabruf erm\u00f6glicht und das Problem des \u00dcberholens, das bei REST-APIs h\u00e4ufig auftritt, reduziert.<\/p>\n Um WPGraphQL zu verwenden, befolge diese Schritte:<\/p>\n Mit dem Playground kannst du das Schema erkunden, Abfragen ausf\u00fchren und Mutationen interaktiv testen.<\/li>\n Du kannst WPGraphQL jetzt in deine Frontend-Anwendung integrieren, ganz gleich, ob sie mit React<\/a>, Vue<\/a> oder einem anderen Framework erstellt wurde, indem du einen einzigen GraphQL-Endpunkt nutzt, um Daten effizient abzurufen und deine Benutzeroberfl\u00e4che dynamisch zu aktualisieren.<\/p>\n WPGraphQL verf\u00fcgt \u00fcber wichtige Funktionen f\u00fcr eine optimierte und zielgerichtete Datenabfrage, wie unten dargestellt.<\/p>\n WPGraphQL bietet einen einheitlichen Endpunkt, typischerweise Angenommen, du m\u00f6chtest \u00fcber die REST-API Details zu einem bestimmten Beitrag und seinen Kommentaren abrufen. Du musst mehrere Anfragen an verschiedene Endpunkte stellen, zum Beispiel:<\/p>\n Um Informationen \u00fcber einen Beitrag zu erhalten:<\/p>\n Um Kommentare zu einem Beitrag zu erhalten:<\/p>\n Mit WPGraphQL hingegen kannst du das gleiche Ergebnis mit einer einzigen, gezielten Abfrage erzielen:<\/p>\n In diesem Beispiel wird die GraphQL-Abfrage an einen einzigen Endpunkt gesendet. Die Abfrage gibt an, dass wir Informationen \u00fcber den Beitrag mit der ID „123“ ben\u00f6tigen, einschlie\u00dflich Titel, Inhalt und zugeh\u00f6rige Kommentare. WPGraphQL verarbeitet diese Abfrage und liefert eine Antwort mit genau den Daten, die wir angefordert haben, und zwar in einem Rutsch.<\/p>\n Mit GraphQL kannst du spezifische Abfragen erstellen, die auf deine Bed\u00fcrfnisse zugeschnitten sind. So kannst du nur die notwendigen Daten abfragen und \u00fcberfl\u00fcssige Abfragen vermeiden.<\/p>\n Angenommen, du m\u00f6chtest ein paar Details (Titel, Autor und Datum) zu allen Beitr\u00e4gen abrufen. Das kann die REST-API nicht leisten. Um diese Details abzurufen, musst du einen Endpunkt wie diesen verwenden:<\/p>\n Dieser Endpunkt ruft den gesamten Datensatz f\u00fcr alle Beitr\u00e4ge ab, einschlie\u00dflich Inhalt, Kategorien und zugeh\u00f6rige Daten. Mit WPGraphQL kannst du eine gezielte Abfrage erstellen, um nur die Daten abzurufen, die du brauchst:<\/p>\n In diesem Beispiel ist die GraphQL-Abfrage so konzipiert, dass sie Details zu den Beitr\u00e4gen abfragt. Wir fragen jedoch nur nach dem Titel, dem Datum und dem Namen des Autors. Mit WPGraphQL kannst du nur die Felder abfragen, die dich interessieren, was zu einer effizienteren und schlankeren Antwort f\u00fchrt.<\/p>\n In WPGraphQL kannst du mehrere Stammdaten in einer einzigen Anfrage abfragen, was sie flexibel und effizient macht:<\/p>\n Wenn du dich auf die Reise zu einem Headless-WordPress-Setup begibst, ist eine der wichtigsten Entscheidungen, die du treffen musst, die Wahl des idealen Head – der Frontend-Technologie, die deine Benutzeroberfl\u00e4che betreibt und das Benutzererlebnis bestimmt.<\/p>\n Diese Entscheidung ist immens wichtig, da sie sich direkt auf die Leistung, Skalierbarkeit und Wartbarkeit deiner Webanwendung auswirkt. Es gibt mehrere Frontend-Frameworks und -Technologien, die mit Headless WordPress kompatibel sind, und jede hat ihre St\u00e4rken und Besonderheiten.<\/p>\n Du kannst dich zum Beispiel f\u00fcr einen Static Site Generator (SSG) entscheiden<\/a> und ihn kostenlos auf dem Statischen Seiten Hosting von Kinsta<\/a> bereitstellen, so dass du dich nur um das Hosting von WordPress<\/a> (dem Backend) k\u00fcmmern musst und kostenloses Hosting f\u00fcr den Head (das Frontend) genie\u00dfen kannst.<\/p>\n Du kannst auch einen robusteren Ansatz w\u00e4hlen, z. B. eine JavaScript-Bibliothek<\/a> wie React<\/a> verwenden, um dein Frontend zu betreiben und WordPress das Backend bearbeiten zu lassen.<\/p>\n Sowohl WPGraphQL als auch die REST-API bieten leistungsstarke M\u00f6glichkeiten, um Daten aus einem headless WordPress CMS zu holen und sie nahtlos in Frontend-Anwendungen zu integrieren. Die Wahl zwischen beiden h\u00e4ngt von den spezifischen Anforderungen deines Projekts und deinem bevorzugten Datenabrufverfahren ab.<\/p>\n Wenn du dich f\u00fcr die REST-API entscheidest, erh\u00e4ltst du Zugang zu einer in WordPress integrierten L\u00f6sung, mit der du ganz einfach Daten im JSON-Format abrufen kannst. WPGraphQL hingegen bietet einen moderneren und effizienteren Ansatz, der die Leistungsf\u00e4higkeit von GraphQL nutzt.<\/p>\n Da sich der Headless-Trend immer weiter entwickelt, k\u00f6nnen Entwickler\/innen das Tool w\u00e4hlen, das am besten zu ihren Arbeitsabl\u00e4ufen und Projektzielen passt und eine nahtlose und effiziente Integration zwischen WordPress und dem Frontend-Framework ihrer Wahl gew\u00e4hrleistet.<\/p>\n Bei Kinsta<\/a> ist die Erstellung und Verwaltung deines WordPress (Backend) mit unserem spezialisierten WordPress Hosting<\/a> ein Kinderspiel. Es verf\u00fcgt \u00fcber wertvolle Funktionen wie Edge Caching<\/a>, Website-Backups<\/a>, kostenlose Cloudflare SSL-Zertifikate<\/a>, Kinsta CDN<\/a> und mehr.<\/p>\n Au\u00dferdem kannst du dein Frontend mit unserem Anwendungs-Hosting<\/a> oder Statische Seite Hosting<\/a> f\u00fcr SSGs bereitstellen. Dieser einheitliche Ansatz erm\u00f6glicht es dir, sowohl dein Frontend als auch dein Backend \u00fcber ein einziges Dashboard<\/a> zu hosten und darauf zuzugreifen.<\/p>\n","protected":false},"excerpt":{"rendered":" In der heutigen Webentwicklung hat die Entkopplung von Frontend- und Backend-Systemen stark an Bedeutung gewonnen und zu Headless Websites gef\u00fchrt. Traditionell waren Content Management Systeme (CMS) …<\/p>\n","protected":false},"author":287,"featured_media":67823,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[925,945],"class_list":["post-67822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-headless-cms"],"yoast_head":"\nHeadless WordPress<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/headless-cms-arcitecture.png\")
Die REST-API f\u00fcr Headless WordPress verstehen<\/h2>\n
\/wp-json<\/code> an die URL deiner WordPress-Website an:<\/p>\nhttp:\/\/yoursite.com\/wp-json<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json<\/code> besuchst, kannst du sie aktivieren, indem du deine Permalinks<\/strong> unter WordPress-Einstellungen<\/strong> \u00f6ffnest und Post Name<\/strong> oder eine andere Option deiner Wahl au\u00dfer Plain<\/strong> ausw\u00e4hlst:<\/p>\n![\"So](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/configure-headless-wp-rest-api.jpg\")
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/media<\/code><\/pre>\nWPGraphQL f\u00fcr Headless WordPress erforschen<\/h2>\n
Wie man WPGraphQL verwendet<\/h3>\n
\n
![\"WpGraphQL-Plugin](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/wpgraphql-plugin.png\")
![\"GraphQL](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/graphql-ide-wp.jpg\")
![\"Abfrage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/testing-graphql-wp.jpg\")
Die wichtigsten Funktionen von WPGraphQL<\/h3>\n
Ein einziger Endpunkt f\u00fcr pr\u00e4zisen Datenabruf<\/h4>\n
\/graphql<\/code>, mit dem du bestimmte Daten effizient abrufen kannst. Dies steht im Gegensatz zur REST-API, bei der du mehrere Endpunkte ben\u00f6tigst, um dieselben Informationen zu erhalten.<\/p>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/123<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments?post=123<\/code><\/pre>\n{\n post(id: \"123\") {\n title\n content\n comments {\n edges {\n node {\n content\n }\n }\n }\n }\n}<\/code><\/pre>\nGezielte Abfragen f\u00fcr einen effizienten Abruf<\/h4>\n
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n{\n posts {\n title\n date\n author {\n name\n }\n }\n}<\/code><\/pre>\nMehrere Root-Ressourcen<\/h4>\n
{\n posts {\n edges {\n node {\n title\n content\n }\n }\n }\n\n pages {\n edges {\n node {\n title\n content\n }\n }\n }\n}<\/code><\/pre>\nDie Wahl des idealen Head f\u00fcr Headless WordPress<\/h2>\n
Zusammenfassung<\/h2>\n