Verwenden Sie WordPress als kopfloses CMS

Verwenden Sie WordPress als kopfloses CMS

Ich habe zum ersten Mal in einem Vortrag von Twin Cities Drupal von dem kopflosen CMS-Ansatz gehört. Ich mochte die Idee einer Trennung von Bedenken zwischen dem Verfassen von Inhalten und dem Anzeigen von Inhalten.

Ich hatte bereits erlebt, wie leicht ein Server ausfallen kann, indem alle Sites auf ihm entfernt werden, was zu Minuten oder Stunden herzzerreißender Panik führte (es waren 24 auf meinem). Ich hatte auch gesehen, wie eine monolithische CMS-basierte Site einen Sicherheitskompromiss erleiden und viel Reparaturaufwand erfordern konnte (das dauerte mehr als zwei Tage unbezahlter Arbeit). Für eine Reihe von Web-Hosting Anbieteroptionen finden Sie in unserem Leitfaden.

Ich habe die Vorteile von CDNs (Content Delivery Networks) erkannt, die Ihre Bild-, Audio- und Videodateien auf Servern speichern können, die für eine schnelle Lieferung optimiert sind, und diese Dateien weltweit duplizieren können, um sie bei Bedarf schnell in diese Regionen zu liefern. Was wäre, wenn Ihre gesamte Website von diesem Ansatz profitieren könnte?



Du wirst brauchen…

● Ein Computer mit Internetverbindung (obvs)
● Ein Code-Editor (Atom- oder VS-Code)
● Eine Befehlszeilen-Shell / ein Terminal
● Eine neuere Version von Node.js wurde installiert (Sie können sie herunterladen und installieren Hier )
● Eine WordPress-Site, von der Inhalte abgerufen werden können. Wenn Sie keine haben, können Sie die WordPress.com-Plattform oder diese verwenden Heroku Build Pack .
● Die Quelldateien von GitHub .

Einstieg

WordPress wird sofort mit der REST-API ausgeliefert. Damit werden wir Ihre Daten abfragen. Wir brauchen also eigentlich nichts anderes! Unsere Display-Site ist völlig unabhängig von unserer Content-Site, sodass wir sie nicht benötigen WordPress-Themes oder jede andere Anpassung außerhalb einiger (optionaler) Plugins. Obwohl Sie diese natürlich hinzufügen können, wenn Sie möchten.

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

Verwenden Sie einen statischen Site-Generator

Verwenden Sie WordPress als kopfloses CMS: Gatsby-Startbildschirm

Der Gatsby-Standardstartbildschirm

Nachdem wir unsere Inhaltsquelle haben, rufen wir die Daten ab und zeigen sie mit einem statischen Site-Generator an. Meine bevorzugte Waffe in diesem Bereich ist Gatsby , ein ausgezeichneter statischer Site-Generator, der mit JavaScript erstellt wurde. (Siehe diese Webseitenersteller Tipps für einfache Möglichkeiten zum Erstellen einer Website.)

Wenn Sie nach einer guten Möglichkeit suchen, auf Ihren JavaScript-Kenntnissen aufzubauen und React zu lernen, indem Sie in Code stecken bleiben, empfehle ich dringend, Gatsby dazu zu versuchen. Ich habe selbst viel gelernt, indem ich damit gespielt habe.

Lassen Sie uns zunächst ein Befehlszeilentool installieren, mit dem wir Gatsby-Sites erstellen können:

npm install -global gatsby-cli

Navigieren Sie nun zu dem Ordner, in dem Sie Ihre Site behalten möchten, und führen Sie den folgenden Befehl aus:

gatsby new blog

Dadurch wird ein neuer Ordner mit dem Namen 'Blog' erstellt und Gatsby und seine Abhängigkeiten zu diesem Ordner installiert. Öffnen Sie diesen Ordner in Ihrem bevorzugten Texteditor. Es scheint dort viele Dateien zu geben. Keine Sorge, wir bearbeiten das nur direkt gatsby-config.js , gatsby-node.js Dateien und die src Ordner, in dem unsere Vorlagen leben.

Wenn Sie viele Dateien speichern müssen, lohnt es sich, Ihre zu aktualisieren Cloud-Speicher .

Unsere Inhalte erhalten

Der erste Schritt, den wir unternehmen möchten, besteht darin, unseren Inhalt von der API der WordPress-Site abzurufen.

Dazu werden wir installieren gatsby-source-wordpress , ein vorab geschriebenes Plugin für WordPress. Dies zeigt einen der Hauptgründe, warum ich Gatsby liebe - Sie können Ihre Daten aus verschiedenen Quellen beziehen. Viele statische Site-Generatoren beschränken sich auf die Verwendung von Markdown-Dateien, aber Gatsby ist sehr flexibel.

Gatsbys Plugin-Ökosystem ist sehr ausgereift. Es gibt viele vorab geschriebene Möglichkeiten, um Ihre Daten abzurufen, und viele andere clevere Funktionen, die ebenfalls nützlich sind.

Um das Plugin zu installieren, wechseln Sie zunächst mit diesem Befehl in das Verzeichnis Ihrer neuen Gatsby-Site: CD-Blog .

Führen Sie nun diesen Befehl aus: npm install --save gatsbysource-wordpres s.

Sobald dies erledigt ist, ist es Zeit, die Datei gatsby-config.js zu öffnen. Sie werden sehen, dass es bereits einige grundlegende Einstellungen gibt, die Gatsby uns standardmäßig zur Verfügung stellt. Darauf bauen wir auf, um unser Plugin hier zu konfigurieren:

Entfernen Sie das perspektivische Raster im Illustrator
module.exports = { siteMetadata: { title: 'Gatsby Default Starter', }, plugins: [ 'gatsby-plugin-react-helmet', { resolve: 'gatsby-source-wordpress', options: { baseUrl: 'my-wordpress-site.com', protocol: 'https', hostingWPCOM: false, useACF: true, searchAndReplaceContentUrls: { sourceUrl: 'https://my-wordpress-site.com', replacementUrl: 'https://my-static-site.com', } }, }, ], }

Hat es funktioniert?

Sie können dies überprüfen, indem Sie Ihr Terminal öffnen und tippen gatsby entwickeln und beobachten, was passiert. Sei gewarnt! Selbst wenn Sie Ihre Einstellungen korrekt vorgenommen haben, werden Sie trotzdem einige Warnungen erhalten - dies kann sein, dass Gatsby nach Inhalten sucht, die Sie noch nicht geschrieben haben.

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

http://localhost:8000/

Zeigen Sie GraphiQL an, eine IDE im Browser, um die Daten und das Schema Ihrer Site zu untersuchen.

http://localhost:8000/___graphql

Beachten Sie, dass der Entwicklungsbuild nicht optimiert ist. Verwenden Sie gatsby build, um einen Produktionsbuild zu erstellen.

Wenn der Gatsby-Standardstar (rechts) nicht das ist, was Sie erhalten, überprüfen Sie, ob sich Ihre WordPress-Site nicht in einer Subdomain befindet, ob sie definitiv HTTPS oder HTTP verwendet und ob Sie dasselbe in Ihren Einstellungen haben.

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

Können wir unsere Daten abfragen?

Möglicherweise haben Sie bemerkt, dass hier kein WordPress-Inhalt vorhanden ist. Das liegt daran, dass wir Gatsby noch nicht gesagt haben, was wir damit machen sollen. Bevor wir das tun, überprüfen wir einfach, ob wir unseren Inhalt tatsächlich für Gatsby verfügbar haben. Besuchen Sie dazu diese URL:

http://localhost:8000/___graphql

Dieses integrierte Tool heißt GraphiQL und ist eine weitere geheime Kraft von Gatsby.

GraphQL ähnelt REST: Es ist eine Möglichkeit, 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. Geben Sie im linken Bereich Folgendes ein:

{ allWordpressPost { edges { node { id slug status template format } } } }

Dies sieht vielleicht ein bisschen wie JSON aus, ist es aber nicht. Es ist eine neue Abfragesprache, von der ich denke, dass sie eines Tages REST als Kommunikationsmethode mit APIs weitgehend ersetzen wird.

Was haben Sie erhalten, als Sie in GraphiQL Strg + Eingabetaste gedrückt haben? Sie haben hoffentlich Ihre WordPress-Beiträge und -Seite auf der rechten Seite des Bildschirms gesehen.

Wir werden diese Abfrage tatsächlich in unserem nächsten Schritt verwenden, halten Sie sie also griffbereit! Vielleicht möchten Sie sehen, welche anderen Daten Sie mit GraphiQL erhalten können, während Sie hier sind. Wenn Sie dies tun möchten, bewegen Sie den Cursor und geben Sie entweder Strg + Leertaste und / oder Strg + Eingabetaste ein. Dadurch werden andere Inhaltsgruppen angezeigt.

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

Zeigen Sie unsere Beiträge an

Verwenden Sie WordPress als kopflosen CMS: Gatsby Development 404-Bildschirm

Gatsby Development 404-Seite mit allen unseren WordPress-Posts

Für diesen nächsten Schritt werden wir das verwenden 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 Website generiert wird, und Seiten, Beiträge und mehr erstellen.

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

const path = require(`path`); exports.createPages = ({ graphql, boundActionCreators }) => { const { createPage } = boundActionCreators return new Promise((resolve, reject) => { graphql( ` { allWordpressPost { edges { node { id slug status template format } } } } ` ).then(result => { if (result.errors) { console.log(result.errors) reject(result.errors) } const postTemplate = path.resolve(`./src/templates/ post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ path: `/${edge.node.slug}/`, component: postTemplate, context: { id: edge.node.id, }, }) }) resolve() }) }) }

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

Postvorlage erstellen

Erstellen Sie im Ordner / src / einen Ordner mit dem Namen templates und eine Datei mit dem Namen templates post.js . Fügen Sie diesen Code hinzu:

import React from 'react' import Helmet from 'react-helmet' class postTemplate extends React.Component { render() { const post = this.props.data.wordpressPost; const slug = this.props.data.wordpressPost.slug; return (

) } } export default pageTemplate export const query = graphql` query currentPost($id: String!) { wordpressPost(id: { eq: $id }) { title content slug } site { siteMetadata { title } } }

Hierbei wird eine andere GraphQL-Abfrage verwendet, um Daten zu dem bestimmten Beitrag abzurufen, den der von ihm eingegeben hat gatsbynode.js Datei, verwendet dann React, um das in den Browser zu rendern.

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

Nächste Schritte

Wir haben die Oberfläche der Verwendung von WordPress als kopfloses CMS zerkratzt und ich hoffe, ich habe Ihnen einige interessante Konzepte und Tools vorgestellt, mit denen Sie möglicherweise in Zukunft arbeiten können.

In dieser Geschichte steckt noch viel mehr, und meine Kollegen und ich haben unter ausführlich darüber gebloggt Indigobaum . Ich habe auch mehr in meinem persönlichen Blog geschrieben, Köstliche Träumerei .

Bitte bleiben Sie über diese Kanäle und auf Twitter mit mir in Kontakt, um weitere aufregende Entwicklungen in der Welt des kopflosen CMS zu erfahren!

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

Zum Thema passende Artikel: