In diesem Artikel geht es um das Frontned-Framework Nuxt.js in Verbindung mit WordPress als sogenanntes Headless CMS. Ich möchte euch zeigen mit welchen Plugins ihr WordPress zu einem ultimativen Backend für euer nächstes Projekt eingerichtet bekommt und dabei nicht auf Nuxt.js verzichten müsst.
Dies ist kein Tutorial sondern dient nur als Hilfestellung und Inspiration.
DAS FRONTEND – NUXT.JS
Auf Seitens des Frontends steht an erster Stelle das aufsetzen von Nuxt.js. Hierzu findet ihr eine ausführliche Anleitung auf https://nuxtjs.org/guide/installation. Um später mit dem Backend (WordPress) kommunizieren zu können, benötigen wir natürlich noch ein paar module.
- Axios – https://axios.nuxtjs.org/
Wird benötigt um die Daten von WordPress über die REST API zu beziehen. - Sitemap Module – https://www.npmjs.com/package/@nuxtjs/sitemap
Wird benötigt um Nuxt.js eine Sitemap generieren zu lassen. - Nuxt payload extractor – https://www.npmjs.com/package/nuxt-payload-extractor
Wird nicht benötigt, wenn Nuxt.js im SSR-Modus läuft. Andernfalls sorgt es dafür, dass alle Daten des Backends nur beim Generieren der Webseite benötigt werden, welches die Performance der Webseite enorm erhöht.
Nachdem ihr also nun die benötigten Module für das Fontend habt, könnt ihr euch um das Design eurer Webseite kümmern. Hierzu sind eurer Fantasie und Kreativität keine Grenzen gesetzt. Gestaltet eure Seite ganz nach belieben und fügt an die gewünschten Stellen einfach Platzhaltertext ein. Hierfür kann ich euch die Webseite Lorem Ipsum für Text und Placeholder für Bilder empfehlen.
Nachdem ihr eure Webseite nun so gestaltet habt, wie sie einmal aussehen soll, können wir uns um das Backend kümmern.
DAS BACKEND – WORDPRESS
Zuerst einmal installiert ihr die neuste Version von WordPress. Hierzu besucht ihr einfach die offizielle Webseite und lest euch die Installationsanleitung durch. Nach erfolgreicher Installation geht es auch schon direkt zu den benötigten Plugins. Natürlich würdet ihr auch ohne auskommen, ich denke aber, dass ihr auf manchen Seiten mehr als nur ein Bild, eine Headline und einen Text haben wollt.
Folgende Plugins nutze ich persönlich auf dieser Webseite und kann diese auch bestens weiterempfehlen:
- Duplicate Page and Post
Um Seiten und Beiträge ganz einfach zu duplizieren. - Meta Box – WordPress Custom Fields Framework (PRO Version)
Erleichtert euch das Managen von zusätzlichen Feldern auf Seiten und Beiträgen. (weiteren unten)- Meta Box
- MB Admin Columns
- MB Blocks
- MB Custom Post Type
- MB Custom Taxonomy
- MB Rest API
- MB Settings Page
- MB Term Meta
- Meta Box Builder
- Meta Box Columns
- Meta Box Conditional Logic
- Meta Box Group
- Meta Box Include Exclude
- Meta Box Show Hide
- Meta Box Tabs
- Meta Box Template
- Meta Box Text Limiter
- Meta Box Tooltip
- Regenerate Thumbnails Advanced
Wird benötigt um euch das erstellen von Thumbnails in von euch definierten Größen zu erleichtern. - WP Headless CMS Framework
Wird benötigt um das komplette WordPress-Frontend zu deaktivieren. (Nützlich, damit Google und co. eurer Backend nicht indexiert) - Yoast SEO + WP REST Yoast Meta
Wird für eine SEO freundliche Webseite benötigt. - WP-REST-API V2 Menus
Wird benötigt damit ihr eure Menüs in WordPress managen könnt und diese auch in der REST API auftauchen.
Ja, das sind alles eine Menge Plugins. Die meisten davon sind aber von MetaBox und in deren Core Extensions Bundle inbegriffen und bis auf dieses sind auch alle Plugins kostenlos.
DAS ZUSAMMENFÜGEN VON FRONT- UND BACKEND
Nachdem wir nun das Front- und Backend vorbereitet haben, können wir mit dem Zusammenfügen beider anfangen. Hierzu wird die integrierte REST API von WordPress verwendet. Diese ist unter https://example.com/wp-json/wp/v2/ zu erreichen.
Jede Webseite hat eine Startseite – zumindest sollte sie eine haben. Um Daten dieser Startseite abzurufen, müssen wir natürlich auch eine in unseren Backend anlegen. Dieser Seite habe ich über das Plugin MetaBox noch ein paar Zusatzfelder hinzugefügt. Titel, Beschreibung, Zitat und Author des Zitats. Diese Felder kann ich nun entsprechend ausfüllen und über die REST API mit folgendem Link auslesen: https://example.com/wp-json/wp/v2/pages?slug=index. index ist hierbei der Permalink der Seite, welche ich in WordPress angelegt habe. Ausgelesen werden diese Daten in Nuxt.js in der asyncData Funktion mit Axios. Unter dem Punkt meta_box finden wir dann die zuvor über MetaBox angelegten Felder und können diese in unserem Frontend nutzen. Zusätzlich findet ihr auch alle angegebenen SEO-Daten unter dem Punkt yoast_meta.
- Menüs
https://example.com/wp-json/menus/v1/menus/name-eures-menues - Seiten
https://example.com/wp-json/wp/v2/pages - Beiträge
https://example.com/wp-json/wp/v2/posts
Mit diesen Modulen und Plugins sollte es euch ein leichtes sein Nuxt.js und WordPress miteinander zu verbinden. Am ende reicht in Nuxt ein einfaches npm run generate um eure Webseite zu erstellen. Diese erstellen Dateien könnt ihr nun ganz einfach auf euren Webserver laden – fertig!
DAS ZUSAMMENFÜGEN VON FRONT- UND BACKEND
Nuxt.js ist einfach mein persönlicher Favorit in Sachen Frontend-Framework. Natürlich könnt ihr hier aber auch React, Angular oder ein Framework eurer Wahl nehmen, welches Daten aus einer REST API verarbeiten kann. WordPress hat sich über die letzten Jahre immer weiterentwickelt und ist immer noch bei vielen Nutzern beliebt. Genau aus diesem Grund war es mir persönlich wichtig eine Möglichkeit zu finden Nuxt.js und WordPress miteinander verbinden zu können, ohne dabei auf ein modernes Frontend-Framework verzichten zu müssen.
Dieser Artikel ist natürlich kein step by step Tutorial sondern soll euch nur einen Einblick geben, WAS mit WELCHEN Hilfsmitteln in der heuten Zeit möglich ist.
Habt ihr konkrete Fragen zur Verbindung von Nuxt.js und WordPress oder braucht ihr Hilfe beim programmieren eurer eigenen Webseite? – Scheut nicht davor zurück das Kontaktformular auszufüllen!