{"id":69997,"date":"2024-05-13T09:05:27","date_gmt":"2024-05-13T08:05:27","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69997&preview=true&preview_id=69997"},"modified":"2024-05-16T14:32:35","modified_gmt":"2024-05-16T13:32:35","slug":"wordpress-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-sveltekit\/","title":{"rendered":"Integration von SvelteKit in Headless WordPress"},"content":{"rendered":"

Headless WordPress ist schon seit einiger Zeit ein gro\u00dfer Trend in der Webentwicklung. Die Entkopplung von Frontend und Backend kann zu einem h\u00f6heren Ma\u00df an Kontrolle, Omnichannel-Anwendungen<\/a> und einigen interessanten Einsatzm\u00f6glichkeiten dieser neuen Technologie f\u00fchren.<\/p>\n

Viele Entwicklerinnen und Entwickler experimentieren gerne mit Frameworks wie Vue.js<\/a> und React.js<\/a> oder sogar mit Web-Frameworks wie Django<\/a> und Ruby on Rails<\/a>, die normalerweise nicht mit WordPress kompatibel sind.<\/p>\n

Es gibt viele solcher Frameworks, die gut mit Headless WordPress funktionieren, aber SvelteKit ist etwas Besonderes. Das UI-Framework wurde speziell entwickelt, um die Entwicklung von Webanwendungen durch pr\u00e4gnanten und eleganten Code zu erleichtern. Es kann ganz einfach Funktionen optimieren, die in einer entkoppelten Umgebung normalerweise nicht gut funktionieren.<\/p>\n

Willst du mehr dar\u00fcber erfahren? Wir erkl\u00e4ren dir die Grundlagen von Headless WordPress und zeigen dir, wie du SvelteKit in deiner Umgebung einsetzen kannst.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Was ist Headless WordPress?<\/h2>\n

Du kennst vielleicht schon den Unterschied zwischen dem WordPress Front- und Backend<\/a>. Im Backend laufen alle grundlegenden Vorg\u00e4nge des CMS ab: Du erstellst Beitr\u00e4ge und Seiten, installierst Plugins, gestaltest dein Theme und \u00e4nderst Einstellungen.<\/p>\n

Auf der anderen Seite ist das Frontend die Website, die den Besuchern angezeigt wird. WordPress nutzt neben seinen Themes und Plugins verschiedene Funktionen wie get_posts()<\/a>, um die ben\u00f6tigten Daten abzurufen und anzuzeigen.<\/p>\n

Nehmen wir zum Beispiel das Recent Posts Widget, das auf der Startseite angezeigt wird. Mithilfe solcher Funktionen greift es auf Daten aus dem Backend zu und zeigt deine neuesten Beitr\u00e4ge im \u00f6ffentlichen Frontend an.<\/p>\n

\"Verwandte
Verwandte Artikel werden auf dem Kinsta-Blog angezeigt<\/figcaption><\/figure>\n

Das Backend und das Frontend von WordPress sind eng miteinander verwoben und h\u00e4ngen in vielerlei Hinsicht voneinander ab, aber das bedeutet nicht, dass sie untrennbar sind.<\/p>\n

Hier kommt das Konzept des „Headless WordPress“ ins Spiel: Damit trennst du das WordPress-Backend ab oder entkoppelst es. Du kannst es dann mit jeder beliebigen Frontend-Technologie verbinden – nicht nur mit PHP, sondern mit jedem Webentwicklungs-Framework<\/a> oder sogar mit einer Anwendung.<\/p>\n

Dies hat den zus\u00e4tzlichen Vorteil, dass du das WordPress CMS \u00fcber mehrere Kan\u00e4le hinweg nutzen kannst. Portiere deine Blogbeitr\u00e4ge oder andere CMS-Elemente auf mehrere Websites, mobile Apps und wo immer du willst.<\/p>\n

Insgesamt gibt dir das Headless WordPress mehr Kontrolle \u00fcber das CMS und die M\u00f6glichkeit, Technologien zu nutzen, die normalerweise nicht mit dem CMS kompatibel sind. Au\u00dferdem erspart es dir, eine ganze Anwendung von Grund auf neu zu schreiben – du kannst das integrierte CMS von WordPress nutzen, um einen Teil der Arbeit zu erledigen.<\/p>\n

Was ist die REST-API?<\/h2>\n

Damit Headless WordPress funktioniert, musst du deine Anwendungen \u00fcber eine API (Application Programming Interface) miteinander verbinden. APIs erm\u00f6glichen es, zwei verschiedene Anwendungen miteinander zu verbinden, in diesem Fall das WordPress-Backend und deine benutzerdefinierte Front-End-Anwendung.<\/p>\n

Es gibt zwar viele Arten von APIs, aber die REST-API<\/a> ist eine, die in WordPress integriert ist. Sie erm\u00f6glicht es externen Anwendungen, sicher Daten aus dem WordPress-Backend abzurufen, ohne dass sie die Verwaltungsoberfl\u00e4che passieren m\u00fcssen.<\/p>\n

Die REST-API wird in einer Reihe offizieller WordPress-Funktionen verwendet, z. B. im Block-Editor, und die meisten Themes und Plugins, die eine API ben\u00f6tigen, um zu funktionieren, nutzen diese.<\/p>\n

Das gilt auch f\u00fcr Headless-Anwendungen. Viele von ihnen nutzen die REST-API als Schnittstelle zu WordPress, um Daten aus dem Backend abzurufen und sie dynamisch in deiner Front-End-Anwendung darzustellen.<\/p>\n

Die REST-API stellt Endpunkte<\/a> zur Verf\u00fcgung, die verschiedene WordPress-Ressourcen repr\u00e4sentieren, z. B. Beitr\u00e4ge, Seiten, Benutzer, Kategorien und so weiter. Wenn du auf diese zugreifst, kannst du diese Daten im Frontend anzeigen.<\/p>\n

Aber w\u00e4hrend du die REST API damit nutzen kannst, verl\u00e4sst sich SvelteKit f\u00fcr viele seiner Funktionen haupts\u00e4chlich auf eine andere Technologie: GraphQL.<\/p>\n

Was ist GraphQL?<\/h2>\n
\"GraphQL\"
GraphQL ist eine API-Abfragesprache<\/figcaption><\/figure>\n

GraphQL<\/a> ist keine API selbst, sondern eine API-Abfragesprache. Im Gegensatz zu herk\u00f6mmlichen REST-APIs<\/a>, bei denen Kunden oft mehrere Anfragen an verschiedene Endpunkte stellen m\u00fcssen, um zusammenh\u00e4ngende Daten abzurufen, kannst du mit GraphQL alle deine Daten mit einer einzigen Anfrage abrufen.<\/p>\n

Insgesamt wurde GraphQL so konzipiert, dass du pr\u00e4zisere Abfragen in einem schnellen und optimierten Rahmen erstellen kannst. Au\u00dferdem ist es leichter zu erlernen und weniger komplex als die REST-API.<\/p>\n

Aus diesen Gr\u00fcnden verwenden viele Headless-WordPress-Frameworks GraphQL anstelle oder neben der REST-API. Obwohl GraphQL nicht wie die REST-API mit WordPress geb\u00fcndelt ist, gibt es Plugins, mit denen du diese Funktionalit\u00e4t in das CMS integrieren kannst.<\/p>\n

Dank des optimierten Frameworks vermeidest du, dass du zu wenig oder zu viele Daten abrufst. Du kannst mit einer einzigen Abfrage genau die Daten abrufen, die du brauchst, was dein Netzwerk und deinen Server deutlich entlastet.<\/p>\n

Was ist SvelteKit?<\/h2>\n
\"SvelteKit\"
SvelteKit ist ein Framework, mit dem du Anwendungen und Headless WordPress erstellen kannst<\/figcaption><\/figure>\n

SvelteKit<\/a> ist ein Web-Framework, das auf Svelte aufbaut, einem Open-Source-Frontend-Framework, das in seiner Funktion Next.js<\/a> oder React<\/a> \u00e4hnelt. Es wurde entwickelt, um die Erstellung von Webanwendungen zu vereinfachen, und obwohl es nicht speziell f\u00fcr Headless WordPress entwickelt wurde, ist dies nur eine von vielen m\u00f6glichen Anwendungen.<\/p>\n

SvelteKit wurde auf HTML, CSS und Javascript aufgebaut – mehr nicht. Dadurch ist es super einfach zu bedienen und unabh\u00e4ngig von Frameworks, sodass du es neben anderen Frameworks verwenden kannst, um eine vollst\u00e4ndig dynamische Front-End-Anwendung oder eine statische Website zu<\/a> erstellen.<\/p>\n

Svelte wurde 2016 auf den Markt gebracht und wird auch heute noch aktiv weiterentwickelt. Das Web-Framework SvelteKit kam ein paar Jahre sp\u00e4ter, im Jahr 2020. Beide sind in der Webentwicklungsszene bekannt und beliebt und erm\u00f6glichen es dir, einfachen und eleganten Code zu schreiben.<\/p>\n

Warum du SvelteKit f\u00fcr Headless WordPress verwenden solltest<\/h3>\n

Es gibt ein paar Aspekte von Headless WordPress, die m\u00fchsam zum Laufen zu bringen sind. Dank des minimalen Designs von SvelteKit werden diese Probleme minimiert und machen die Einrichtung von Headless WordPress viel reibungsloser.<\/p>\n

Hier sind nur ein paar der Funktionen, die SvelteKit bietet.<\/p>\n