VueJS als WordPress-Client

Für meine Website war mir die Erstellung von dynamischen Inhalten sehr wichtig. Ich wollte Inhalte auf eine einfache und doch komfortable Art und Weise hinzufügen können.

Wie man sicherlich erkennen kann, basiert diese Website auf VueJS und erlaubt so eine sehr gute Entwicklung sowie in meinen Augen auch eine gute User Experience.

Nun kombiniere ich auf dieser Seite eine herkömmliche WordPress-Instanz mit VueJS, um meine Inhalte weiterhin sortiert nach Kategorie anzeigen zu können. Ebenso werden Inhalte nach der Veröffentlichung automatisch nachgeladen.

Notwendige Schritte

Um eine WordPress-Seite in VueJS integrieren zu können, greift man auf die API von WordPress zurück. Diese erlaubt den Zugriff auf Kategorien, Beiträge, User und vielem mehr.

Erreichbar ist diese API unter der Adresse des Blogs mit dem Pfad /wp-json/wp/v2

Möchte man nun die Posts des Blogs auslesen, hängt man an diesen Pfad noch die Ergänzung /posts an.

Eine gute Übersicht aller verfügbaren Schnittstellen findet man auf der Seite von WordPress.

In VueJS selbst erstellt man nun die Methode mounted(), welche jedes Mal getriggert wird, sobald die Seite geladen wurde. Hier werden die Daten per Axios-Request abgerufen und lokal in Variablen gespeichert. Beispielsweise lassen sich so die Kategorien abrufen und in einem entsprechenden Menü anzeigen.

Je nachdem, welche Kategorie nun aufgerufen wird, werden die Beiträge aus dieser Kategorie in eine weitere Vue-Komponente geladen und dem Besucher angezeigt. Klickt der Besucher nun auf einen Beitrag, muss über die Rest-API der jeweilige Beitrag geladen werden.

Übrigens hat WordPress für Kategorien und Beiträge jeweils eine eigene ID vergeben. So kann man der API direkt diese als Parameter mitgeben, um die entsprechende Kategorie zu laden. Durch die guten JavaScript-Funktionalitäten von Vue, ist auch die Anpassung des Titels im Browser möglich.

Worin der Vorteil besteht

In meinen Augen besteht in der Entwicklung eines eigenen Clients ein großer Vorteil darin, dass die Website komplett frei gestaltet werden kann. Es sind alle Inhalte in einem einheitlichen User Interface verfügbar, was gerade für Unternehmen im Hinblick auf Corporate Identity, Corporate Design und Co. sehr interessant ist.

Genauso lassen sich Inhalte aus WordPress auf unkomplizierte Weise mit Inhalten der eigenen Website verknüpfen.

Ein Nachteil – und diesen darf man nicht verschweigen – besteht jedoch darin, dass die WordPress-Seite selbst nicht unter einer eigenen Domain erreichbar sein darf. Google wertet dies als Duplicate Content und straft die Seite entsprechend ab.