Erfahre, wie du eine Headless WordPress Seite mit Vue.js erstellst

WordPress ist das bevorzugte Content Management System für Entwickler und Nicht-Entwickler, um schnell beeindruckende Webseiten zu erstellen und zu pflegen.

Die Verwendung einer Microservice-Architektur, bei der das Backend des Content Management Systems vom Frontend getrennt ist, ermöglicht die maximale Kontrolle über beide „Enden“.  Dieses Trennungsproblem versuchen Headless-Content-Management-Systeme, einschließlich Headless-WordPress-Lösungen, zu lösen.

Mit einem Headless-Ansatz haben Unternehmen eine genauere Kontrolle über das Content Management Backend. Außerdem können sie jedes Frontend ihrer Wahl verwenden, z. B. React, Vue, Angular usw.

In diesem Leitfaden werden wir uns ausführlich mit dem Thema Headless WordPress beschäftigen, was es damit auf sich hat und wann und warum du es nutzen solltest. Schließlich werden wir uns mit der Erstellung einer Headless-WordPress-Umgebung, dem Aufbau des Frontends mit Vue.js und dem Deployment des Headless-WordPress mit Kinsta beschäftigen.

Was ist Headless WordPress?

WordPress ist eine monolithische Anwendung, bei der das Backend und das Frontend eng miteinander verwoben sind. Das Backend ist der Ort, an dem die Verwaltung stattfindet. Hier kannst du Inhalte erstellen, bearbeiten, hinzufügen und löschen und auch das Erscheinungsbild ändern. Im Gegensatz dazu ist das Frontend für die Anzeige der Inhalte für die Nutzer/innen zuständig.

Headless WordPress ist der Begriff, der verwendet wird, um das entkoppelte WordPress zu beschreiben. Der Backend-Teil (Verwaltung) ist vom Frontend-Teil des WordPress CMS getrennt. Du kannst das Frontend als eigenständige Anwendung mit einem beliebigen Frontend-Framework deiner Wahl entwickeln und verwalten.

Vor- und Nachteile von Headless WordPress

Im Folgenden gehen wir auf die Vor- und Nachteile von Headless WordPress ein, damit du das Konzept besser verstehst.

Die Vorteile

Beginnen wir mit den Vorteilen.

Superschnelle Leistung

Im Zeitalter superschneller Anwendungen sollte deine Webseite nicht länger als ein paar Sekunden zum Laden brauchen, um keine Besucher zu verlieren. Da das Frontend von WordPress getrennt ist und mit modernen Frontend-Tools mit Blick auf Hochleistung und Skalierbarkeit entwickelt werden kann, ist der Einsatz eines Headless-WordPress-Konzepts von großem Vorteil für das gesamte Nutzererlebnis deiner Webseite.

Granulare Kontrolle

Wenn du dich für eine Headless-Architektur entscheidest, hast du mehr Kontrolle über das Design, die Darstellung der Inhalte und die Art und Weise, wie die Nutzer mit dem Frontend deiner Anwendung interagieren. Außerdem kannst du so deine Backend-Inhalte sichern und von einer zentralen Stelle aus darauf zugreifen.

Erhöhte Skalierbarkeit

Die Skalierung von WordPress kann manchmal kompliziert sein, weil du nicht die vollständige Kontrolle über alle Komponenten und Codes hast, die WordPress antreiben, vor allem wenn du kein Entwickler bist. Mit der Entkopplung von WordPress ist es jedoch mühelos möglich, jeden Teil für sich zu skalieren, und du kannst leicht erkennen, welcher Teil skaliert werden muss.

Höhere Sicherheit

Wir können die Sicherheitsvorteile von Headless WordPress gar nicht genug betonen, denn entkoppeltes WordPress bietet hohe Sicherheitsvorteile gegen Hacker und DDoS-Angriffe. Der Headless-WordPress-Ansatz macht es Hackern schwer, auf deine sensiblen Backend-Daten zuzugreifen, da es von deinem Frontend, also der benutzerorientierten Webseite, getrennt ist.

Leichtes Design

Du hast mehr Kontrolle über die Struktur und das Layout deines Frontend-Designs. Außerdem kannst du das Frontend freier und individueller gestalten; dank der REST-API-Aufrufe kannst du die Vorteile moderner Web Tools nutzen und sie im Frontend einsetzen.

Veröffentlichung von Inhalten über mehrere Kanäle

Da Headless WordPress ein API-basiertes System verwendet, um deine Inhalte an das Frontend zu übermitteln, kannst du deine Inhalte überall und auf jeder Plattform anzeigen, z. B. auf dem Desktop, auf der Webseite, in mobilen Apps und auf Touchscreen-Kiosken. Es ist auch möglich, Augmented Reality, Virtual Reality und das Internet der Dinge zu nutzen, um deine Inhalte aus dem API-basierten System anzuzeigen und zu präsentieren.

Die Nachteile

Auf die Nachteile von Headless werden wir später noch genauer eingehen, aber die wichtigsten Nachteile sind:

1. Die Trennung von Backend und Frontend bedeutet eine zusätzliche Belastung bei der Verwaltung verschiedener Webseiten-Instanzen.
2. Es kann kostspielig sein, da du zusätzliche Mitglieder in deinem Team und zusätzliches Kapital für den Betrieb verschiedener Instanzen benötigst.
3. Wenn du deine Inhalte auf verschiedenen Plattformen zur Verfügung stellst, kann das zu einem inkonsistenten Erlebnis für deine Nutzer führen, wenn die Inhalte nicht auf allen Plattformen einheitlich dargestellt werden.

Wenn Headless WordPress nicht die beste Option ist

Da Headless WordPress eine unglaubliche Innovation mit großen Vorteilen ist, gibt es einige Dinge, die du bei der Entscheidung, ob du es einsetzen solltest, beachten solltest.

1. Headless WordPress ist sehr teuer in der Wartung. Du wirst zwei verschiedene Instanzen einer Webseite unterhalten, von der Infrastruktur bis zu mehreren Entwicklern.
2. Headless WordPress unterstützt nicht alle Funktionen von WordPress. Zum Beispiel funktionieren großartige WordPress-Funktionen wie der WYSIWYG-Editor und die Live-Vorschau nicht, wenn du ein separates Frontend verwendest.
3. Es ist teurer, ein Headless WordPress einzurichten. Daher solltest du die höheren Kosten immer im Hinterkopf behalten.

Wer sollte Headless WordPress verwenden?

Im Folgenden findest du die am besten geeigneten Fälle, in denen du Headless WordPress benötigen könntest:

1. Du solltest ein Headless WordPress verwenden, wenn die Sicherheit deiner Webseite für dich und dein Unternehmen an erster Stelle steht.
2. Wenn deine Webseite nicht regelmäßig aktualisiert werden muss, ist das ein gutes Zeichen dafür, dass du ein Headless-Setup verwenden solltest.
3. Wenn du dir ein individuelles Design wünschst, das mit einem WordPress Theme nicht ohne weiteres möglich ist, möchtest du das Frontend deiner Webseite mit einem einzigartigen Design aufpeppen. Dann ist das Headless WordPress deine nächste Option.
4. Wenn du eine kurzlebige Webseite oder eine Demoseite für Präsentationen und Anleitungen erstellst, kannst du den Headless-Ansatz ausprobieren.

Wer sollte die Verwendung von Headless WordPress vermeiden?

Hier sind einige Fälle, in denen die Verwendung von Headless WordPress keine gute Option ist:

1. Wenn deine Webseite ausschließlich von bestimmten Plugins und Funktionen abhängt, die das Frontend deiner Anwendung steuern und am besten mit ihr zusammenarbeiten, solltest du bei WordPress bleiben, es sei denn, die Plugins bieten API-basierte Optionen zum Abrufen der Daten.
2. Angenommen, du hast kein Interesse daran, deine Webseite zu programmieren, oder deine Webseite muss täglich gewartet werden, und du stellst aufgrund deines geringen Budgets keinen Profi für die regelmäßige Wartung ein. In diesem Fall ist WordPress die richtige Wahl für dich.
3. Wenn du kein erfahrener Entwickler bist und deine Webseite allein erstellen und verwalten willst, solltest du WordPress verwenden.

Wie man WordPress Headless macht (eine App bauen)

In diesem Abschnitt geht es um den Aufbau und die Entwicklung eines News-Blogs mit Headless WordPress als Backend und Vue 3 als Frontend für den Benutzer.

Einrichten von Headless WordPress mit Devkinsta

Wir werden das Headless WordPress mit DevKinsta entwickeln, einer beliebten lokalen WordPress-Entwicklungsumgebung, mit der du deine Webseiten bequem von deinem lokalen Rechner aus gestalten, entwickeln und bereitstellen kannst.

DevKinsta ist für immer kostenlos und bietet dir große Vorteile und Komfort bei der Entwicklung und Erstellung von WordPress mit diesem Tool.

Du kannst DevKinsta von der offiziellen Webseite herunterladen und installieren und den Anweisungen in der Dokumentation folgen, um loszulegen.

Da wir DevKinsta bereits installiert haben, öffnen wir es und folgen den unten stehenden Schritten, um unser erstes Headless WordPress einzurichten.

Erstelle auf dem Dashboard von DevKinsta eine neue WordPress Seite mit Nginx, MySQL und einer beliebigen WordPress Version. Du kannst auch eine bestehende WordPress-Instanz importieren oder eine eigene WordPress-Instanz über das Dashboard erstellen.

Als Nächstes gibst du deiner neu erstellten WordPress-Instanz einen Namen, einen Administrator-Benutzernamen und ein Passwort, klickst dann auf Erstellen und kopierst die Details, während DevKinsta eine neue WordPress-Instanz auf deinem lokalen Rechner erstellt.

Klicke dann auf Seite öffnen, um deine neu erstellte WordPress-Instanz in deinem Standardbrowser zu öffnen.

Schließlich kannst du dich im Admin-Dashboard anmelden, indem du auf den Link http://headless-wordpress-news-blog.local/wp-admin eingibst, die du bei der Erstellung der neuen Instanz eingegeben hast.

Beachte, dass wir unser Headless WordPress lokal mit der URL http://headless-wordpress-news-blog.local eingerichtet haben. Das Frontend wird lokal auf http://news-blog.local gehostet und wir werden es während des gesamten Lehrgangs verwenden.

Unser Headless WordPress konfigurieren

Nachdem du dich erfolgreich in dein WordPress Dashboard eingeloggt hast, kannst du alle Plugins und Konfigurationen deiner Wahl installieren.

Für diesen Lehrgang werden wir das Theme komplett deaktivieren und nur über den REST-API-basierten Endpunkt von WordPress auf die Inhalte zugreifen, indem wir das Plugin Simple Website Redirect installieren und einrichten.

Gehe zu Plugins > Neu hinzufügen und suche nach dem Simple Website Redirect, installiere und aktiviere es:

Klicke als Nächstes auf die Plugin-Einstellungen und gib deine Frontend-URL ein (z.B. http://news-blog.local), klicke auf die erweiterten Einstellungsoptionen und füge die folgenden Pfade – /wp-admin, /wp-login.php und /wp-json – zum Abschnitt Exclude Paths hinzu.

Aktiviere das Plugin, indem du in der Dropdown-Liste Umleitungsstatus die Option Aktiviert wählst:

…und das war’s!

Wenn deine JSON-API nicht standardmäßig aktiviert ist, wenn du http://headless-wordpress-news-blog.local/wp-json aufrufst, kannst du sie aktivieren, indem du deine Permalinks unter WordPress-Einstellungen öffnest und Post Name oder eine andere Option deiner Wahl außer Plain auswählst:

Wenn du jetzt deine http://headless-wordpress-news-blog.local/wp-json aufrufst, sollte sie dir JSON-Daten wie unten dargestellt präsentieren:

{
  "name": "Headless WordPress News Blog",
  "description": "Just another WordPress site",
  "url": "http://headless-wordpress-news-blog.local",
  "home": "http://headless-wordpress-news-blog.local",
  "gmt_offset": "0",
  "timezone_string": "",
  "namespaces": [
    "oembed/1.0",
    "wp/v2",
    "wp-site-health/v1"
  ],
  "authentication": [
    
  ],
  "routes": {
    "/": {
      "namespace": "",
      "methods": [
        "GET"
      ],
      "endpoints": [
        {
          "methods": [
            "GET"
          ],
          "args": {
            "context": {
              "default": "view",
              "required": false
            }
          }
        }
      ],
...

Einrichten von Vue.js (Frontend)

Wir werden das Vite Web Development Tool verwenden, um unsere Vue 3-Anwendung zu erstellen, die sich mit dem Headless WordPress verbindet. Du kannst mehr über Vue 3 und die Vite Entwickler-Tools lesen.

In diesem Artikel werden wir einen News-Blog erstellen. Das gesamte Backend-Inhaltsmanagement des Projekts wird mit unserem Headless WordPress entwickelt und mit Devkinsta gehostet.

Gib diese einfachen Befehle ein:

npm init @vitejs/app news-blog
cd news-blog
npm install
npm run dev

Wenn du Probleme mit Leerzeichen in deinem Benutzernamen hast, versuche es mit:

npx create-vite-app news-blog

Beachte, dass wir unsere Vue 3-Anwendung so konfiguriert haben, dass sie auf http://news-blog.local hört, aber du kannst auch die Standardeinstellung http://localhost:3000 verwenden.

Öffne deine Vue 3-Codebasis mit einem Code-Editor deiner Wahl. Wir entscheiden uns für VSCode und fangen an, uns die Hände mit Code schmutzig zu machen.

Nutzung der WordPress-API

Wir haben den restlichen Teil der Vue-Anwendung entwickelt, damit du nicht so viel Zeit zum Lesen brauchst, aber du kannst das Repository auf GitHub klonen.

App Post-Komponente anzeigen

Das folgende Codeschnipsel zeigt, wie wir die WordPress REST API mit unserer Vue-Instanz implementieren, um alle Beiträge aus dem Headless WordPress anzuzeigen:

<template>
  <section>
    <div class="padding-top">
      <div class="container inner-padding-top">
        <div class="row">
          <div class="col-md-12 col-sm-12-col-xs-12 text-center">
            <h2 class="lead-title text-uppercase">
              Latest Backend Dev. Articles
            </h2>
            <h3 class="article-subtitle">
              Latest Backend Dev. Articles curated daily by the community.
            </h3>
          </div>
        </div>
        <div class="row mb-1 mt-5">
          <post v-for="(post, i) in posts" :key="i" :post="post" />
        </div>
      </div>
    </div>
    <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5">
      <Button link="/posts" class="col p-3">More Articles</Button>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      posts: (state) => {
        return [...state.post.posts].slice(0, 22)
      },
    }),
  },
}
</script>

Einzelne Beitragskomponente anzeigen

Das Codeschnipsel zeigt, wie wir einen einzelnen Beitrag über die WordPress REST API mit dem Headless WordPress abrufen und ihn in unserer Vue-Instanz anzeigen:

<template>
  <div class="card single">
    <div class="card-head pl-3 pr-3 pt-3">
      <h1 class="title">{{ post.title || '' }}</h1>
      <div class="d-flex">
        <div class="author d-flex pr-3 pb-4">
          <div class="profile mr-2"></div>
          <a :href="'/authors/' + post.author.slug" class="subtitle is-6">
            {{ post.author.name }}
          </a>
        </div>

        <div class="date_created">
          <small class="text-muted">
            <li class="fa fa-calendar"></li>
            <time
              :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')"
              >{{ $moment(post.date).format('MMMM Do YYYY') }}</time
            >
          </small>
        </div>
      </div>
    </div>
    <div class="block-image pl-3 pr-3 pt-2 mb-3">
      <img
        v-lazy-load
        :data-src="image"
        class="card-img-top img-fluid"
        :alt="post.title"
      />
    </div>

    <div class="tags absolute">
      <a
        v-for="category in post.categories"
        :key="category.id"
        :href="'/categories/' + category.slug"
        class="btn-tag"
      >
        {{ category.title }}
      </a>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'SinglePost',
  props: {
    post: {
      type: [Object, Array],
      default: () => {},
    },
  },
}
</script>

Unten ist der Store, der die API-Aufrufe an die Headless WordPress API für die Backend-Inhalte macht:

export const actions = {
  async getPosts({ commit }, { page, count = 22 }) {
    try {
      const response = await fetch(
        `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts`
      )
      const data = await response.json()
      if (data) {
        commit('setPosts', data)
      }
      return data
    }
  },
  
 async getPost({ commit }, id) {
    try {
      const response = await fetch(
        `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`
      )
      const data = await response.json()
      if (data) {
        commit('setPost', data)
      }
      return data
    }
  },
 }

Bereitstellung von Headless WordPress mit Kinsta

Schließlich ist die Bereitstellung deines Headless WordPress mit DevKinsta und dem Kinsta-Hosting-Service sehr einfach.

Um dein Headless WordPress auf Kinsta bereitzustellen, klickst du auf deinem DevKinsta Dashboard auf die Schaltfläche Push to Staging und meldest dich mit deinen Anmeldedaten bei Kinsta an.

Hier erfährst du, wie du Änderungen in die Staging-Umgebung überträgst, um dein Headless WordPress mit einem einzigen Klick auf den Kinsta-Hosting-Service zu übertragen.

Und schließlich kannst du deine Vue.js-Instanz bei einem Cloud-Hosting-Anbieter deiner Wahl bereitstellen. Achte darauf, dass du deinen Headless WordPress Endpunkt entsprechend aktualisierst, um deine Anwendung in einer Produktionsumgebung zu testen.

Zusammenfassung

Headless WordPress und die Vorteile, die es mit sich bringt, werden sich noch eine Weile halten. Seine Beliebtheit wird weiter zunehmen, da immer mehr Entwickler und Betreiber von Webseiten die Vorteile der Headless-Option erkennen.

In diesem Leitfaden haben wir dir die Vorteile, Vor- und Nachteile von Headless WordPress vorgestellt und dir gezeigt, wie du dein erstes Headless WordPress mit DevKinsta erstellen und einrichten kannst. Jetzt bist du auf dem besten Weg, dein Headless WordPress zu implementieren.

Welche Tipps hast du für die Einrichtung deiner WordPress Seite ohne Kopfhörer? Teile sie bitte in den Kommentaren mit!

Solomon Eseme

Ich bin Software-Ingenieurin und Erstellerin von Inhalten, die darauf ausgerichtet ist, leistungsstarke und innovative Produkte nach Best Practices und Branchenstandards zu entwickeln. Ich schreibe auch gerne darüber auf Masteringbackend.com. Folge mir auf X, LinkedIn und About Me

• Webseite
• LinkedIn
• Twitter