So erstellen Sie Ihr erstes Headless-WordPress-Projekt mit ACF + WPGraphQL

Jeder hat seine Lieblingstools, wenn es um die WordPress-Entwicklung geht, und die Idee, eine Headless-Site ohne diese Tools zu erstellen, kann entmutigend sein. Glücklicherweise können Ihnen zwei beliebte Tools von WordPress-Entwicklern – ACF und WPGraphQL – dabei helfen, Ihre Zehen in die kopflose Entwicklung einzutauchen.

In dieser Sitzung zeigt WP Engine Senior Developer Advocate Jeff Everhart die Besonderheiten der Infrastruktur, indem er mit Atlas in nur wenigen Minuten eine Demo-Site erstellt!

Sitzungsfolien:

Transkript:

JEFF EVERHART: Was ist los, Leute? Mein Name ist Jeff Everhart, ein Senior Developer Advocate hier bei WP Engine. Vielen Dank, dass Sie heute an meinem Vortrag über den Aufbau Ihres ersten Headless-WordPress-Projekts mit ACF und WP GraphQL teilgenommen haben. Bevor ich mich mit dem Bauen befasse, möchte ich immer etwas Kontext dazu geben, was Headless WordPress ist. Es scheint, als würde Headless weniger zu einem Nischenbegriff und mehr zum Mainstream werden, also werde ich versuchen, die Erklärung kurz zu halten.

Bei Headless WordPress geht es im Kern darum, das WordPress-CMS über eine API zu verwenden, um eine andere Art von Anwendung zu betreiben. Wenn wir uns das Diagramm auf dieser Folie ansehen, wenn ein Benutzer site.com/page anfordert, antwortet eine JavaScript-Anwendung auf diese Route, anstatt WordPress diese Anfrage verarbeiten zu lassen. Es sieht sich den Pfad an, bestimmt, welche Daten es von WordPress oder anderen Quellen benötigt, führt diese API-Aufrufe durch und generiert eine Antwort an den Benutzer.

Es ist wichtig zu beachten, dass das, was sich in diesem Node.js-Laufzeitslot befindet, wirklich eine beliebige Anzahl verschiedener Arten von Anwendungen oder Clients sein kann. Wir haben verschiedene Beispiele für mobile Apps oder Websites gesehen, die mit allen gängigen Frameworks erstellt wurden und dieses Muster mit großem Erfolg verwenden. Nachdem Sie nun eine gute Vorstellung davon haben, was Headless WordPress ist, gehen wir den Tech-Stack durch, den wir für das heutige Projekt verwenden werden.

In unserer hintersten Schicht verwenden wir WP GraphQL als unsere API. WP GraphQL verwandelt Ihr WordPress-Backend in eine leistungsstarke GraphQL-API. Es erzwingt dieselben Rollen- und Funktionssicherheitsprüfungen wie natives WordPress und die Kern-REST-API. WP GraphQL ist eine großartige Wahl für die Entwicklung von Headless-Anwendungen, da wir mit seiner deklarativen Abfragesprache im gesamten Inhaltshandwerk nach verschiedenen Inhaltstypen suchen können. So erhalten Sie Beiträge, Seiten mit ihren Kategorien alle in derselben Anfrage.

Sehen wir uns nun an, wie wir einige komplexere Daten mit dem WordPress-CMS strukturieren und modellieren können. Viele Entwickler, die Headless-Projekte angehen, müssen andere Daten modellieren und speichern, richtig? Geht über die typischen Posts oder Seiten von WordPress hinaus. ACF oder erweiterte benutzerdefinierte Felder sind ein großartiges Werkzeug zum Modellieren dieser benutzerdefinierten Felder. In einer kommenden Version wird es noch leistungsfähiger, indem es Ihnen ermöglicht, Beitragstypen und Taxonomien direkt in der Benutzeroberfläche in der kostenlosen Version dieses Plugins zu registrieren.

Es stellt alle Daten einfach über die REST-API zur Verfügung, muss jedoch eine WP GraphQL-Erweiterung installieren, um einige dieser Felddaten zu unserem GraphQL-Schema hinzuzufügen. Ich persönlich freue mich sehr darauf, zu sehen, wie sich dieses Plugin weiterentwickelt, da es für Headless-Entwickler leistungsfähiger wird.

Jetzt, da wir komplexe Daten modellieren und über WP GraphQL abfragen können, brauchen wir eine Möglichkeit, diese modernen Weberlebnisse für unsere Benutzer zu erstellen und gleichzeitig die Inhaltsredakteure zu unterstützen, die WordPress bereits kennen und lieben. Hier kommt Faust ins Spiel. Faust ist ein zweiteiliges Framework, bestehend aus einem WordPress-Plugin und einem auf Next.js basierenden JavaScript-Framework. Sie arbeiten zusammen, um das Erstellen von Headless-WordPress-Sites einfach und intuitiv zu machen.

Es fügt Unterstützung für Dinge wie Post-Vorschau und Authentifizierung hinzu, und Sie können sich in modernes JavaScript auf eine neu gestaltete WP-Vorlagenhierarchie verlassen. Faust.js zielt darauf ab, eine sehr erweiterbare Plattform zu sein und wird mit einem Plug-in-System und einer Admin-Leiste geliefert, die Sie verwenden können, um Erfahrungen anzupassen und zu erstellen, die Ihren speziellen Anwendungsfall unterstützen.

Zu guter Letzt benötigen wir einige Möglichkeiten, um mit diesen Tools lokal und in der Produktion zu arbeiten. Mit der lokalen und WP-Migration habe ich alle WordPress-Ressourcen, die Sie für dieses Projekt benötigen, in eine einzige ZIP-Datei gezogen, die Sie per Drag-and-Drop in die lokale Umgebung ziehen können, um loszulegen. Sobald wir mit dem Erstellen unserer Website fertig sind, können wir unsere Arbeit auf die Atlas-Plattform übertragen. Die All-in-One-Headless-Hosting-Lösung von Atlas WP Engine, die Ihr WordPress-Backend und einen Node.js-Container kombiniert, die alle aufeinander abgestimmt sind, um über ein nahtloses Dashboard zusammenzuarbeiten.

Nachdem Sie nun also alle Tools, die wir in der heutigen Präsentation verwenden werden, gut verstanden haben, können wir direkt loslegen und mit dem Aufbau beginnen. Öffnen Sie die URL auf dieser Folie, um im Browser auf den Democode zuzugreifen. Ich habe versucht, es so einfach wie möglich zu machen, dieser Erfahrung zu folgen, aber wir werden in den nächsten 25 Minuten viel Boden abdecken, also zögern Sie nicht, jetzt einfach zuzusehen und auf dieses GitHub-Repository und das zurückzukommen Aufzeichnung dieser Sitzung später, um nach der Konferenz weiterzuarbeiten. Wenn der Rest der Dekodierung eine Autoshow ist, dann dreht sich diese Sitzung um den Bau von Motoren. Wortspiel total beabsichtigt.

Jetzt, da wir das GitHub-Repository geöffnet haben, können wir beginnen. Das erste, was ich Ihnen empfehle, ist, einen Fork dieses Repositorys in Ihrem eigenen Konto zu erstellen. Wenn Sie durchsehen, was in diesem Repository enthalten ist, werden Sie eine Menge Beispielcode sowie einige Schritt-für-Schritt-Anleitungen in der Readme-Datei für alles sehen, was wir in dieser Präsentation tun werden. Tatsächlich werden wir viel kopieren und direkt aus diesem Repository in Ihr Projekt einfügen. Um dies lokal zu klonen, führen wir den Git-Klonbefehl in Ihrem Terminal aus.

Das Herunterladen dauert nur eine Sekunde, und sobald wir das Projekt heruntergeladen haben, können wir fortfahren und unser Verzeichnis in dieses Projektverzeichnis ändern. Von dort aus werde ich einen Befehl ausführen, um dieses Projekt in VS Code zu öffnen, aber Sie sollten sich frei fühlen, einen beliebigen Code-Editor zu verwenden. Da VS Code bereits über ein integriertes Terminal verfügt, kann ich dieses bereinigen und dann einfach fortfahren und iTerm schließen. Und jetzt können wir dazu übergehen, unsere lokale WordPress-Site zu platzieren. Dazu öffnen wir dieses Projekt im Finder und suchen dann die kopflose WP-Demo-Zip-Datei, die ich für Sie vorbereitet habe.

Wir ziehen diese ZIP-Datei per Drag & Drop direkt in die lokale Entwicklungsumgebung, und local beginnt mit dem Entpacken und Bootstrapping Ihrer Demo-WordPress-Site für Sie. Wir können so ziemlich bei den Standardeinstellungen bleiben, und dann dauert es lokal nur wenige Minuten, um Ihnen eine neue WordPress-Site zu erstellen. Nun, dies ist eine großartige Funktion von WP Migrate Pro, die es mir ermöglicht, jede Site als ZIP-Datei zu exportieren und diese per Drag-and-Drop direkt in das lokale System zu ziehen, sodass ich eine Produktionssite sehr schnell auf meinen lokalen Computer bringen kann, unabhängig von der Plattform.

Sobald die Installation abgeschlossen ist, möchten Sie vielleicht fortfahren und diesem SSL-Zertifikat vertrauen, und dann werden wir fortfahren und dieses Projekt in WP Admin öffnen. Von dort aus werden wir fortfahren und nur lokal minimieren, da es bereits ausgeführt wird und wir nicht wirklich etwas anderes damit tun müssen. Von dort aus öffnen wir unser Repository, wo Sie einen Admin-Benutzernamen und ein Passwort finden, die ich bereits für diese Demo-Site erstellt habe. Sie sollten in der Lage sein, diese Anmeldeinformationen zu verwenden, um sich beim WP Admin-Dashboard anzumelden. Von dort aus brauchen wir nur eine Sekunde, um uns mit dieser lokalen WordPress-Installation zurechtzufinden.

Als erstes werfen wir einen Blick auf die Plugins, die mit dieser WordPress-Site installiert sind. Wir sehen Dinge wie erweiterte benutzerdefinierte Felder für die Datenmodellierung. Wir haben Fouls, um einige unserer Headless-Funktionen zu ermöglichen, WP GraphQL, um als API für unsere Website zu fungieren, und dann WP GraphQL für die ACF-Erweiterung, um einige der ACF-Feldgruppen anzuzeigen. Schauen wir uns nun auch die Beiträge an. Wenn Sie sich all die verschiedenen Demo-Posts ansehen, die ich in diesem Projekt vorab ausgefüllt habe, können wir sehen, dass wir eine Reihe verschiedener Posts mit einer Reihe unterschiedlicher Kategorien haben.

Wenn wir uns den Inhalt jedes Beitrags ansehen, sehen wir, dass wir eine Reihe von Textinhalten, einige Bilder, ausgewählte Bilder und einige ACF-Feldgruppen haben, die wir bereits erstellt und vorbelegt haben. Schauen wir uns also die Feldgruppen genauer an. Wenn wir das ACF-Menü öffnen, sehen Sie, dass wir zwei Feldgruppen erstellt haben – Nahrungsressourcen und süßes Mixtape. Werfen wir zunächst einen Blick auf die Nahrungsressourcen.

Dies ist nur eine wirklich einfache Feldgruppe mit zwei einzelnen Feldern – Text und URL. Für jedes dieser Dinge habe ich die Option Show in GraphQL aktiviert, damit sie in GraphQL erscheinen. Dann habe ich diese Option auch auf Feldgruppenebene aktiviert. Darüber hinaus habe ich eine gewisse bedingte Logik, um zu bestimmen, wann diese Posts gerendert werden sollen – also wenn die Post-Kategorie gleich Essen ist. Und schauen wir uns an, wie das süße Mixtape aussieht.

Wir werden sehen, dass dies unseren Nahrungsressourcen ziemlich ähnlich sieht und dass wir ein paar verschiedene Felder haben. Bei jedem ist die Option „In GraphQL anzeigen“ aktiviert und zusätzlich auf Feldgruppenebene aktiviert. Wir können sehen, dass es einige verschiedene Einstellungen gibt, die uns die WP GraphQL-Erweiterung gibt, die wir möglicherweise nicht benötigen. Darüber hinaus können wir sehen, dass wir dies auch basierend auf der Beitragskategorie bedingt anzeigen.

Werfen wir nun einen Blick auf WP GraphQL und was uns das an Tools bietet. Wenn wir das GraphQL-Menü öffnen, landen wir in der grafischen IDE. Dies ist nun eine interaktive Entwicklungsumgebung, mit der Sie Abfragen mit WP GraphQL erstellen können. Wir können angeben, dass wir beispielsweise die ersten 10 Posts mit Kategorien haben möchten, und hier auch unsere zusätzlichen ACF-Felder einfügen. Wenn wir auf die Schaltfläche Ausführen klicken, erhalten wir Live-Daten von unserer WordPress-Site zurück, die mit den Daten in dieser Abfrage übereinstimmen.

Wenn wir möchten, können wir das Query Composer-Fenster öffnen und Aspekte unserer Abfrage visuell zusammenstellen. Dies ist also ein wirklich praktisches Tool, wenn Sie sich nicht sicher sind, welche bestimmten Felder oder Daten sich auf einem bestimmten WordPress-Objekt befinden könnten. Sie können den Query Composer verwenden, um diese Abfragen in Echtzeit zu untersuchen und auszuführen. Lassen Sie uns nun zur Konfiguration von Faust übergehen, indem Sie das Faust-Einstellungsmenü öffnen. Wie ich im Einführungsgespräch sagte, ist Faust eigentlich ein zweiteiliges Framework, das aus einem WordPress-Plugin und Ihrer Frontend-Codebasis besteht.

Wenn wir also zurück in das WordPress-Plug-in-Einstellungsmenü kommen, können wir sehen, dass wir diese Option für die Front-End-Site-URL festgelegt haben, die auf die Adresse unserer Front-End-Site zeigen wird. Direkt darunter in der Option für den geheimen Schlüssel werden wir fortfahren und auf Regenerieren klicken, um einen eindeutigen Schlüssel zu generieren, den Sie für Ihr Demoprojekt verwenden können. Von dort aus springen wir tatsächlich zurück in die JavaScript-Codebasis und führen diesen Befehl aus, um eine Beispielumgebungsvariablendatei in eine zu kopieren, die wir mit unserer Website verwenden können.

Sobald wir das ausgeführt haben, öffnen Sie mit dem Befehl die Datei .env.local, und wir werden ein paar Änderungen vornehmen. Das erste ist, dass die nächste öffentliche WordPress-URL-Option durch den Speicherort Ihrer lokalen Website ersetzt wird. Also ACF.WPEngine.local. Und dann nehmen wir auch diesen geheimen Schlüsselwert und verwenden ihn für unseren Faust-Geheimschlüssel. Stellen Sie sicher, dass wir das auch auskommentieren möchten, und dann ist diese letzte Umgebungsvariable wirklich nur zum Testen und für die lokale Entwicklung nützlich, damit Sie alle SSL-Probleme ausgleichen können, die Sie möglicherweise haben, während Sie sich mit der lokalen Entwicklungsumgebung verbinden.

Von dort aus wollen wir NPM Install ausführen, um alle Abhängigkeiten unseres Projekts zu installieren, und sobald dies erledigt ist, können wir dies starten und NPM Run Dev ausführen, um unser Projekt zu starten. Das Kompilieren dauert nur eine Sekunde, aber sobald dies der Fall ist, können wir localhost:3000 im Browser öffnen, und wir sollten unsere Faust-Site in Aktion sehen.

Sobald das gerendert ist, können Sie sehen, dass Faust bereits etwas Magie für uns handhabt. Wenn wir uns dieses Menü oben rechts ansehen, können wir sehen, dass es bereits Seiten und Inhalte aus unseren Menüs einzieht, die wir in unserem WordPress-Backend definiert haben, und wenn wir zurück in unseren WordPress-Admin springen, können wir uns das ansehen wie diese Verbindung funktioniert, etwas detaillierter.

Da das Faust-Plug-in die Adresse unserer Front-End-URL kennt, schreibt es viele der Links um, z. B. diese Vorschaulinks, sodass sie beim Öffnen im Browser in der Front-End-Site-URL geöffnet werden, sodass Sie erhalten eine echte Live-Vorschau dessen, wie Ihre Inhalte auf dem Front-End aussehen werden.

Lassen Sie uns nun tiefer in die Struktur unseres Faust-JavaScript-Projekts eintauchen. Wenn Sie mit der Arbeit in Next.js vertraut sind, haben Sie wahrscheinlich das Verzeichnis der Seite verwendet, um Seitenkomponenten zu erstellen, die Ihre Routen implementieren. Sie können dies immer noch in Faust tun, aber es baut auf diesem Konzept auf, indem es eine Catchall-Route namens WordPress-Knoten bereitstellt, die es Ihnen ermöglicht, jeden von WordPress verwalteten URI zu nehmen und ihn zu einem bestimmten Inhalt aufzulösen.

Wir erhalten dann einige zusätzliche Daten zu diesem Inhaltselement und leiten diese durch unsere Komponenten weiter, damit wir diesen einen einzelnen Inhalt in eine bestimmte Vorlage im WP-Vorlagenordner auflösen können. Dies ist dem Konzept der Vorlagenhierarchie und dem traditionellen WordPress-Theming sowie vielen Namenskonventionen sehr ähnlich. Match zum Beispiel, frontpage.js ist die Startseite unserer Website, während page.js für das Rendern von Dingen des Seiteninhaltstyps verantwortlich ist. Und single.js ist dazu da, einzelne Posts zu rendern.

Fangen wir jetzt an und machen unsere frontpage.js etwas dynamischer. OK . Um zu beginnen, öffnen wir also unsere front page.js-Datei und geben uns etwas mehr Platz zum Arbeiten. Wenn wir uns also den Inhalt dieser Datei ansehen, können wir sehen, dass es drei Hauptteile gibt. Es gibt die Komponente selbst, die wir rendern, eine Abfrageeigenschaft, die an die Komponente angehängt wird und die jedes Mal ausgeführt wird, wenn wir die Komponente rendern, und dann einige Variablen, die wir unten übergeben können.

Und wie Sie sehen können, gibt es im Wesentlichen zwei Möglichkeiten, dies zu verwenden. Verwenden Sie entweder den use query-Hook innerhalb der Komponente oder es kann als Requisiten an die Komponente selbst weitergegeben werden, und Sie werden das später in einem Beispiel sehen. Lassen Sie uns also zurück zum Repository springen und mit Schritt 2.1 beginnen, um die Abfrage für unsere frontpage.js zu aktualisieren. Also kopieren wir das, gehen dann zurück in die grafische IDE und spielen dort einfach eine Sekunde lang herum. Diese Abfrage, die wir in unserer Zwischenablage haben, sollte also die ersten 10 Posts abrufen und ein paar Datenelemente erhalten, die mit jedem dieser Posts verknüpft sind.

Wenn wir also dort hineinklicken und es ausführen, sehen wir, dass alles großartig funktioniert. Und so wollen wir fortfahren und das zu unserer Komponentenabfrageeigenschaft hinzufügen. Also werden wir einen guten Ort dafür finden und das einfach dort einfügen und ein wenig neu formatieren. Das bedeutet also, dass dieser individuelle Teil der Abfrage zu dieser Abfrage selbst hinzugefügt wird. Wir müssen die Ergebnisse dieser Abfrage also immer noch für den Rest unserer Komponente verfügbar machen, also fügen wir diese zusätzliche Zeile hinzu, die nur dieses Post-Ergebnis in eine Variable extrahiert, mit der wir arbeiten können.

Der nächste Schritt, um diese Homepage dynamisch zu machen, besteht nun darin, eine Komponente zu erstellen, um diese Post-Auszüge zu rendern. Also werden wir das tun und ein paar Dateien im Ordner „components“ erstellen, und ich werde hier erwähnen, dass – ich werde fortfahren und eine postexcerpt.js in einem Post-Excerpt-Ordner erstellen, und ich ' Ich dupliziere eigentlich nur die Struktur der vorhandenen Komponenten, die Teil dieses Faust.js-Getting-Started-Projekts sind. Sie können hier wirklich tun, was Sie wollen, und ich folge nur dem Rahmen, da er mir bereits als Teil dieses Getting Started dargelegt wurde.

Sobald wir also alle drei dieser Dateien haben, werden wir anfangen, ihnen etwas hinzuzufügen, um diese Posts zu rendern. Als Erstes fügen wir also einige Inhalte in unsere Post-Excerpt-Komponente ein. Also kopieren wir das einfach aus unserem Repository und fügen es ein, und wir können sehen, dass wir diese module.css-Datei importieren. Und wir haben eine Funktion namens Post-Auszug, die unsere Komponente ist, die eine Stütze probiert, die der Post ist, dann rendern wir einen Abschnitt mit einem Link, der direkt zu diesem Post-URI führt und den Titel rendert. Dann haben wir da unten Kategoriekacheln, die wir ebenfalls rendern und dann gefährlich in unserem HTML setzen, um den HTML-Inhalt für den Beitragsauszug festzulegen.

Nun, sobald alles großartig und gespeichert ist, werden wir das speichern, aber wir kommen auch hierher und fügen diesen zusätzlichen bereichsbezogenen Stil zu unserer Komponente hinzu, um diese span-Tags für unsere Kategorien zu gestalten, und dann machen wir einfach Führen Sie einige Import- und Exportvorgänge innerhalb der index.js-Datei durch, um diese von einem Standardexport in einen benannten Export umzuwandeln, und wir speichern all diese Dinge. Und der letzte Schritt, um dies für andere Dinge verfügbar zu machen, besteht darin, der index.js-Datei unseres Komponentenordners eine weitere Exportzeile hinzuzufügen. Und jetzt, da wir das getan haben, sollten wir, wenn wir zurück zur Homepage frontpage.js gehen, in der Lage sein, einfach einen zusätzlichen Import zu unserer bestehenden Import-Anweisung hinzuzufügen, um unseren Post-Auszug zu verwenden.

Jetzt wollen wir einen Ort finden, um das zu implementieren, und wenn wir herunterkommen und in unser Hauptelement schauen, sehen, dass wir einiges direkt unter dem Helden haben – was wir tun werden, ist, wir werden es einfach tun Kopieren Sie einen Teil des Codes und fügen Sie ihn in das Repository ein und überschreiben Sie den Inhalt dieser Hauptdatei mit unserem Post-Auszug. Und wir werden nur ein bisschen umformatieren, um ein paar Sachen zu verwischen, aber Sie können dort sehen, dass das, was wir tun, innerhalb dieses Containers ist, wir werden die Reihe von Posts abbilden, die wir als zurückbekommen haben Ergebnis unserer Abfrage und geben dann eine Beitragsauszugskomponente zurück, in der wir den Beitrag übergeben und ihm einen Schlüssel geben.

Und wenn wir dann fortfahren und all das speichern und im Browser rendern und aktualisieren, sollten wir sehen, dass wir eine großartige dynamische Startseite haben. Ja, jeder dieser Titel hat einen anklickbaren Link, ebenso wie die einzelnen Kategoriekacheln. Und wenn wir uns durchklicken, können wir sehen, dass dank der bereits in Faust vorhandenen Vorlagen unser gesamtes Postmaterial bereits gerendert wird, obwohl uns einige der Ressourcengruppen fehlen, die wir mit ACF erstellt haben. Wenn wir uns also zu einem zweiten Beitrag durchklicken, können wir sehen, dass einer großartig gerendert wird, ebenso wie alle vorgefertigten Kategorielinks, die es gibt – wir verwenden diese Kategorie-URIs nur, um uns beim Rendern dieser Kategorie-JS-Vorlage an Faust zu lehnen .

Ok, jetzt, da wir eine dynamische Startseite haben, fahren wir damit fort, diese ACF-Felder in unserer single.js-Vorlage zu rendern. Machen Sie also weiter und bereinigen Sie einfach unseren Code-Editor, und dann können wir die Datei single.js öffnen und einen Blick darauf werfen, was darin enthalten ist. Wir wissen, dass wir auf dieser obersten Ebene diese Komponentenfunktion haben, die wir exportieren, die eigentlich Requisiten verwendet, und die Eigenschaft „component.query“, die eine dynamische GraphQL-Abfrage hat, die einige dieser Variablen liest, die wir von der Seed-Abfrage zurückerhalten.

Und am Ende möchten wir einige dieser verschiedenen Post-Ressourcen am Ende unseres Post-Inhalts anzeigen. Also gehe ich zurück in das Repository und scrolle nach unten zu Schritt 3.1, wo wir die einzelne Post-Abfrage aktualisieren, und wir werden uns das ansehen, weil es anfängt, sowohl die Sweet-Mixtape- als auch die Food-Ressourcen-Feldgruppen einzubeziehen, die wir erstellt haben der frühere Schritt. Wenn ich diese Abfrage nehme und sie kopiere und in die Grafik einfüge, werde ich fortfahren und eine Datenbank-ID für einen Beitrag fest codieren und nur ein paar dieser verschiedenen Dinge entfernen, die wir nicht brauchen, wie As Preview und dieses andere Fragment .

Wenn ich fortfahre und das ausführe, werden wir sehen, dass ich einige Daten zurückbekomme, die wirklich das enthalten, was ich erwarten würde. Der Inhalt, ich bekomme den Autor zurück, und ich bekomme, was wichtig ist, diese beiden Feldgruppen und ihre Daten zurück. Also kopiere ich diese Abfrage und gehe zurück zu single.js. Von dort aus ersetze ich diesen Teil der Abfrage wirklich nur durch das, was ich aus meiner Zwischenablage habe. Wir können einfach weitermachen und das speichern. Sie können es neu formatieren, wenn Sie möchten, aber das ist Whitespace-agnostisch, also denke ich, dass das größtenteils gut aussieht.

Von dort aus wollen wir dasselbe tun wie im letzten Schritt, wo wir dies zu einem Teil unserer Abfrage gemacht haben. Jetzt wollen wir sicherstellen, dass wir diese Variablen innerhalb unserer Komponente verfügbar machen. Also werden wir diese zu dieser Strukturierungsanweisung hinzufügen und dann zusätzlich, da wir ein paar verschiedene Kategorien für unsere Posts haben, wollen wir ein paar boolesche Dinge erstellen, die uns helfen zu bestimmen, ob wir Nahrungsressourcen oder süßes Mixtape anzeigen sollen oder nicht. Denn wie Sie dort sehen können, bekommen wir beides zurück, und wenn es nichts für süße Mixtape-Felder zu finden gibt, kommen diese als null zurück. Ich möchte dort also eine bedingte Überprüfung durchführen, also füge ich diese zwei Codezeilen zu unserer Datei hinzu.

Und was dies im Grunde tut, ist, dass es uns einige boolesche Variablen erstellt, die wir unten verwenden können, um Vorlagen bedingt zu rendern. In diesem Ding sehen wir uns die Knoten für jede Kategorie an und filtern sie dann im Grunde, um festzustellen, ob sie Essen oder Musik enthalten oder nicht, und überprüfen dann die Länge. Es gibt wahrscheinlich viele Möglichkeiten, wie Sie diese Art von boolescher Variable implementieren könnten. Sie können dies also gerne ändern, wenn Sie eine sauberere Methode dafür haben, aber für unsere Zwecke hier denke ich, dass das gut funktionieren wird.

Der nächste Schritt besteht nun darin, dass wir tatsächlich wie im vorherigen Schritt einige zusätzliche Komponenten erstellen möchten. Also mache ich weiter und erstelle innerhalb meiner Komponentendatei eine Nahrungsressourcen-Komponente. Also erstelle ich einen Ordner und darin eine Datei „food resources.js“ und zusammen damit erstelle ich eine index.js-Datei sowie eine CSS-Moduldatei. Und jetzt ist diese SCSS-Moduldatei wirklich hilfreich, weil sie es uns ermöglicht, unsere Stile auf diese bestimmte Komponente auszurichten. Es fühlt sich also wie eine verrückte Syntax an, aber am Ende ist es ein wirklich sauberes Ergebnis, weil wir nicht einen Haufen Klassen und Zeug schreiben müssen.

Also beginne ich mit dem Kopieren und Einfügen des Komponentencodes aus dem Repository direkt in diese Dateien. Wir können sehen, dass wir eine Nahrungsressourcenfunktion haben, die zwei Requisiten, den Rezeptnamen und den Rezeptlink, benötigt, und diese dann mit dem Burrito-Emoji unter unserem guten Alter rendern. Wir werden auch einige SCC-Dateistile kopieren und in diesen bestimmten Ordner einfügen und dann sicherstellen, dass wir diese aus den Komponentenordnern index.js exportieren. Und genau wie im vorherigen Beispiel möchten wir fortfahren und dies auch in die index.js unseres Komponentenordners exportieren, damit wir eine wirklich schöne Gruppe zum Importieren haben, wie Sie direkt von diesen Komponenten gesehen haben Ordner an anderer Stelle in einigen dieser verschiedenen Dateien.

Sobald wir das hinzugefügt haben, wenden wir uns der Musikressourcenkomponente zu und machen dasselbe. Wir werden fortfahren und dieselbe Dateistruktur erstellen. Also Musikressourcenordner und eine musicresources.js-Datei darin. Dann erstellen wir eine index.js-Datei, um sie zu exportieren, und dann auch unsere musicresources.module.scss-Datei für diese Scope-Stile.

Sobald wir all das Zeug haben, werden wir dasselbe tun, was wir für unsere Nahrungsressourcen getan haben, und einfach einen Teil dieses Codes aus dem Repository kopieren und einfügen. Wir können sehen, dass diese Komponente fast identisch aussieht. Wir haben Musikressourcen. Dies hat tatsächlich drei Props statt zwei, aber wir hatten drei Felder in dieser Feldgruppe, aber die Styles.component-Konvention ist dieselbe. Und wir machen nur ein etwas anderes Rendering, weil wir unterschiedliche Inhalte haben.

Von dort fügen wir also auch unseren SCSS-Code hinzu und stellen sicher, dass wir ihn aus den Komponentenordnern index.js exportieren und dann auch in unseren Ordner hier drüben importieren, und ich glaube, ich habe es tatsächlich geschafft – lasst uns das wirklich schnell umbenennen und Stellen Sie einfach sicher, dass alle unsere Benennungen gut aussehen, damit unsere index.js und Komponenten unsere Musikressourcen finden und all das Zeug ist großartig. Jetzt machen wir also weiter und schließen einfach alle diese irrelevanten Registerkarten, weil wir bereit sind, diese Komponenten tatsächlich in unserer single.js-Datei zu implementieren.

Dazu fügen wir diese beiden Komponenten einfach zu unserer bestehenden import-Anweisung hinzu, die diese bereits automatisch erkennt, und wir werden einen guten Ort dafür finden. Und so haben wir diese Content-Wrapper-Komponente hier unten. Und so übergeben wir gerade den Inhalt, aber das akzeptiert tatsächlich auch optional Kinder. Wir können also den Inhalt übergeben, aber dann auch einige untergeordnete Komponenten direkt an diesen Inhaltswrapper übergeben, sodass er in diesem schönen horizontalen Raum angezeigt wird, den wir bereits haben, und alles ausgerichtet ist.

Das machen wir also, und dann kopieren wir diesen Code und fügen ihn dort ein, formatieren ihn neu und besprechen, was in diesem speziellen Beispiel passiert. Also verwenden wir direkt innerhalb dieser Inhalts-Wrapper-Komponente diese booleschen Variablen is food und is music, um jedoch entsprechende Ressourcenkomponenten bedingt zu rendern. Also, wenn Essen wahr ist und dieser Beitrag in der Kategorie Essen ist, werden wir das rendern. Und wenn es um Musik geht, machen wir dasselbe. Und dort können Sie sehen, dass wir all die verschiedenen Requisiten übergeben, die zum Rendern erforderlich sind.

Und wenn wir zurückkommen und eine unserer single.js-Vorlagenseiten aktualisieren, können wir sehen, dass unsere Nahrungsressourcen genau so dargestellt werden, wie wir es erwarten würden, und dieser Link würde angemessen funktionieren, wenn wir zu WP Admin oder zu uns nach Hause zurückkehren Buchseite. Und wenn wir eine und die Essenskategorie oder Musik finden, können wir Kinfolk Synth DIY öffnen und sehen, wie unsere Musikressourcenkomponente aussieht, und das alles sieht großartig aus. Und wenn wir eine finden, die sich tatsächlich in beiden Kategorien befindet, können wir sehen, dass sie unten tatsächlich beide Komponenten genau so wiedergibt, wie wir es erwarten würden.

OK. Nun, da wir unsere Website so haben, wie wir sie haben wollen, lassen Sie uns weiter darüber sprechen, wie diese Website bereitgestellt wird. Jetzt habe ich einen Abschnitt des GitHub-Repositorys für uns erstellt, und tatsächlich habe ich einen völlig separaten bereitgestellten Zweig im Finish-Zweig erstellt. Wenn Sie den Git-Check-out abgeschlossen haben, werden wir Ihnen das besorgen. Und Sie können diesen Zweig auch einfach direkt in Atlas bereitstellen, der kopflosen WordPress-Hosting-Lösung von WP Engine.

Dadurch erhalten Sie sowohl eine WordPress-Installation als auch einen Node.js-Container, und Sie können sich für ein kostenloses Sandbox-Konto anmelden, indem Sie einfach auf diese Schaltfläche auf der Landingpage von Atlas klicken. Bringen Sie Sie zu einem wirklich schnellen Forum, und wie Sie sehen können, ist der Preis null. Möglicherweise müssen Sie immer noch eine Kreditkarte eingeben, die wir nur zur Betrugsprävention verwenden, aber Sie können ein kostenloses Konto haben, um damit herumzuspielen, es zu testen und nach Herzenslust kopflos zu lernen. Also mache ich weiter und öffne das WP Engine-Dashboard, um mit der Bereitstellung dieser Website für Atlas zu beginnen.

Das erste, was ich tatsächlich tun werde, ist, meine Liste mit Websites zu öffnen, und ich werde meine Produktions-WordPress-Site öffnen. Also eigentlich ist diese Headless-ACF-Site, die Sie hier sehen, wo ich den WP Admin in einem neuen Fenster öffnen werde, die übergeordnete Site für die Zip-Datei, die Sie alle lokal verwenden. Also habe ich davon mit dem WP-Export eine ZIP-Datei erstellt, und das werde ich eigentlich für meine Produktionsbereitstellung verwenden.

Von dort aus klicke ich auf die Registerkarte „Atlas“ und dann auf „App erstellen“. Und ich bin mit dieser Option präsentiert. Ich wähle Pull From Repo und klicke dann auf Continue. Und wenn ich mich nicht bei GitHub authentifiziert habe, würden Sie dies hier tun, aber da ich es bereits bin, kann ich einfach fortfahren und mein Repository auswählen. Wir fahren also fort und wählen das Repository aus, das wir für dieses Projekt verwenden, klicken auf „Fortfahren“ und stellen dann meine App in „US Central“ bereit.

Von hier aus kann ich einen Zweig auswählen, und wie gesagt, ich werde Finished verwenden. Es gibt auch Optionen, wenn Sie ein Monorepo verwenden, was wir nicht tun, und ich werde die Option „I Have My WordPress Installation“ aktiviert lassen und „Search For My ACF Headless Site“ auswählen. Nun, hier möchte ich eigentlich, anstatt eine .env-Datei zu verwenden, zwei Umgebungsvariablen aus meinem Dateiprojekt kopieren.

Die erste ist also die nächste öffentliche WordPress-URL. Das sind dieselben Umgebungsvariablen, die wir in unserem lokalen Projekt festlegen, und ich kopiere den Link zu meiner Produktions-WordPress-Installation dort hinein. Dann füge ich eine weitere Umgebungsvariable hinzu, und diese wird für unseren Faust-Geheimschlüssel sein. Also kopiere ich das aus dem Faust-Einstellungsmenü und stecke es dort hinein und setze den Schlüssel dafür auf Faust Secret Key.

Und sobald das erledigt ist, kann ich fortfahren und auf App erstellen klicken, und Atlas beginnt mit dem Erstellen und Bereitstellen meiner App. Während des Atlas-Build-Prozesses wird NPM install und Ihr NPM-Build-Befehl für das von Ihnen verwendete Framework ausgeführt. Und sobald dieser gesamte Code erstellt wurde, wird dieser Node-Container für Sie in unserem Netzwerk bereitgestellt. Und sobald sich das alles nur eine Sekunde lang dreht, sollten wir eine Erfolgsmeldung erhalten, und dann können wir auf die für uns bereitgestellte URL klicken und unsere Website tatsächlich live ansehen.

Wir erhalten also unsere Erfolgsmeldung und können dann fortfahren und diese URL in einem anderen Tab öffnen. Und da können wir sehen, dass unsere Website genau so aussieht wie vor Ort, und sie zieht alle korrekten Daten, alle korrekten Bilder ein und saugt sogar all unsere ACF-Inhalte auf. Einige unserer Posts sehen wirklich toll aus und sind auf Atlas sehr performant – ich verwende hier tatsächlich einige wirklich große Bilder, wenn Sie also eine gewisse Langsamkeit sehen, liegt das sicherlich an meinen Entscheidungen.

Die Atlas-Plattform ist vollgestopft mit Funktionen, die moderne JavaScript-Entwickler zu schätzen wissen. Leider reicht die Zeit in dieser Präsentation nicht aus, um sie alle im Detail durchzugehen.

Aber Atlas leistet wirklich gute Arbeit, indem es wichtige Details aus den Frontend- und Backend-Teilen Ihres Headless-Ökosystems in einem praktischen Dashboard zusammenführt, wo Sie einzelne Build-Protokolle und die Build-Ausgabe einsehen, Bereitstellungen und Umgebungsvariablen untersuchen können, für die Sie verwendet haben einen bestimmten Build, sowie Zugriff auf zusätzliche Einstellungen oder Funktionen, die Sie aktivieren können, wie z Ihre App oder Ihr CDN, wenn Sie Änderungen an WordPress vornehmen.

All diese Dinge werden mit der Atlas-Plattform möglich, und sie senkt wirklich die Hürde für den Einstieg in das Erstellen von Headless WordPress.

Wow. Herzlichen Glückwunsch, wie gesagt, das war eine Menge in 25 Minuten. Bitte zögern Sie nicht, nach der Präsentation weiter zu üben, und kontaktieren Sie mich, wenn Sie Fragen zu den ersten Schritten mit den Demo-Ressourcen haben. Wenn Sie daran interessiert sind, mehr über Headless zu erfahren, aber dafür Platz brauchen, melden Sie sich für ein kostenloses Atlas Sandbox-Konto an. Neben der Bereitstellung Ihrer eigenen Code-Repositories, wie wir es heute getan haben, können Sie auch mit einigen unserer vorgefertigten Blueprints beginnen, bei denen es sich um Projektstapel mit einem Klick handelt, mit denen Sie sehen können, wie ein Headless-Projekt nach Abschluss aussieht.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.