Verwenden Sie WordPress als kopfloses CMS

Sep 14, 2025

wie man

Ich hörte zum ersten Mal von dem kopflosen CMS-Ansatz in einem Gespräch, den ich von Twin Cities drupal beobachtete. Ich mochte die Idee einer Trennung von Bedenken zwischen dem Authoring-Inhalt und der Ansicht.

Die besten Webhosting-Services im Jahr 2019

Ich hatte bereits erlebt, wie leicht ein Server nach unten gehen kann, um alle Standorte darauf abzunehmen, was zu Minuten oder Stunden herzhafter Panik führt (es gab 24 auf meinem). Ich hatte auch gesehen, wie ein monolithischer CMS-basierter Ort einen Sicherheitskompromiss erleiden könnte und viel Mühe braucht, um zu reparieren (was mich mehr als zwei Tage unbezahlte Arbeit braucht). Für eine Reihe von Web-Hosting Anbieteroptionen, Schauen Sie sich unseren Anleitung an.

23 Tolles Beispiele für WordPress-Websites

Ich hatte die Vorteile von CDNs (Content-Delivery-Netzwerke) gesehen, die Ihr Bild, Audio- und Videodateien auf Servern speichern können, die für die schnelle Lieferung optimiert sind, und können diese Dateien auf der ganzen Welt für die schnelle Lieferung an diese Regionen doppeln, falls erforderlich. Was ist, wenn Ihre gesamte Website von diesem Ansatz profitieren könnte?

Du wirst brauchen…

● ein Computer mit einer Internetverbindung (OBHS)
● ein Code-Editor (Atom oder VS-Code)
● Eine Befehlszeilenschale / -Tanal
● Eine kürzlich installierte Version von Node.js (Sie können herunterladen & amp; installieren Hier )
● Eine WordPress-Site, um Inhalte zu erhalten. Wenn Sie keinen haben, können Sie die WordPress.com-Plattform oder dies verwenden Heroku Build Pack .
● Die Quelldateien von Github .

Einstieg

WordPress kommt mit der REST-API aus der Box, und das ist, was wir verwenden werden, um Ihre Daten abzufragen. Wir brauchen also nichts anderes! Unsere Display-Site ist völlig von unserer Inhaltsstelle getrennt, also brauchen wir nicht WordPress-Themes. oder eine andere Anpassung außerhalb einiger (optionaler) Plugins. Obwohl Sie natürlich diese hinzufügen können, wenn Sie möchten.

Die Ausnahme ist, wenn Sie benutzerdefinierte Meta-Felder für zusätzliche Inhaltsbereiche benötigen. Sie verwenden wahrscheinlich erweiterte benutzerdefinierte Felder, um dies zu tun. Sie können diese Daten dem WordPress-API von hinzufügen Installieren dieses Plugins. .

Verwenden Sie einen statischen Site-Generator

Use WordPress as a headless CMS: Gatsby starter screen — Der GATSBY-Standard-Starter-Bildschirm

Da wir jetzt über unsere Inhaltsquelle verfügen, holen wir die Daten ab und zeigen sie mit einem statischen Site-Generator an. Meine Wahl der Wahl in diesem Bereich ist Gatsby. , ein hervorragender statischer Site-Generator, der mit JavaScript gebaut wurde. (Siehe diese. Webseitenersteller Wählt einfache Möglichkeiten, um eine Website zu erstellen.)

Wenn Sie nach einem guten Weg suchen, um auf Ihren JavaScript-Fähigkeiten aufzubauen und zu lernen, um zu reagieren, indem Sie in einigen Code stecken Ich habe viel selbst gelernt, indem ich damit spiele.

Installieren wir zuerst ein Befehlszeilen-Tool, mit dem wir GATSBY-Sites erstellen können:

npm install -global gatsby-cli

Navigieren Sie nun zum Ordner, in dem Sie Ihre Site halten und diesen Befehl ausführen möchten:

gatsby new blog

Dadurch erstellt ein neuer Ordner namens 'Blog' und installiert GATSBY und seine Abhängigkeiten in diesen Ordner. Öffnen Sie diesen Ordner in Ihrem bevorzugten Texteditor. Es scheint dort viele Dateien zu geben. Mach dir keine Sorgen, wir werden nur direkt bearbeiten gatsby-config.js. , gatsby-node.js. Dateien und das src. Ordner, an dem unsere Vorlagen leben.

Wenn Sie viele Dateien aufbewahren haben, ist es ein Upgrade wert Cloud-Speicherung. .

Unseren Inhalt bekommen.

Der erste Schritt, den wir annehmen möchten, ist, unseren Inhalt von der API der WordPress-Site abzurufen.

Dazu werden wir installieren GATSBY-Source-WordPress ein vorwritten Plugin für WordPress. Dies zeigt einen der Hauptgründe, warum ich Gatsby liebe, Sie können Ihre Daten aus einer Vielzahl unterschiedlicher Quellen erhalten. Viele statische Site-Generatoren sind auf die Verwendung von Markdown-Dateien beschränkt, aber Gatsby ist sehr flexibel.

Das Plugin-Ökosystem von GATSBY ist sehr reif. Es gibt viele vorsätzliche Möglichkeiten, Ihre Daten und viele andere clevere Funktionalität zu erhalten, die auch nützlich sind.

Um das Plugin installieren, ändern Sie das Verzeichnis zuerst in Ihre neue GATSBY-Site, indem Sie diesen Befehl verwenden: CD-Blog .

Führen Sie jetzt diesen Befehl aus: NPM-Installation --Save GATSBYSOURCE-WordPres s.

Sobald dies erledigt ist, ist es an der Zeit, die Datei gatsby-config.js zu öffnen. Sie werden sehen, dass bereits ein grundlegendes Setup vorhanden ist, an dem sich Gatsby standardmäßig angibt. Wir werden darauf bauen, dass wir unser Plugin hier konfigurieren:

 module.exports = {
 Sitemetadata: {
  Titel: 'Gatsby Default Starter',
 },
 Plugins: [
  'Gatsby-Plugin-React-Helm',
  {
   Resolve: "GATSBY-Source-WordPress",
   Optionen: {
    Basisurl: "my-wordpress-site.com",
    Protokoll: "https",
    hostingwpcom: falsch,
    USEACF: TRUE,
    searchandreplacecontenturls: {
     SourceURL: "https://my-wordpress-site.com",
     ersetzt: "https://my-static-site.com",
    }
   },
  },
 ],
}

Hat es funktioniert?

Sie können überprüfen, indem Sie Ihr Terminal öffnen, eingeben GATSBY entwickeln sich und beobachte, was passiert. Sei gewarnt! Auch wenn Sie Ihre Einstellungen korrekt haben, erhalten Sie sowieso einige Warnungen - das ist möglicherweise GATSBY, die nach Inhalten suchen, die Sie noch nicht geschrieben haben.

Sie können jetzt GATSBY-Starter-Standard-Standard im Browser anzeigen.


    http: // localhost: 8000 /

Sehen Sie sich GraphiQL, eine In-Browser-IDE an, um die Daten und das Schema Ihrer Website zu erkunden.


  http: // localhost: 8000 / ___ graphql

Beachten Sie, dass der Entwicklungsaufbau nicht optimiert ist. Verwenden Sie zum Erstellen eines Produktionsaufwands GATSBY Build.

Wenn der GATSBY-Standardstarer (rechts) nicht ist, überprüfen Sie Ihre WordPress-Site nicht auf einem Subdomain, dass es auf jeden Fall HTTPS oder HTTP verwendet wird und dass Sie in Ihren Einstellungen dasselbe haben.

Jetzt können wir zu http gehen: // localhost: 8000 / und sehen unsere GATSBY-Site!

Können wir unsere Daten abfragen?

Möglicherweise haben Sie bemerkt, dass es hier keinen WordPress-Inhalt gibt. Dies liegt daran, dass wir Gatsby nicht mitgeteilt haben, was ich damit tun soll. Bevor wir das tun, überprüfen wir einfach, dass wir eigentlich unsere Inhalte für GATSBY erhalten haben. Besuchen Sie diese URL:


  http: // localhost: 8000 / ___ graphql

Dieses eingebaute Werkzeug heißt GraphiQL und ist eine weitere geheime Macht von Gatsby.

GraphQl ist ähnlich wie Rest: Es ist ein Weg, um Daten abzufragen. Mit Graphql können Sie jedoch viel einfacher mit Ihren Daten interagieren. GraphiQL (eine visuelle IDE für Graphql) kann uns einige dieser Tricks zeigen. Versuchen Sie im linken Panel Folgendes:

 {{
 AllWordPressPost {
  Kanten {
   Knoten {
    Ich würde
    Slug
    Status
    Vorlage
    Format
   }
  }
 }
}

Dies könnte ein bisschen wie JSON aussehen, aber es ist nicht. Es ist eine neue Abfragesprache, von der ich glaube, eines Tages wird die Ruhe weitgehend ersetzen, um mit APIs zu kommunizieren.

Was haben Sie bekommen, wenn Sie Strg + in GraphiQL drücken? Sie haben hoffentlich Ihre WordPress-Pfosten und Seite auf der rechten Seite des Bildschirms gesehen.

Wir werden diese Anfrage tatsächlich in unserem nächsten Schritt nutzen, also halten Sie es in Handhaber! Möglicherweise möchten Sie sehen, welche anderen Daten Sie mit GraphiQL erhalten können, während Sie hier sind. Wenn Sie das tun möchten, bewegen Sie den Cursor, und geben Sie den Ctrl + Leerzeichen und / oder Strg + ein. Das zeigt andere Inhaltsgruppen.

Also haben wir jetzt Inhalte in Gatsby. Als nächstes müssen wir es anzeigen.

Zeigen Sie unsere Beiträge an

Use WordPress as a headless CMS: Gatsby development 404 screen — GATSBY-Entwicklung 404-Seite zeigt alle unsere WordPress-Beiträge

Für diesen nächsten Schritt werden wir das nutzen gatsby-node.js. Datei.

gatsby-node.js. ist eine Datei, mit der Sie mit GATSBYs "NODE API" interagieren können. Hier können Sie steuern, wie Ihre Site generiert und Seiten, Beiträge und mehr erstellt.

Wir werden hier einige Anweisungen schreiben, um Gatsby zu erzählen, was mit unseren Daten zu tun ist:

conserpfad = erfordern (`Pfad);

Exports.creatpages = ({Graphql, BoundactionCreators})
= & gt; {
 const {createpage} = BoundactionCreator
 Senden Sie neues Versprechen zurück ((beheben, lehnen) = & gt; {
  graphql (
   `
   {
    AllWordPressPost {
     Kanten {
      Knoten {
       Ich würde
       Slug
       Status
       Vorlage
       Format
      }
     }
    }
   }
  `
 ). Dann (Ergebnis = & gt; {
   if (Ergebnis.Errors) {
    console.log (result.errors)
    Ablehnen (Ergebnis.Error)
   }

   const Posttemplate = path.resolve (`./src/templates/
post.js`)

   result.data.allwordpresspost.edges.foreach (rand = & gt; {
    Seite erstellen({
     Pfad: `/ $ {rand.node.slug} /`,
     Komponente: Posttemplate,
     Kontext: {
      ID: Edge.node.id,
     },
    })
   })
   Entschlossenheit()
  })
 })
}

Dieser Code erstellt Seiten aus unserer GraphQL-Abfrage und für jede Seite wird eine Vorlage verwendet, die wir definiert haben ( /src/templates/post.js. ). Als nächstes müssen wir diese Datei erstellen!

Postvorlage erstellen.

Erstellen Sie im Inneren / SRC / Ordner einen Ordner mit dem Namen Templates und eine Datei in der aufgerufenen Datei post.js. . Hinzufügen Dieser Code:

 Import reagieren von 'reagieren'
Helm importieren von 'React-Helm'

Klasse Posttemplate erweitert React.component {
 Render () {
  const Post = the.props.data.wordpressPost;
  const slug = the.props.data.wordpresspost.Slug;

  Rückkehr (
   & lt; div & gt;
   & lt; Helm Titel = {`$ {TitleRestring} | $ {Sitetitle}} / & gt;
   & lt; H1 gefährlichSetINNERHTML = {{__HTML: post.title}} / & gt;
   & lt; div gefährlichSetINNERHTML = {{__HTML: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Standard-PageTemplate exportieren.

Export const Query = graphql`
 QuerryPost ($ ID: string!) {
  WordPressPost (ID: {EQ: $ ID}) {
   Titel
   Inhalt
   Slug
  }
  Seite? ˅ {
   Sitemetadata {
    Titel
   }
  }
}

Dies verwendet eine andere GraphQL-Abfrage, um Daten über den spezifischen Beitrag zu erhalten, das er gespeist wurde gatsbyrnode.js. Datei, dann reagieren Sie, um das in den Browser in den Browser zu rendern.

Wenn Sie eine Liste aller Ihrer Beiträge schnell sehen möchten, können Sie eingeben http: // localhost: 8000 / a in die Adressleiste Ihres Browsers. Dadurch gelangen Sie auf eine Entwicklung 404, die alle Ihre Beiträge auflistet. Klicken Sie auf einen, um es zu besuchen!

Nächste Schritte

Wir haben die Oberfläche der Verwendung von WordPress als kopfloses CMS gekratzt, und ich hoffe, ich habe Sie in einigen interessanten Konzepten und Werkzeugen eingeführt, die Sie in der Zukunft verwenden und experimentieren können.

Diese Geschichte und meine Kollegen gibt es viel mehr, und ich habe darüber ausführlich an Indigo-Baum . Ich habe auch mehr auf meinem persönlichen Blog geschrieben, Köstlicher Träumer .

Bitte wenden Sie sich mit mir über diese Kanäle und auf Twitter, um aufregende Entwicklungen in der Welt der kopflosen CMS zu hören!

Dieser Artikel wurde ursprünglich in Ausgabe 308 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Sie das Thema 308 hier oder Abonnieren Sie hier .

Zum Thema passende Artikel:

40 brillante Wordpress-Tutorials
6 Top-Tipps für Cro-Erfolg in WordPress
10 Great WordPress-Plugins für Designer

Verwenden Sie WordPress als kopfloses CMS

Einstieg

Verwenden Sie einen statischen Site-Generator

Unseren Inhalt bekommen.

Hat es funktioniert?

Können wir unsere Daten abfragen?

Zeigen Sie unsere Beiträge an

Postvorlage erstellen.

Nächste Schritte

wie man - Die beliebtesten Artikel

Verwendung von Referenzbildern: 13 Wesentliche Tipps für Künstler

Wie zeichnet man einen Kopf: einen vollständigen Guide

Beginnen Sie mit Bulma

Verwendung der Reaktionsfeder, um Komponenten zu animieren

Erstellen von adaptiven Layouts ohne Medienabfragen

4 Wesentliche Bilderoptimierungs-Tipps

Einführung in die Verwendbarkeitsprüfung

Erhalten Sie kreativ mit Portraits und Face-Aware Liquife

Kategorien