DE{CODE}: Neue Funktionen für Atlas

Die Aktualisierungen der Atlas-Headless-Entwicklungstools von WP Engine helfen Ihnen dabei, die strengsten Anforderungen Ihrer Kunden zu erfüllen. Mit einem kostenlosen Sandbox-Konto zeigt Ihnen diese Demo, wie Sie diese neuen Funktionen zu Ihrer Headless-Site hinzufügen können. Sehen Sie sich das Video unten an, um mit dem Aufbau Ihrer bisher leistungsstärksten und sichersten Website zu beginnen!

Sitzungsfolien

Vollständige Textabschrift

KELLEN MACE : Hallo. Ich bin Kellen vom Developer Relations Team bei WP Engine. In diesem Vortrag werden wir einige der neuen, aufregenden Funktionen im Atlas-Ökosystem untersuchen. Wir werden sehen, wie wir im WP Engine-Benutzerportal eine neue Atlas-App erstellen und diesen Portfolio-Blueprint auswählen können. Auf diese Weise können wir innerhalb weniger Minuten eine ausgewachsene Headless-WordPress-Site live im Internet bereitstellen.

Dann werden wir sehen, wie wir dieses Projekt auf unseren lokalen Computer klonen und für die lokale Entwicklung einrichten können, damit wir Anpassungen an unserer neuen Site vornehmen können. Dann wenden wir uns Atlas Content Modeler zu und sehen, wie wir damit ein neues benutzerdefiniertes Inhaltsmodell namens Fotos erstellen können.

Und dieses Fotos-Inhaltsmodell wird einige eigene benutzerdefinierte Felder haben, darunter eines, das ein wiederholbares Feld ist, eine neue Funktion, die kürzlich in Atlas Content Modeler eingeführt wurde. Schließlich werden wir sehen, wie wir in unserer Front-End-JavaScript-App eine benutzerdefinierte Entwicklung durchführen und diese benutzerdefinierten Fotodaten abfragen und sie dann auf der Seite rendern können.

Sobald ich ein WP Engine-Konto erstellt und mich auf der Atlas-Seite des Benutzerportals angemeldet habe, kann ich fortfahren und auf die Schaltfläche zum Erstellen einer neuen App klicken. Von hier aus können wir entweder mit einem Entwurf beginnen, der eine vorgefertigte Site ist, oder aus einem vorhandenen Repo ziehen. Beginnen wir mit einer Blaupause. Jetzt können wir auswählen, welche Blaupause wir verwenden möchten. Wir wählen also den Portfolio-Blueprint aus und klicken dann auf Continue.

Der nächste Schritt besteht darin, diese App mit GitHub zu verbinden. Wir klicken dazu auf die Schaltfläche und melden uns dann bei GitHub an. Und danach sehen wir diesen Bildschirm, der anzeigt, dass unsere App autorisiert wurde. Als nächstes müssen wir dieses Repo tatsächlich klonen. Wir klicken also auf Clone Blueprint und geben unserem neuen Repository einen Namen. Und klicken Sie auf die Schaltfläche, um ein neues Repo mit dieser Blaupausenvorlage zu erstellen.

Hier können Sie also sehen, dass dieses neue App-Repo auf meinem GitHub-Konto erstellt wurde. Jetzt müssen wir dieses Repo mit unserer Atlas-App verknüpfen. Zurück im Benutzerportal scrollen wir also nach unten zum Abschnitt „Ausgewähltes Repository“. Wenn Sie den Zugriff auf alle Ihre Repos zugelassen haben, wird dies möglicherweise in der Liste angezeigt. Wenn nicht, können Sie auf Repositorys verwalten klicken.

Auf dieser Seite können Sie die Repos auswählen, auf die Atlas zugreifen können soll. Also wählen wir unser Repo aus der Liste aus. Klicken Sie auf Speichern, und wenn wir jetzt zum Benutzerpanel zurückkehren, sehen wir das von uns hinzugefügte Repo in der Liste. Also mach weiter und wähle das aus. Als Region für unsere App bleiben wir bei US Central. Klicken Sie schließlich auf die Schaltfläche, um diese Atlas-App zu erstellen.

Hier sehen wir eine Benachrichtigung, dass unsere App jetzt erstellt wird. Also geben wir dem nur eine Minute. Nachdem die Erstellung unserer Atlas-App nun abgeschlossen ist, können wir fortfahren und auf diesen Atlas-URL-Link klicken, um zu sehen, wie unsere neue Atlas-App live im Internet läuft. Auf der Startseite sehen wir also unsere Liste der neuesten Beiträge. Wir werden unsere Zeugnisse sehen.

Wir können zur Portfolio-Seite gehen und hier eine Liste unserer Portfolio-Projekte einsehen. Ich klicke mich durch ein einzelnes Projekt. Als nächstes schauen wir uns den Blog an. Gehen Sie also zur Blog-Seite und sehen Sie sich hier unser Beitragsraster an. Und wir können uns auch durchklicken, um eine einzelne Blog-Beitragsseite anzuzeigen. Und dann fertig, fertig, klick, zurück auf unsere Homepage.

Sie können also feststellen, dass diese Seitenübergänge wirklich schnell sind. Wir erhalten einen sofortigen Umschnitt von einer Seite zur anderen. Und das ist einer der Vorteile einer kopflosen WordPress-Architektur. Sehen wir uns als Nächstes die WordPress-Site an, die hinter den Kulissen steckt und diese Erfahrung vorantreibt. Gehen wir also zurück zum WP Engine-Benutzerportal, und von hier aus können wir auf diesen Link zur verknüpften WordPress-Umgebung klicken.

Hier können wir auf WP Admin klicken, um an den WordPress-Admin für unsere Seite gesendet zu werden. Hier ist also unser Backend, das diese Erfahrung antreibt. Gehen wir zu den Posts, und wir können hier sehen, dass sie mit einer Reihe von Dummy-Blog-Posts vorbelegt wurden. Von hier kommen also all diese Daten für unsere neue Website. Werfen wir auch einen Blick auf Plugins. Hier können Sie sehen, dass mehrere Plugins installiert und aktiviert wurden, um die kopflose WordPress-Entwicklung zu ermöglichen.

Lassen Sie uns besonders auf Atlas Content Modeler achten. Also drüben in der Seitenleiste klicken wir auf Content Modeler. Sie können hier sehen, dass zwei benutzerdefinierte Inhalte für uns erstellt wurden, Projekte und Testimonials. Und wir können diese hier in der Seitenleiste sehen. Wir haben also Projekte, eine Liste davon sowie Erfahrungsberichte und eine Liste davon. Hierher kommen also die Projekt- und Referenzdaten, die wir auf der Front-End-Site gesehen haben.

Wir haben also große Fortschritte gemacht. Wir haben gesehen, wie wir über das Benutzerportal eine neue Atlas-App erstellen können. Und wenn wir das tun, erstellt es nicht nur eine Front-End-JavaScript-Anwendung, um die Seiten Ihrer Website bereitzustellen, sondern auch das WordPress-Back-End, das diese Erfahrung unterstützt und Ihnen die Mühe erspart, die beiden miteinander zu verknüpfen. Es verbindet diese beiden, sodass die Frontend-App ihre Daten aus dem WordPress-Backend beziehen kann.

Von dort aus konnten wir einen Blick auf die Front-End-App werfen und sehen, wie sie live online läuft, sowie im WordPress-Admin herumstöbern und einige der benutzerdefinierten Datentypen oder Datenmodelle und auch einige der Dummy-Daten sehen wurde für uns erstellt. So können Sie in sehr kurzer Zeit sehen, dass wir jetzt eine vollwertige, funktionierende Headless-WordPress-Anwendung haben.

Was aber, wenn wir an dieser Stelle Änderungen vornehmen wollen? Was ist, wenn Sie eine echte Portfolio-Website erstellen und sich denken, das ist wirklich cool? Das ist ein toller Vorsprung. Aber jetzt möchte ich einige Änderungen vornehmen. Ich möchte einige Codeänderungen vornehmen, um vielleicht einige Farben auszutauschen oder zusätzliche Seiten zu meiner Website hinzuzufügen. Wie mache ich das? Wie fange ich mit der lokalen Entwicklung an? Finden wir es als nächstes heraus.

Zunächst kopieren wir den Link zu unserem GitHub-Repo und führen dann git clone in der Befehlszeile aus, um unser Projekt zu klonen. Von hier aus können wir in dieses Projektverzeichnis kopieren und dann NPM install ausführen, um die Abhängigkeiten unseres Projekts zu installieren. Sobald dies erledigt ist, öffnen wir das Projekt in einem Code-Editor.

Als nächstes müssen wir einige Umgebungsvariablen einrichten. Sie werden also sehen, dass hier eine Beispieldatei für uns erstellt wurde. Und jetzt müssen wir nur noch sicherstellen, dass dies die richtigen Werte hat. Zurück im Benutzerportal klicken wir also auf Variablen verwalten und sehen uns dann die Umgebungsvariablen an, die die Produktions-App verwendet. Fahren Sie fort und kopieren Sie beide und fügen Sie sie in unsere App ein, damit unsere lokale App dieselben Umgebungsvariablen verwendet wie die Produktion.

Und der letzte Schritt hier ist, diese Datei umzubenennen und .sample am Ende zu entfernen, damit sie wirksam wird. Nun baut die Frontend-App, mit der wir hier arbeiten, auf Faust.js auf. Und Faust muss in der Lage sein, eine sogenannte GraphQL-Introspektion-Abfrage auszuführen, um die Magie des Datenabrufs auszuführen.

Das ist also im Grunde genommen Faust, der das WordPress-Backend fragt, hey, welche Daten stehen Ihnen im GraphQL-Schema zur Verfügung, die ich abfragen kann? Wir müssen also die Introspektion aktivieren, damit dies funktioniert. Wir gehen hier zurück zum WordPress-Admin und gehen zu GraphQL und dann zu den Einstellungen in der Seitenleiste.

Auf der Seite Einstellungen scrollen wir nach unten, wo wir Enable Public Introspection sehen, und fahren fort und klicken auf dieses Kästchen. Während wir hier sind, empfehle ich, auch den grafischen Debug-Modus zu aktivieren. Dadurch erhalten Sie aussagekräftigere Debug-Meldungen. Sobald wir das getan haben, können wir fortfahren und auf die Schaltfläche klicken, um unsere Änderungen zu speichern. Und jetzt können wir endlich das Terminal öffnen und NPM run generate ausführen. Und wenn das erledigt ist, führt NPM schließlich dev aus, um unsere App lokal zum Laufen zu bringen.

Jetzt klicke ich auf diesen localhost 3.000-Link, und wir können sehen, dass unsere Site hier tatsächlich lokal ausgeführt wird. Also haben wir gesagt, dass wir einige Inhalte hinzufügen möchten, um unsere Website anzupassen. Und jetzt, da wir für die lokale Entwicklung eingerichtet sind, können wir genau das tun. Nehmen wir also an, dass wir für dieses Projekt nicht nur Blog-Posts und dann unsere wenigen benutzerdefinierten Inhalte haben möchten, wie die Portfolio-Projekte, die wir gesehen haben, und auch diese Testimonials.

Nehmen wir an, wir möchten über diesen benutzerdefinierten Inhalt hinaus noch mehr hinzufügen. Nehmen wir an, der Kunde, für den die Website gedacht ist, ist nicht nur jemand, der Blog-Posts erstellt und Portfolio-Projekte erstellt, sondern auch ein Fotograf, und er möchte die Fotos, die er aufgenommen hat, präsentieren. Wie könnten wir unserer Website einen benutzerdefinierten Inhaltstyp oder ein benutzerdefiniertes Inhaltsmodell hinzufügen, um die Daten dieses Fotos zu unterstützen, diese abzufragen und dann die Fotos in unserer Front-End-Anwendung anzuzeigen? Das machen wir als nächstes.

Also gehe ich zurück zum WordPress-Admin hier und wir gehen zum Content Modeler. Wir waren also schon einmal auf dem Bildschirm. Wir haben uns die Projekte und Erfahrungsberichte angeschaut. Wir können sehen, dass dies benutzerdefinierte Inhaltsmodelle sind, die als Teil dieses Entwurfs für uns erstellt wurden. Und ich kann mich zu jedem dieser Modelle durchklicken und sehen, dass jedes dieser Modelle seinen eigenen Satz individueller Felder hat.

So hätten beispielsweise Projekte diese einzelnen Felder. Und Projekte und Testimonials werden hier in der Seitenleiste widergespiegelt. Und dann die Felder für jeden davon. Wenn ich auf ein Projekt klicke und dann auf ein vorhandenes klicke oder auf „Neu hinzufügen“ gehe, werden alle diese Felder hier angezeigt. Unsere Inhaltsersteller sehen also alle Felder, die sie zum Eingeben dieser Daten benötigen. In Ordnung.

Für unseren benutzerdefinierten Inhalt benötigen wir jedoch ein neues Modell. Also mache ich weiter und erstelle ein neues Modell, indem ich hier auf diese Schaltfläche klicke. Also werde ich dieses Foto nennen. Und für einen Pluralnamen setzen wir einfach ein S an das Ende und nennen ihn Fotos. Mit dieser automatisch generierten API-Kennung – hier, dieser ID – bin ich einverstanden. Foto sieht für mich gut aus. Für die API-Sichtbarkeit möchten wir sicherstellen, dass dieser auf öffentlich klickt, da wir in der Lage sein möchten, diese Daten über GraphQL abzufragen. Für unsere Model-Ikone wäre vielleicht so etwas wie eine Kamera für Fotos angebracht. Und jetzt klicke ich auf Erstellen.

Auf diese Weise wurde unser Inhaltsmodell für Fotos erstellt. An dieser Stelle heißt es also, wählen Sie Ihr erstes Feld für das Inhaltsmodell aus. Und zum jetzigen Zeitpunkt sind dies die von Atlas Content Modeler unterstützten Feldtypen. Lassen Sie uns für die Fotos, die wir auf dieser Seite zeigen möchten, ein paar davon verwenden.

Nehmen wir an, wir geben jedem unserer Fotos einen Titel. Also sage ich Titel und nenne es dann Fototitel als API-Bezeichner. Und so wird es im GraphQL-Schema verfügbar sein. Dafür ist es da. Und wir werden sagen, dass wir dies als Eintragstitel verwenden möchten. Und einzeiliger Text ist in Ordnung. Gehen Sie also weiter und klicken Sie auf Erstellen.

Nehmen wir für unser nächstes Feld an, wir möchten dieses Bild selbst für das Foto erfassen. Also drücke ich auf das Plus. Und hier erstellen wir ein neues Feld. Wir nennen dieses eine Bild. Und für den Typ müssen wir tatsächlich Medien auswählen, da es sich um ein Foto handelt. Also werde ich es Bild nennen. Und dann werde ich hier unten fortfahren und dies als das vorgestellte Bild für jeden Beitrag festlegen. Also klicke ich darauf und wir machen es auch erforderlich. So wissen wir immer, dass es da sein wird. Klicken Sie dann auf Erstellen.

Los geht's. Da ist unser zweites Feld. Lassen Sie uns für den dritten eine Beschreibung haben. Also drücke ich auf das Plus. Und in diesem Fall wird dies ein Rich-Text-Feld sein. Also sagen wir Beschreibung und das reicht für dieses Feld. Und dann ist unser letztes, was wir wollen, für die Fächer. Also verwenden wir dieses Feld, um zu erfassen, was auf dem Foto zu sehen ist. Wenn es also zum Beispiel ein Foto von einer Bergkette bei Sonnenuntergang ist, wie es eines unserer Fotos sein wird, könnten einige der Motive auf dem Foto Berge, Sterne, Himmel und solche Dinge sein. Nur eine Liste der Dinge, die auf dem Foto vorhanden sind.

Es gäbe verschiedene Möglichkeiten, diese Daten zu speichern. Sie könnten beispielsweise eine benutzerdefinierte Taxonomie erstellen und dann jedem dieser Dinge Begriffe zuweisen. Jedes dieser Fotos könnte also einen oder mehrere Begriffe haben. Das wäre eine Möglichkeit. Nehmen wir an, für unsere Zwecke sind wir nicht daran interessiert, Fotos basierend auf so etwas wie einem Tag oder einer Taxonomie zusammenfassen zu können.

Stattdessen dient diese Liste wirklich nur zu Anzeigezwecken auf der Website. Das Problem ist, wenn wir hier das Plus drücken, machen wir es zu einem Textfeld, nun, dann bekommen wir nur eines davon, oder? Und wenn es noch mehr sind? Wir wissen nicht im Voraus, wie viele dieser Motive ein bestimmtes Foto haben könnte, richtig? Und hier ist die Funktion für wiederholbare Felder von ACM wirklich praktisch. Mal sehen, wie das aussieht.

Ich mache das hier zu einem Textfeld und wir nennen es Themen. Und dann machen Sie dieses Feld wiederholbar. Das ist also der Schlüssel. Wir machen weiter und klicken darauf. Und wir behalten es als einzeiliges Textfeld bei und klicken auf Erstellen. So einfach ist unser Foto-Content-Modell hier nun erstellt. Und wir können es in der Seitenleiste sehen.

Wenn ich also hier auf Fotos klicke, sehen wir, dass ich hier einen Dummy habe, den ich vorab erstellt habe. Aber wenn wir „Neu hinzufügen“ erstellen, werden Sie sehen, dass dies widerspiegelt – die Felder hier spiegeln wider, was wir im Inhaltsmodell hinzugefügt haben. Also bekommen wir einen Titel. Wir bekommen die Möglichkeit, ein Bild anzuhängen. Wir haben ein Rich-Text-Feld für die Beschreibung des Fotos und ein wiederholbares Feld hier, um ein oder mehrere Motive hinzuzufügen.

Mal sehen, was wir hier tun können. Ich klicke auf Beitragsbild hinzufügen. Und ich werde einen von meiner Maschine auswählen. Mal sehen. Und sobald das Hochladen abgeschlossen ist, geben wir ihm etwas Alt-Text. Sagen wir, eine weiße Blume, so, und fertig. Da ist also unser Bild. Lassen Sie uns jetzt zurückgehen und ihm einen Titel geben. Wir sagen weiße Blume mit Bokeh. Genau so. Für eine Beschreibung sagen wir, hier ist eine großartige Aufnahme einiger hübscher weißer Blumen. Genau so.

Und nun zu unseren Motiven können wir uns fragen, was ist hier auf dem Foto zu sehen? Und vielleicht können wir – Blume könnte eine sein. Klicken Sie auf Artikel hinzufügen. Und dieser Bokeh-Effekt mit dem unscharfen Hintergrund ist auch da. Und der Stamm oder der Ast des Baumes, denke ich, wäre in der Aufnahme, als weiteres Beispiel. Deshalb werden wir einige davon hier hinzufügen. Und wenn wir denken, dass wir alles erfasst haben, können Sie fortfahren und auf Veröffentlichen klicken. Also los geht's.

Und dann zurück in Fotos, ich hatte zuvor dieses erstellt. Berge sind cool. Es sollte so eingestellt werden. So erhalten Sie ein Gebirgsfoto. Und dann ist hier eine tolle Aufnahme einer Bergkette mit Bergen, Sternen, Schatten. Ein paar Themen, die es hat. Das würde uns also zumindest ein paar Posts geben, mit denen wir in unserer Front-End-Anwendung arbeiten können.

An diesem Punkt haben wir also unser Inhaltsmodell im WordPress-Backend erstellt, um die Daten zu speichern, die wir für diese Fotos benötigen, und wir haben zwei neue Fotoposts erstellt, die wir verwenden können, um zu versuchen, sie in unserer Frontend-App zu konsumieren. Und als nächstes fragen Sie sich vielleicht, wie wir diese Daten aus WordPress ziehen, damit wir sie in unserer Front-End-Anwendung verwenden können?

Es gibt eine sehr coole Funktion, die Atlas Content Modeler vorführt, um dies sehr einfach zu machen. Also gehe ich zurück zum Content Modeler hier und finde unser Fotomodell und klicke hier auf das kleine Auslassungspunkt-Symbol. Und ich gehe zu Open in Graphical. Sobald ich darauf klicke, wird eine Abfrage für mich erstellt, die dieses Inhaltsmodell enthält, das wir erstellt haben, Fotos.

Und es greift nach den ersten 10 davon und fügt dann dieses GraphQL-Fragment unten hinzu, das alle Felder enthält, die wir erstellt haben, einschließlich der benutzerdefinierten. Wie Sie also bemerkt haben, haben wir den Fototitel hinzugefügt, wir hatten unser Bild, wir hatten die Beschreibung und dann die Motive. Das ist also sehr praktisch, um zu sehen, wie diese Daten im GraphQL-Schema aussehen. Machen Sie also weiter und klicken Sie auf diese Schaltfläche, um diese Abfrage auszuführen.

Und Sie können sehen, was unsere Front-End-JavaScript-App zurückbekommen würde, wenn sie genau dieselbe GraphQL-Abfrage ausführen würde. Es würde Fotos zurückbekommen. Und dann wäre darin ein Objekt namens Array, genannt Knoten. Und innerhalb dieses Arrays wären Objekte, die so aussehen. Jedes dieser Fotos hätte einen Titel, ein Bild und weiter unten auch die Beschreibung und die Themen.

Das ist also genau das, was wir brauchen. Wir werden also jetzt mehrere dieser Felder verwenden. Wir sind also in Bezug auf unser WordPress-Backend und die Möglichkeit, diese Fotodaten zu speichern und auch anzuzeigen, gut aufgestellt. Sehen wir uns nun an, wie wir dies in unserer Front-End-JavaScript-App verwenden können.

Also kehren wir dorthin zurück. Und ich denke, ein guter Ausgangspunkt dafür wäre, sich die Portfolio-Seite anzusehen, die eine Liste von Projekten ist, richtig? Da es sich um eine Liste mit benutzerdefinierten Inhaltsmodellbeiträgen und Fotos handelt, haben diese beiden Seiten viel gemeinsam. Also können wir das als eine Art Ausgangspunkt verwenden.

Also klicke ich hier auf Portfolio, nur um uns daran zu erinnern, wie das aussieht. Und so bekommen wir diese Liste von Portfolio-Projekten. Also lasst uns jetzt den Code knacken und uns ein bisschen die Hände schmutzig machen. Wir werden diese Seite, das Slash-Projekt, ausfindig machen und sehen, wie sie aufgebaut ist.

Also gehe ich innerhalb von Source zu Pages. Und dann finde ich Project. Da ist es. Und öffnen Sie die Datei index.js darin. Scrollen Sie also ein wenig nach unten, und wir werden sehen, dass dieser Use-Node-Paginierungs-Hook verwendet wird. Und das ist ein React-Hook, der von diesem Ort hier kommt, innerhalb des Hooks-Ordners. Und darin rufen wir query.projects auf.

Und query.projects ermöglicht uns den Zugriff auf Daten über den benutzerdefinierten Beitragstyp unseres Projekts, auch bekannt als das von uns erstellte Inhaltsmodell unseres Projekts. Wir rufen also query.projects auf und übergeben dann einige Felder, die wir im Voraus verarbeiten möchten, damit sie beim Laden der Seite verfügbar sind. Das ist also dieses Array hier oben. Diese Felder sind also beim allerersten Laden der Seite vorhanden.

Und sobald wir tatsächlich bereit sind, den Inhalt dieser Seite zu rendern, tun wir dies. Wir haben eine SEO-Komponente, eine Kopfzeile und dann unten eine Fußzeile. Und dann befindet sich der Hauptabschnitt der Seite hier innerhalb dieses Haupt-Tags, wo wir den Header haben, der der blaue Abschnitt ist, der hineingezogen wird. Und dann ein Wrapper-Div mit unserer Projektliste darin. Und dann auch diese Load More-Komponente, die zu dieser Load More-Schaltfläche unten führt, auf die ich klicken kann. Und dann werden weitere Projekte abgerufen und in die Benutzeroberfläche eingefügt.

So ist also diese Seite aufgebaut. Und wie gesagt, ich nutze das gerne als Ausgangspunkt für uns. Lassen Sie uns also fortfahren und diese gesamte Datei kopieren, und wir werden diese Dateistruktur hier nachahmen. Innerhalb von Pages erstellen wir also Photo. Und dann erstellen wir in diesem Ordner eine index.js-Datei. In Ordnung. Und in diese neue Datei füge ich den Inhalt ein. Aber wir werden einige Dinge umstellen, da wir dafür nicht an Projektdaten interessiert sind, sondern an unseren Fotodaten. Mal sehen, wie wir das machen können.

Der Name dieser Konstante verweist also auf Projekte. Lassen Sie uns also fortfahren und das als ersten Schritt umbenennen. Wir können sagen, dass Fotoknoten Pre-Pass-Felder sind. Das wird also gut sein. Wir müssen unsere eigene Liste von Feldern bereitstellen. Vielleicht belassen wir es jetzt einfach bei der Datenbank-ID und fügen dann gleich welche hinzu.

Weiter unten, mal sehen. Foto-Vorpass. Oh, der Name ist durcheinander geraten. Na, bitte. Jetzt passen sie also wieder zusammen. In Ordnung. Denken Sie daran, dass wir anstelle von query.projects query.photos für unseren benutzerdefinierten Inhaltstyp benötigen. Also mach weiter und aktualisiere das so, dass es Fotos sind, genau dort. Scrollen Sie etwas nach unten.

Diese Projektkomponente wird also nicht mehr zutreffen, da wir sie nicht verwenden. Also werde ich das an dieser Stelle entfernen und wie wäre es damit? Wir werden nur – wir werden nur H1. Es sagt Hallo, nur um etwas auf der Seite hier zu rendern. Und vielleicht werden wir auch noch viel mehr auskommentieren.

Also werde ich eine Projektsuche durchführen, um zu sehen, ob ich etwas vergessen habe. Ja, nur ein paar Codekommentare und dann diese Komponente hier, die hereingezogen wird und die wir nicht mehr verwenden. Also werde ich diese Komponente löschen. Und ich denke, wir sollten gut sein. Wir verwenden einige dieser Dinge an dieser Stelle nicht, aber das ist in Ordnung. Wir werden in Kürze.

Also werde ich es speichern und wir werden sehen, ob wir dieses Rendering hinbekommen. Jetzt sollte ich also in unserer Front-End-App in der Lage sein, zu Foto zu navigieren, so wie hier. Und los geht's. Hier also unsere neue Seite. Es sagt Hallo, und vieles davon sieht genauso aus wie unsere Portfolio-Projektseite, wie die Kopfzeile oben und die Fußzeile.

Mir ist aufgefallen, dass dort immer noch Portfolio steht, und wir wollen das wahrscheinlich austauschen. Das können wir also ganz kurz machen. Also hier ist Portfolio. Wir sagen Fotos. Und dann ändern wir das auch an dieser Stelle in Fotos. Speichern Sie es. Na, bitte. Das hat also den Header aktualisiert.

Lassen Sie uns nun untersuchen, wie wir diese Daten tatsächlich verwenden, unsere Fotodaten abrufen und hier eine Liste anzeigen können. Wo fangen wir damit überhaupt an? Wie wir im GraphQL– oder im WordPress-Admin hier gesehen haben, wird unsere Abfrage ungefähr so ​​aussehen. Es wird diese Felder haben. Also lass uns das tun. Der Fototitel ist also das benutzerdefinierte Feld. Aber eigentlich, da wir dieses Feld als Titel des Beitrags festlegen, könnten wir einfach Titel verwenden, da das sein wird – der Titel des Beitrags wird derselbe sein wie das benutzerdefinierte Feld mit diesem Namen. Also könnten wir das einfach verwenden.

In diesem Array verwenden wir also nicht nur die Datenbank-ID, sondern auch den Titel für unsere Fotos, Bilder, Beschreibungen und Themen. Also fügen wir diese auch hinzu. Bild, Beschreibung und dann Betreff. In Ordnung. Du brauchst Kommas am Ende. Na, bitte. Ich denke, das sind alle unsere Felder, die wir direkt am Ende der Seite verfügbar haben möchten. Also für mich sieht das gut aus.

Und lassen Sie uns testen, ob wir hier tatsächlich Daten rendern können. Also unter unserem Hello H1, das wir haben, machen wir das. Wir machen JSON.stringify und gehen dann zu diesem Etwas über. Also machen wir hier Daten und sehen, ob wir Daten auf unsere Seite rendern können.

Also speichere ich das und wir kehren zu unserem vorderen Ende zurück. Und da ist es, sicher genug. So sehen also die Daten aus. Sie können sehen, dass wir es erfolgreich von unserem WordPress-Backend abrufen. Wir haben dieses Node-Array und dann innerhalb dieses Objekts, das jedes unserer einzelnen Fotos und genau die Daten darstellt, die wir zurückgefordert hatten, einschließlich aller einzelnen Werte für unser wiederholbares Themenfeld hier.

Das ist großartig. Genau das brauchen wir. Lassen Sie uns die Dinge ein bisschen sauberer machen – nun, viel sauberer, denke ich, als nur Daten auf die Seite zu spucken. Lassen Sie uns statt nur dieses Pre-Tags hier alle unsere Daten abbilden und dafür eine Karte auf der Seite rendern.

Eine Sache, die ich gerne mache, ist, bevor wir davon ausgehen, dass wir Posts zu rendern haben, müssen wir den Fall berücksichtigen, dass es vielleicht keine gibt, richtig? Eine Sache, die ich gerne mache, ist oben auf meinen Komponenten, ich habe ständig Fotos, so etwas. Und dann mache ich data.nodes.length so. Und wir machen ein Fragezeichen für die optionale Verkettung, weil wir noch nicht wissen, ob Daten vorhanden sein werden.

Und dann wandeln wir das in einen solchen Booleschen Wert um. Das heißt, wenn wir an dieser Stelle scheitern und die Daten undefiniert sind, wird dies in „false“ umgewandelt. Wir werden sagen, wir haben keine Fotos zum Rendern. Andernfalls, wenn wir in der Lage sind, bis zur Länge dieses Arrays zu bohren, ist es entweder null, wenn es keine Posts gibt, oder eins oder mehr. Wenn wir also diese Ganzzahl in einen booleschen Wert umwandeln, sagt uns das, ob wir Fotos haben oder nicht. Wenn es also Null ist, ist dies falsch. Wenn es einer oder mehrere sind, wäre havePhotos wahr.

Mit diesem Wissen können wir also innerhalb unserer Komponente hier einige Entscheidungen treffen. Also lasst uns herausfinden, wie wir das machen können. Ich sage also, wenn wir Fotos haben, dann wollen wir eine Sache rendern. Sagen wir – mal sehen. Wir wollen data.photos erstellen und diese dann mappen. Also werden wir für jedes Foto etwas rendern.

Lassen Sie uns also zunächst etwas Einfaches zurückgeben. Wir geben die zurück – mal sehen. Wir werden eine H2 machen, wie wäre es, da dies wie eine unserer Karten sein wird. Und dann sagen wir so photo.title. In Ordnung. Also kartieren wir jedes unserer Fotos. Und für jedes davon geben wir ein H2 mit dem Titel dieses Fotos zurück. In Ordnung.

All dies ist also das, was wir wollen, wenn wir tatsächlich Fotos zu rendern haben. Aber was ist mit der Alternative, wenn wir es nicht tun? Also haben wir hier unsere else-Klausel und lassen uns etwas anderes rendern. Wie wäre es mit Absatz. Und wir werden sagen, keine Fotos zum Anzeigen. Also jetzt, wenn wir es speichern, los geht's. Jetzt bekommen wir also unsere Beitragstitel, die hier gerendert werden.

Lassen Sie uns also hier ein bisschen mehr Funktion vervollständigen. Wir werden sagen, dass wir etwas anderes zurückgeben möchten. In Ordnung. Und für jeden davon werde ich nur einige Stile kopieren, einige Inline-Stile, die ich hier im Voraus geschrieben habe, nur um uns die Zeit zu ersparen, diese abzutippen. Also werde ich diesen Wrapper div haben. Und dann können wir darin unser H2 wiederherstellen, das wir hatten. Also werde ich ein H2 mit dem Titel einfügen.

Lassen Sie uns nach dem Titel die Beschreibung anzeigen. Das können wir als nächstes machen. Das wird also photo.description sein, so ähnlich. Aber wir können es nicht einfach so rendern, wie zum Beispiel innerhalb eines Containers. Wenn wir dies versuchen, wird dies für uns nicht ganz funktionieren, da das HTML nicht maskiert wird. Wenn ich das also speichere, können Sie sehen, dass jetzt das Escape-HTML auf der Seite angezeigt wird, was nicht das ist, was wir wollen.

React hat also ein Dienstprogramm zum Arbeiten mit HTML, das sicher ist und nicht so maskiert werden muss. Und das ist, div und dann gefährlich SetInnerHTML so zu verwenden. Und Sie können ihm ein Objekt übergeben, bei dem eine Eigenschaft HTML mit doppeltem Unterstrich ist.

Und dann ist der Wert, den Sie übergeben, das, was Sie ohne Escapezeichen rendern möchten. Für uns wäre das also photo.description, einfach so. Und dann kann dieses Div Selbstkleidung sein. In Ordnung. So, jetzt werde ich das speichern. Wir werden sehen, was wir bekommen. Cool. Also wird unser HTML jetzt nicht mehr maskiert. Also für mich sieht es gut aus.

Das ist großartig. Wie wäre es mit diesem Beitragsbild? Was wir tun könnten, ist, dies von Grund auf neu zu schreiben. Wir könnten die URL des vorgestellten Bildes abrufen und ein Bild-Tag haben und dieses als URL übergeben. Und dann würde der Browser ein Bild rendern und es auf diese Quelle verweisen.

Wenn Sie jedoch in diese Blueprint-Codebasis eintauchen, hat dieses Projekt tatsächlich eine vorgefertigte Komponente genau für diesen Zweck namens Featured Image. Also für uns wäre das perfekt für uns zu verwenden. Ich scrolle also ein wenig nach oben, wo wir eine Reihe verschiedener Komponenten aus unserem Komponentenverzeichnis importieren. Und ich werde eins hier ans Ende setzen, das als Beitragsbild bezeichnet wird, einfach so. Jetzt können wir unser vorgestelltes Bild rendern, wo immer wir es wollen.

Direkt unter diesem Div mit unserer Fotobeschreibung rendern wir unser vorgestelltes Bild. Und dazu braucht es eine Bildrequisite. Und was wir hier übergeben müssen, ist der gesamte Knoten für dieses Bild. Für uns wäre das also photo.feauredimage.node, einfach so. Und ich denke, das sollte unserem Image nützen. Also werde ich es speichern, und tatsächlich, los geht's. Sobald also unsere Seite hier neu geladen wird, haben wir jetzt unseren Titel, unsere Beschreibung und dann das Foto selbst, das angezeigt wird. Und auch für unser nächstes Foto wird dieses Bild in der Liste angezeigt.

Also das ist cool. Wir machen große Fortschritte. Als letztes haben wir uns um unser wiederholbares Feld für die auf dem Foto vorhandenen Motive gekümmert. Also erstelle ich hier einen Absatz und schließe ihn ab. Und dann können wir innerhalb dieses Absatz-Tags ein paar Locken öffnen und unsere gleichen photo.subjects machen. Aber jetzt heften wir uns an das Ende des Joins. Und wir werden [UNHÖRBAR] sagen, dass wir es durch ein Komma, Leerzeichen, einfach so verbinden wollen. Und das werde ich mir sparen.

Wenn unser Hot Reload passiert, sollte ich in der Lage sein, nach unten zu scrollen. Und sicher genug, los geht's. Sie werden also auf der Liste angezeigt. Der Benutzer ist sich möglicherweise nicht sicher, welche das sind. Vielleicht können wir in unserer App also noch einmal vorbeischauen und eine Art Label hinzufügen, ein kleines vorangestelltes Ding, das vielleicht so etwas wie „Subjects“ sagt. Motive Blume, Bokeh, Ast. Und dann hat unser anderes Foto hier die Motive Berge, Sterne, Schatten, nur als Beispiel.

Wir machen hier also eine Pause, aber Sie können sehen, wie schnell ich diese Seite zusammenstellen konnte. Ich schätze, wir sollten unser Hallo, Welt da oben loswerden. Das brauchen wir nicht unbedingt. Oder hallo Wort. Also werde ich das entfernen. Da sind wir. Sie sehen also, wie ich schon sagte, wie schnell wir das zusammenstellen konnten.

Indem wir unseren Code einfach auf der Portfolio-Listenseite basieren, konnten wir unsere Fotolistenseite hier erstellen und dann jedes der einzelnen Fotos zuordnen und auf die benutzerdefinierten Felder des Atlas Content Modeler zugreifen – Titel, Beschreibung, Bild, und dann unsere wiederholbaren Felder für das Thema hier. Daher würde ich mich freuen, wenn Sie sich dadurch in Ihren eigenen Projekten gestärkt fühlen.

Wenn Sie einen unserer Blaupausen als diesen enormen Vorsprung nehmen möchten, der einen Großteil Ihres Projekts für Sie erledigt und einen Großteil der Beinarbeit erledigt. Und dann können Sie von dort aus etwas Ähnliches tun, wie wir es in diesem Vortrag getan haben. Sie können es weiter anpassen und Ihre eigenen Anpassungen und andere Inhaltsmodelle hinzufügen und so weiter.

Vielen Dank fürs Zuschauen. Ich hoffe, dieser Vortrag war wirklich nützlich und hat Ihnen einen guten Eindruck von all den großartigen Funktionen vermittelt, die im Atlas-Ökosystem herausgekommen sind und weiterhin herauskommen werden.

MODERATOR: Und das ist ein Abschluss für DE{CODE} 2022. Ich hoffe, Sie fanden es inspirierend und verlassen es mit mehr WordPress-Expertise und neuen Community-Verbindungen. Halten Sie ab Freitag Ausschau nach den aufgezeichneten Inhalten auf der Website, um alles nachzuholen, was Sie möglicherweise verpasst haben, oder sehen Sie sich ein Video erneut an.

Ich möchte mich abschließend bei unseren Sponsorpartnern bedanken: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios und 10Up. Ein riesiges Dankeschön für Ihre Spende an unsere DE{CODE}-Spendenaktion. Wir schätzen Ihre Großzügigkeit sehr.

Jetzt werden wir für alle, die mit uns in unserem Teilnehmer-Hub und unseren Sitzungen interagiert haben, die drei besten Gewinner auswählen und Sie am Ende von DE{CODE} darüber informieren, wie Sie Ihren Preis einfordern können. Wir freuen uns, Sie bei unseren zukünftigen Veranstaltungen wiederzusehen, entweder persönlich oder virtuell. Wir können es kaum erwarten, Ihnen mehr über die neuesten WordPress-Entwicklungstrends zu erzählen und wie Sie diese implementieren können, um WordPress-Sites schneller zu erstellen.

Das ist alles von mir. Vielen Dank, dass Sie sich uns angeschlossen haben, und passen Sie auf sich auf.