DE{CODE}: nuove funzionalità per Atlas

Gli aggiornamenti agli strumenti di sviluppo headless Atlas di WP Engine ti aiuteranno a soddisfare i requisiti più severi dei tuoi clienti. Utilizzando un account Sandbox gratuito, questa demo ti mostrerà come aggiungere queste nuove funzionalità al tuo sito headless. Guarda il video qui sotto per iniziare a creare il tuo sito Web più performante e sicuro di sempre!

Slide della sessione

Trascrizione del testo completo

KELLEN MACE : Ciao. Sono Kellen del team di relazioni con gli sviluppatori di WP Engine. In questo discorso, esploreremo alcune delle nuove ed entusiasmanti funzionalità dell'ecosistema Atlas. Vedremo come nel portale utente di WP Engine possiamo creare una nuova app Atlas e scegliere questo progetto di portfolio. In tal modo, possiamo ottenere un vero e proprio sito WordPress headless live su Internet in pochi minuti.

Quindi vedremo come clonare quel progetto sulla nostra macchina locale e prepararci per lo sviluppo locale, in modo da poter apportare personalizzazioni al nostro nuovo sito. Quindi rivolgiamo la nostra attenzione ad Atlas Content Modeler e vediamo come possiamo usarlo per creare un nuovo modello di contenuto personalizzato chiamato Foto.

E questo modello di contenuto di Foto avrà alcuni dei propri campi personalizzati, incluso uno che è un campo ripetibile, che è una nuova funzionalità recentemente introdotta in Atlas Content Modeler. Quindi, finalmente, vedremo come possiamo eseguire uno sviluppo personalizzato nella nostra app JavaScript front-end e interrogare i dati personalizzati di Foto e quindi renderli sulla pagina.

Dopo aver creato un account WP Engine e aver effettuato l'accesso alla pagina Atlas del portale utenti, posso andare avanti e fare clic sul pulsante per creare una nuova app. Da qui, possiamo iniziare con un progetto, che è un sito predefinito, o estrarre da un repository esistente. Iniziamo con un progetto. Ora possiamo selezionare il progetto che ci piace usare. Quindi sceglieremo il progetto Portfolio, quindi faremo clic su Continua.

Il passaggio successivo consiste nel connettere questa app a GitHub. Quindi faremo clic sul pulsante per farlo e quindi accedere a GitHub. Successivamente, vedremo questa schermata, che indica che la nostra app è stata autorizzata. Quindi, dobbiamo effettivamente clonare questo repository. Quindi faremo clic su Clone Blueprint e quindi daremo un nome al nostro nuovo repository. E fai clic sul pulsante per creare un nuovo repository utilizzando questo modello di progetto.

Quindi qui puoi vedere che questo nuovo repository di app è stato creato sul mio account GitHub. Ora dobbiamo collegare questo repository alla nostra app Atlas. Quindi, tornando al portale utente, scorriamo verso il basso fino alla sezione Repository selezionato. Se hai consentito l'accesso a tutti i tuoi repository, potresti vederlo nell'elenco. In caso contrario, puoi fare clic su Gestisci repository.

In questa pagina, sarai in grado di selezionare i repository a cui Atlas dovrebbe essere in grado di accedere. Quindi selezioneremo il nostro repository nell'elenco. Fai clic su Salva e ora, quando torniamo al pannello utente, vedremo il repository che abbiamo aggiunto apparire nell'elenco. Quindi vai avanti e seleziona quello. Per una regione per la nostra app, rimarremo con Stati Uniti centrali. Infine, fai clic sul pulsante per creare questa app Atlas.

Qui, vedremo una notifica che la nostra app è in fase di creazione. Quindi gli daremo solo un minuto. Ora che la nostra app Atlas ha terminato la creazione, possiamo andare avanti e fare clic su questo collegamento URL Atlas per vedere la nostra nuova app Atlas in esecuzione su Internet. Quindi, nella home page, vedremo il nostro elenco degli ultimi post. Vedremo le nostre testimonianze.

Possiamo andare alla pagina del portfolio e controllare un elenco dei nostri progetti di portfolio qui. Farò clic su un singolo progetto. Successivamente, controlleremo il blog. Quindi vai alla pagina del blog e guarda la nostra griglia di post qui. E possiamo fare clic per vedere anche una singola pagina di post sul blog. E poi pronti, set, click, per tornare alla nostra homepage.

Quindi potresti notare che queste transizioni di pagina sono davvero veloci. Otteniamo un taglio immediato da una pagina all'altra. E questo è uno dei vantaggi di utilizzare un'architettura WordPress headless. Successivamente, vediamo il sito WordPress dietro le quinte che alimenta questa esperienza. Quindi torniamo al portale utente di WP Engine e da qui possiamo fare clic su questo collegamento all'ambiente WordPress collegato.

Qui possiamo fare clic su WP Admin per essere inviati all'amministratore di WordPress per il nostro sito. Quindi ecco il nostro back-end che alimenta questa esperienza. Andiamo ai post e qui possiamo vedere che è stato precompilato con un numero di post di blog fittizi. Ecco da dove provengono tutti i dati per il nostro nuovo sito. Diamo anche un'occhiata ai plugin. Qui puoi vedere che diversi plugin sono stati installati e attivati ​​per abilitare lo sviluppo headless di WordPress.

Prestiamo particolare attenzione ad Atlas Content Modeler. Quindi, nella barra laterale, facciamo clic su Content Modeler. Puoi vedere qui che sono stati creati per noi due contenuti personalizzati, progetti e testimonianze. E possiamo vederli qui nella barra laterale. Quindi abbiamo progetti, un elenco di quelli, oltre a testimonianze e un elenco di quelli. Quindi è da qui che provengono i dati sui progetti e le testimonianze che abbiamo visto nel sito front-end.

Quindi abbiamo fatto grandi progressi. Abbiamo visto come dal portale utenti possiamo creare una nuova app Atlas. E quando lo facciamo, crea non solo un'applicazione JavaScript front-end per servire le pagine del tuo sito, ma crea anche il back-end di WordPress che alimenta quell'esperienza e ti risparmia la fatica di collegare i due. Collega questi due in modo che l'app front-end sia in grado di reperire i propri dati dal back-end di WordPress.

Da lì siamo stati in grado di dare un'occhiata all'app front-end e vederla in esecuzione dal vivo online, oltre a curiosare nell'amministratore di WordPress e vedere alcuni dei tipi di dati o modelli di dati personalizzati e anche alcuni dei dati fittizi che sono stato creato per noi. Quindi, in pochissimo tempo, puoi vedere che ora abbiamo un'applicazione WordPress headless funzionante in piena regola.

E se a questo punto volessimo apportare modifiche, però? Cosa succede se stai costruendo un vero sito di portfolio e pensi a te stesso, è davvero fantastico. Questo è un ottimo vantaggio. Ma ora voglio apportare alcune modifiche. Vorrei apportare alcune modifiche al codice per scambiare alcuni colori o aggiungere pagine aggiuntive al mio sito. Come lo faccio? Come posso iniziare con lo sviluppo locale? Scopriamolo dopo.

Per iniziare, copieremo il link al nostro repository GitHub e poi andremo avanti ed eseguiremo git clone sulla riga di comando per clonare il nostro progetto. Da qui, possiamo inserire il CD nella directory del progetto e quindi eseguire l'installazione di NPM per installare le dipendenze del nostro progetto. Fatto ciò, andremo avanti e apriremo il progetto in un editor di codice.

Successivamente, dobbiamo impostare alcune variabili di ambiente. Quindi vedrai che qui è stato creato un file di esempio per noi. E ora dobbiamo solo assicurarci che abbia i valori giusti. Quindi, tornando al portale utente, faremo clic su Gestisci variabili e quindi daremo un'occhiata alle variabili di ambiente utilizzate dall'app di produzione. Vai avanti e copia e incolla entrambi nella nostra app in modo che la nostra app locale utilizzi le stesse variabili di ambiente della produzione.

E l'ultimo passo qui è rinominare questo file, rimuovendo .sample dalla fine in modo che abbia effetto. Ora, l'app front-end con cui stiamo lavorando qui è basata su Faust.js. E Faust, per fare la magia del recupero dei dati che fa, deve essere in grado di eseguire quella che viene chiamata una query di introspezione GraphQL.

Quindi questo è fondamentalmente Faust che chiede al back-end di WordPress, ehi, quali dati hai a disposizione nello schema GraphQL per farmi interrogare? Quindi dovremo abilitare l'introspezione affinché funzioni. Torneremo all'amministratore di WordPress qui e andremo a GraphQL e quindi alle impostazioni nella barra laterale.

Nella pagina Impostazioni, scorriamo verso il basso fino a dove vediamo Abilita l'introspezione pubblica e andiamo avanti e facciamo clic su quella casella. Già che ci siamo, consiglio anche di abilitare la modalità di debug grafico. Ciò ti darà messaggi di debug più descrittivi visualizzati. Fatto ciò, possiamo andare avanti e fare clic sul pulsante per salvare le modifiche. E ora finalmente possiamo aprire il terminale ed eseguire NPM run generate. E poi, una volta fatto ciò, finalmente, NPM esegue dev per far funzionare la nostra app in locale.

Ora, farò clic su questo collegamento localhost 3.000 e possiamo vedere che il nostro sito è effettivamente in esecuzione localmente qui. Quindi abbiamo detto che vogliamo aggiungere alcuni contenuti a questo per personalizzare il nostro sito. E ora che siamo pronti per lo sviluppo locale, possiamo fare esattamente questo. Quindi diciamo che per questo progetto, vogliamo avere non solo post sul blog e poi i nostri pochi pezzi di contenuto personalizzato che abbiamo, come i progetti di portfolio che abbiamo visto e anche queste testimonianze.

Oltre a quel contenuto personalizzato, diciamo che vogliamo aggiungere ancora di più. Oltre a qualcuno che crea post di blog e progetti di portfolio, diciamo che il cliente a cui è rivolto il sito è anche un fotografo e vuole mettere in evidenza le foto che ha scattato. Come potremmo aggiungere un tipo di contenuto personalizzato o un modello di contenuto personalizzato al nostro sito per supportare i dati di questa foto, interrogarli e quindi visualizzare le foto nella nostra applicazione front-end? Facciamolo dopo.

Quindi tornerò all'amministratore di WordPress qui e andremo a Content Modeler. Quindi siamo già stati sullo schermo una volta. Abbiamo dato uno sguardo ai progetti e alle testimonianze. Possiamo vedere che si tratta di modelli di contenuto personalizzati che sono stati creati per noi come parte di questo progetto. E posso fare clic su ognuno di questi e vedere che ognuno di questi modelli ha il proprio set di campi individuali.

Quindi i progetti, ad esempio, avrebbero questi singoli campi. E i progetti e le testimonianze si riflettono entrambi qui nella barra laterale. E poi i campi per ognuno di quelli. Se faccio clic su un progetto, quindi su uno esistente o vado su Aggiungi nuovo, in entrambi i casi, vedremo tutti quei campi riflessi qui. Quindi i nostri creatori di contenuti vedranno tutti i campi di cui hanno bisogno per inserire questi dati. Va bene.

Per il nostro contenuto personalizzato, tuttavia, abbiamo bisogno di un nuovo modello. Quindi andrò avanti e creerò un nuovo modello facendo clic su questo pulsante qui. Quindi chiamerò questa foto. E per un nome plurale, metteremo semplicemente una S alla fine e lo chiameremo foto. Questo identificatore API generato automaticamente, qui, questo ID, mi va bene. La foto mi sembra buona. Per la visibilità dell'API, questo vogliamo assicurarci di fare clic su pubblico, poiché vogliamo essere in grado di eseguire query per questi dati tramite GraphQL. Per la nostra icona modello, forse qualcosa come una macchina fotografica sarebbe appropriato per le foto. E ora farò clic su Crea.

Quindi, proprio così, è stato creato il nostro modello di contenuto fotografico. Quindi, a questo punto, dice scegli il tuo primo campo per il modello di contenuto. E a partire da questa registrazione, questi sono i tipi di campo supportati da Atlas Content Modeler. Per le foto che vogliamo inserire in questo sito, usiamo un paio di queste.

Diciamo che daremo un titolo a ciascuna delle nostre foto. Quindi dirò Titolo e poi lo chiamerò Titolo foto come identificatore API. Ed è così che sarà disponibile nello schema GraphQL. Ecco a cosa serve. E diremo che vogliamo usare questo come titolo della voce. E il testo a riga singola va bene. Quindi vai avanti e fai clic su Crea.

Per il nostro prossimo campo, diciamo che vogliamo catturare quell'immagine stessa per la foto. Quindi colpirò il vantaggio. E qui, creeremo un nuovo campo. Chiameremo questa immagine. E per il tipo, in realtà, dovremo selezionare Media, poiché sarà una foto. Quindi lo chiamerò immagine. E poi quaggiù, andrò avanti e imposterò questa come immagine in primo piano per ogni post. Quindi farò clic su quello e lo renderemo anche obbligatorio. Quindi sappiamo sempre che ci sarà. E quindi fare clic su Crea.

Ecco qua. Ecco il nostro secondo campo. Per il terzo, diamo una descrizione. Quindi colpirò il vantaggio. E per questo, questo sarà un campo di testo ricco. Quindi diremo descrizione e questo lo farà per quel campo. E poi l'ultimo che vogliamo è per i soggetti. Quindi useremo questo campo per catturare ciò che viene mostrato nella foto. Quindi, se si tratta di una foto di una catena montuosa al tramonto, per esempio, come sarà una delle nostre foto, alcuni dei soggetti nella foto potrebbero essere montagne, stelle, cielo, cose del genere. Solo un elenco di cose che sono presenti nella foto.

Ci sarebbero diversi modi per memorizzare questi dati. Potresti creare una tassonomia personalizzata, ad esempio, e quindi assegnare termini a ciascuna di queste cose. Quindi ognuna di queste foto potrebbe avere uno o più termini. Sarebbe un modo per farlo. Diciamo che per i nostri scopi, però, non siamo interessati a poter raggruppare le foto in base a qualcosa come un tag del genere o una tassonomia.

Invece, questo elenco è in realtà solo a scopo di visualizzazione sul sito. Il problema è che se premiamo il più qui, lo trasformiamo in un campo di testo, beh, allora ne otteniamo solo uno, giusto? E se ce ne fossero di più? Non sappiamo in anticipo quanti di questi soggetti potrebbe avere una determinata foto, giusto? Ed è qui che la funzionalità dei campi ripetibili di ACM diventa davvero utile. Quindi vediamo che aspetto ha.

Lo trasformerò in un campo di testo qui e lo chiameremo soggetti. E poi rendi questo campo ripetibile. Quindi questa è la chiave. Andremo avanti e faremo clic su di esso. E lo manterremo come un campo di testo a riga singola e faremo clic su Crea. Quindi, proprio così, il nostro modello di contenuto fotografico qui è stato creato. E possiamo vederlo nella barra laterale.

Quindi, se clicco qui su Foto, vedremo che ne ho una fittizia che ho creato in anticipo qui. Ma se creiamo Aggiungi nuovo, vedrai che questo riflette: i campi qui riflettono ciò che abbiamo aggiunto nel modello di contenuto. Quindi otteniamo un titolo. Abbiamo l'opportunità di allegare un'immagine. Abbiamo un campo rich text per la descrizione della foto, e qui un campo ripetibile per aggiungere uno o più soggetti.

Quindi vediamo cosa possiamo fare qui. Farò clic su Aggiungi immagine in primo piano. E ne sceglierò uno dalla mia macchina. Vediamo. E una volta terminato il caricamento, gli daremo del testo alternativo. Diremo, un fiore bianco, così, e fatto. Quindi c'è la nostra immagine. Torniamo indietro e diamogli un titolo, adesso, però. Diremo fiore bianco con bokeh. Proprio così. Per una descrizione, diremo che c'è un ottimo scatto di alcuni bei fiori bianchi. Proprio così.

E ora per i nostri soggetti, possiamo chiederci, cosa è presente nella foto qui? E forse possiamo... il fiore potrebbe esserlo. Fare clic su Aggiungi elemento. E c'è anche quell'effetto bokeh, con lo sfondo sfocato. E lo stelo o il ramo dell'albero, immagino, sarebbero nell'inquadratura, per un altro esempio. Quindi ne aggiungeremo alcuni qui. E se pensiamo di aver acquisito tutto, puoi andare avanti e premere Pubblica. Quindi ci siamo.

E poi tornando alle foto, avevo precedentemente creato questo. Le montagne sono belle. Dovrebbe essere impostato così. Quindi ottieni una foto di una catena montuosa. E poi ecco un bellissimo scatto di una catena montuosa con montagne, stelle, ombre. Alcuni argomenti che ha. Quindi questo ci darebbe almeno alcuni post con cui lavorare nella nostra applicazione front-end.

Quindi, a questo punto, abbiamo creato il nostro modello di contenuto nel back-end di WordPress per archiviare i dati di cui abbiamo bisogno per queste foto e abbiamo creato due nuovi post di foto da utilizzare per provare a consumare sulla nostra app front-end. E poi, ti starai chiedendo, beh, come faremo a estrarre questi dati da WordPress in modo da poterli utilizzare nella nostra applicazione front-end?

C'è una caratteristica molto interessante che Atlas Content Modeler mette in mostra per renderlo molto semplice. Quindi tornerò a Content Modeler qui e troverò il nostro modello di foto e cliccherò sull'icona del puntino con i puntini di sospensione qui. E andrò su Open in Graphical. Quindi, non appena faccio clic su questo, verrà composta una query per me che include questo modello di contenuto che abbiamo creato, le foto.

E prende i primi 10 di quelli, e poi include questo frammento GraphQL sotto che ha tutti i campi che avevamo creato, compresi quelli personalizzati. Quindi, se noterai, abbiamo aggiunto il titolo della foto, avevamo la nostra immagine, avevamo la descrizione e poi i soggetti. Quindi questo è molto utile per vedere come appaiono questi dati nello schema GraphQL. Quindi vai avanti e premi questo pulsante per eseguire questa query.

E puoi vedere cosa otterrebbe la nostra app JavaScript front-end se eseguisse esattamente la stessa query GraphQL. Restituirebbe le foto. E poi al suo interno ci sarebbe un oggetto chiamato array, chiamato nodi. E all'interno di quell'array ci sarebbero oggetti che assomigliano a questo. Ognuna di queste foto avrebbe un titolo, un'immagine e poi, più in basso, anche la descrizione ei soggetti.

Quindi questo è esattamente ciò di cui abbiamo bisogno. Quindi ora utilizzeremo molti di questi campi. Quindi siamo a posto, in termini di back-end WordPress e capacità di archiviare ed esporre anche questi dati fotografici. Quindi ora vediamo come possiamo usarlo nella nostra app JavaScript front-end.

Quindi torneremo laggiù. E penso che un buon punto di partenza per questo sarebbe guardare la pagina Portfolio, che è un elenco di progetti, giusto? Poiché si tratta di un elenco di post di modelli di contenuti personalizzati, e lo saranno anche le foto, queste due pagine hanno molto in comune. Quindi possiamo usarlo come una specie di punto di partenza.

Quindi cliccherò su Portfolio qui, e solo per ricordarci che aspetto ha. Ed è così, dove otteniamo questo elenco di progetti di portfolio. Quindi ora apriamo il codice e sporchiamoci un po' le mani. Rintracceremo questa pagina, che è quel progetto slash, e vedremo come è costruito.

Quindi all'interno di Source, andrò su Pages. E poi troverò Project. Eccolo. E apri il file index.js al suo interno. Quindi scorri un po 'verso il basso e vedremo che viene utilizzato questo hook di paginazione del nodo di utilizzo. E questo è un hook React che proviene da questa posizione qui, all'interno della cartella Hooks. E all'interno di questo, chiamiamo query.projects.

E query.projects ci consentirà di accedere ai dati sul tipo di post personalizzato dei nostri progetti, ovvero il modello di contenuto del nostro progetto che avevamo creato. Quindi chiameremo query.projects e quindi passeremo alcuni campi che vogliamo elaborare in anticipo, in modo che siano non appena la pagina viene caricata. Ecco cos'è questo array qui sopra. Quindi quei campi sono lì al primo caricamento della pagina.

E poi, una volta che siamo effettivamente pronti a rendere il contenuto di questa pagina, lo stiamo facendo. Abbiamo un componente SEO, un'intestazione e poi un piè di pagina in fondo. E poi la sezione principale della pagina qui è all'interno di questo tag principale, dove abbiamo l'intestazione, che è la sezione blu che viene inserita. E poi un wrapper div con il nostro elenco di progetti all'interno. E poi anche questo componente Carica altro, che si traduce in questo pulsante Carica altro in basso, su cui posso fare clic. E poi questo recupera più progetti e li inserisce nell'interfaccia utente.

Ecco come è costruita quella pagina. E come ho detto, mi piace usare questo come punto di partenza per noi. Quindi andiamo avanti e copiamo l'intero file, e qui imiteremo questa struttura di file. Quindi, all'interno di Pages, creeremo Photo. E poi all'interno di quella cartella, creeremo un file index.js. Va bene. E in questo nuovo file, incollerò il contenuto. Ma cambieremo alcune cose, dal momento che non siamo interessati ai dati dei progetti per questo, vogliamo i dati delle nostre foto. Quindi vediamo come possiamo farlo.

Quindi il nome di questa costante fa riferimento a progetti. Quindi andiamo avanti e rinominiamolo come primo passo. Possiamo dire che i nodi fotografici pre-passano i campi. Quindi andrà bene. Dovremo fornire il nostro elenco di campi. Forse per ora lasceremo solo l'ID del database e poi ne aggiungeremo alcuni tra un momento.

Più in basso, vediamo. Pre-pass fotografico. Oh, il nome è stato incasinato. Ci siamo. Quindi ora corrispondono di nuovo. Va bene. Invece di query.projects quindi, ricorda, vogliamo query.photos per il nostro tipo di contenuto personalizzato. Quindi vai avanti e aggiornalo per essere foto, proprio lì. Scorri un po' verso il basso.

Quindi questo componente progetti, questo non si applicherà più, dal momento che non lo stiamo usando. Quindi lo rimuoverò a questo punto e che ne dici di questo? Avremo solo... avremo solo H1. Dice Hello, just to get something rendering on the page here. E forse commenteremo anche di più.

Quindi eseguirò una ricerca per progetto per vedere se c'è qualcosa che ho dimenticato. Sì, solo alcuni commenti sul codice e poi questo componente qui che viene inserito e che non stiamo più usando. Quindi eliminerò quel componente. E penso che dovremmo essere bravi. Quindi non stiamo usando alcune di queste cose a questo punto, ma va bene. Lo faremo momentaneamente.

Quindi darò a questo un salvataggio e vedremo se riusciamo a ottenere quel rendering. Quindi ora sulla nostra app front-end, dovrei essere in grado di accedere a Foto, in questo modo. E ci siamo. Quindi ecco la nostra nuova pagina. Dice ciao e gran parte di esso sembra uguale alla nostra pagina dei progetti di portfolio, come l'intestazione in alto e il piè di pagina.

Ho notato che dice ancora portfolio, e probabilmente vorremmo scambiarlo. Quindi possiamo farlo molto brevemente. Quindi ecco il portafoglio. Diremo foto. E poi anche in questo punto, lo cambieremo in foto. Salvarla. Ci siamo. In modo che abbia aggiornato l'intestazione.

Ora analizziamo come possiamo effettivamente utilizzare quei dati, recuperare i dati delle nostre foto e visualizzare un elenco qui. Quindi, da dove iniziamo con quello? Come abbiamo visto in GraphQL o nell'amministratore di WordPress qui, questo è più o meno come sarà la nostra query. Avrà questi campi. Quindi facciamolo. Quindi il titolo della foto è il campo personalizzato. Ma in realtà, poiché impostiamo questo campo come titolo del post, potremmo usare solo title, dato che sarà– il titolo del post sarà lo stesso del campo personalizzato con questo nome. Quindi potremmo semplicemente usarlo.

Quindi in questo array, non solo inseriremo l'ID del database, ma otterremo il titolo per le nostre foto, immagine, descrizione e soggetti. Quindi aggiungiamo anche quelli. Immagine, descrizione e poi soggetto. Va bene. Avrai bisogno di virgole alla fine. Ci siamo. Quindi penso che siano tutti i nostri campi che vogliamo avere a disposizione proprio quando la pagina finisce. Quindi mi sembra buono.

E proviamo se possiamo effettivamente ottenere un rendering dei dati qui. Quindi sotto il nostro Hello H1 che abbiamo, facciamolo. Faremo JSON.stringify, e poi passeremo a quel qualcosa. Quindi faremo i dati qui e vedremo se possiamo ottenere il rendering dei dati sulla nostra pagina.

Quindi lo salverò e torneremo al nostro front-end. Ed eccolo lì, abbastanza sicuro. Quindi questo è un po' come appaiono i dati. Puoi vedere che lo stiamo recuperando con successo dal nostro back-end di WordPress. Abbiamo questo array di nodi, e quindi all'interno di quegli oggetti che rappresentano ciascuna delle nostre singole foto ed esattamente i dati che avevamo richiesto indietro, inclusi ciascuno dei singoli valori per il nostro campo soggetti ripetibili qui.

Quindi è fantastico. Questo è esattamente ciò di cui abbiamo bisogno. Rendiamo le cose un po' più pulite, beh, molto più pulite, immagino, rispetto al semplice sputare dati sulla pagina in questo modo. Invece di limitarci a questo pre tag qui, mappiamo ciascuno dei nostri dati e rendiamo una scheda sulla pagina per questo.

Quindi una cosa che mi piace fare è prima di presumere che abbiamo post da rendere, dobbiamo tenere conto del caso che forse non ce ne sono, giusto? Quindi una cosa che mi piace fare è in cima ai miei componenti, ho sempre foto, qualcosa del genere. E poi faccio data.nodes.length così. E faremo un punto interrogativo per il concatenamento facoltativo, perché non sappiamo se i dati esisteranno ancora.

E poi lo trasformeremo in un booleano come quello. Ciò significa che se a questo punto falliamo e i dati non sono definiti, questo verrà convertito in falso. Diremo che non abbiamo foto da renderizzare. Altrimenti, se riusciamo a eseguire il drill-down fino alla lunghezza di questo array, sarà zero, se non ci sono post, o uno o più. Quindi, se trasmettiamo quell'intero a un valore booleano, ci dirà se abbiamo o meno delle foto. Quindi se è zero, sarà falso. Se è uno o più, havePhotos sarebbe vero.

Quindi, con questa conoscenza, possiamo prendere alcune decisioni all'interno del nostro componente qui. Quindi cerchiamo di capire come possiamo farlo. Quindi dirò, se abbiamo delle foto, allora vogliamo renderizzare una cosa. Diremo... vediamo. Vogliamo fare data.photos e poi le mapperemo sopra. Quindi, per ogni foto, renderemo qualcosa.

Quindi restituiamo qualcosa di semplice all'inizio. Restituiremo il– vediamo. Faremo un H2, che ne dici, dato che sarà come una delle nostre carte. E poi diremo foto.titolo in questo modo. Va bene. Quindi mapperemo ciascuna delle nostre foto. E per ognuno di questi, restituiremo un H2 con il titolo di quella foto. Va bene.

Quindi tutto questo è ciò che vogliamo se abbiamo effettivamente delle foto da renderizzare. Ma per quanto riguarda l'alternativa, se non lo facciamo? Quindi avremo la nostra clausola else qui, e rendiamo qualcos'altro. Che ne dici di paragrafo. E diremo, nessuna foto da mostrare. Quindi ora, se lo salviamo, ci siamo. Quindi ora stiamo visualizzando i titoli dei nostri post qui.

Quindi rendiamo questa funzionalità un po' più completa qui. Diremo che vogliamo restituire qualcos'altro. Va bene. E per ognuno di questi, copierò solo alcuni stili, alcuni stili incorporati che ho scritto in anticipo qui, solo per risparmiarci il tempo di scriverli. Quindi avrò quel div wrapper. E poi al suo interno, possiamo ripristinare il nostro H2 che avevamo. Quindi incollerò un H2 con il titolo.

Dopo il titolo, che ne dici di mostrare la descrizione. Possiamo farlo dopo. Quindi sarà photo.description, così. Ma non possiamo renderla da sola, come all'interno di un contenitore, per esempio, proprio così. Se proviamo a farlo, questo non funzionerà del tutto per noi, perché l'HTML non sarà sottoposto a escape. Quindi, se lo salvo, puoi vedere ora che l'HTML sfuggito viene mostrato sulla pagina, che non è quello che vogliamo.

Quindi React ha un'utilità per lavorare con HTML che è sicura e non ha bisogno di essere sfuggita in questo modo. E questo è usare div e poi pericolosamente SetInnerHTML in questo modo. E puoi passargli un oggetto in cui una proprietà è doppia sottolineatura HTML.

E poi il valore a cui passi è la cosa che vuoi renderizzare senza scappare. Quindi per noi sarebbe photo.description, proprio così. E poi questo div può essere auto-vestito. Va bene. Quindi ora darò un salvataggio. Vedremo cosa otteniamo. Freddo. Quindi ora il nostro HTML non viene più sfuggito. Quindi mi sembra buono.

Quindi è fantastico. Che ne dici di quell'immagine in primo piano? Quello che potremmo fare è scriverlo da zero. Potremmo prendere l'URL dell'immagine in primo piano e avere un tag immagine e passarlo come URL. E poi il browser renderebbe un'immagine e la indirizzerebbe a quella fonte.

Tuttavia, questo progetto, se si scava in questa base di codice del progetto, in realtà ha un componente predefinito proprio per questo scopo chiamato immagine in primo piano. Quindi per noi sarebbe perfetto da usare. Quindi scorrerò un po' verso l'alto fino a dove stiamo importando una serie di componenti diversi dalla nostra directory dei componenti. E ne inserirò una alla fine qui chiamata immagine in primo piano, proprio così. Quindi ora possiamo eseguire il rendering della nostra immagine in primo piano ovunque lo desideriamo.

Proprio sotto dove si trova questo div con la nostra descrizione della foto, renderemo la nostra immagine in primo piano. E questo richiede un supporto per l'immagine. E quello che dobbiamo passare qui è l'intero nodo per questa immagine. Quindi per noi sarebbe photo.feauredimage.node, proprio così. E penso che questo dovrebbe fare il trucco per la nostra immagine. Quindi lo salverò e, abbastanza sicuro, ci siamo. Quindi, una volta che la nostra pagina viene ricaricata qui, ora abbiamo il nostro titolo, la nostra descrizione e quindi la foto stessa visualizzata. E allo stesso modo, anche per la nostra prossima foto, quell'immagine viene mostrata nell'elenco.

Quindi questo è bello. Stiamo facendo grandi progressi. L'ultima cosa è stata curare il nostro campo ripetibile per i soggetti presenti nella foto. Quindi quello che farò è creare un paragrafo qui e chiuderlo. E poi all'interno di questo tag di paragrafo, possiamo aprire alcuni ricci e fare la nostra stessa foto.soggetti. Ma ora vireremo alla fine dell'unione. E diremo a [INCOMPRENSIBILE] che vogliamo unirlo con una virgola, uno spazio, proprio così. E darò un salvataggio.

Quando avviene la nostra ricarica a caldo, dovrei essere in grado di scorrere verso il basso. E abbastanza sicuro, ci siamo. Quindi vengono mostrati nell'elenco. L'utente potrebbe non essere sicuro di cosa siano. Quindi forse nella nostra app, possiamo tornare indietro e aggiungere un'etichetta di qualche tipo, una piccola cosa precedente che dice Soggetti forse, così. Soggetti fiore, bokeh, ramo. E poi l'altra nostra foto qui ha soggetti montagne, stelle, ombre, giusto per fare un esempio.

Quindi ci fermeremo qui, ma puoi vedere quanto velocemente sono stato in grado di mettere insieme questa pagina. Immagino che dovremmo sbarazzarci del nostro ciao, mondo in cima. Non ne abbiamo proprio bisogno. O ciao parola. Quindi lo rimuoverò. Ci siamo. Quindi puoi vedere, come stavo dicendo, quanto velocemente siamo riusciti a metterlo insieme.

Semplicemente basando il nostro codice sulla pagina dell'elenco del portfolio, siamo stati in grado di creare la nostra pagina dell'elenco delle foto qui e quindi mappare ciascuna delle singole foto e accedere ai campi personalizzati di Atlas Content Modeler per essa: il titolo, la descrizione, l'immagine, e poi i nostri campi ripetibili per l'argomento qui. Quindi mi piacerebbe che tu ti sentissi potenziato da questo sui tuoi progetti.

Se vuoi prendere uno dei nostri progetti come questo enorme vantaggio iniziale che può portare a termine gran parte del tuo progetto per te, molto del lavoro di gamba fatto. E poi da lì, puoi fare qualcosa di simile a quello che abbiamo fatto in questo discorso. Puoi personalizzarlo ulteriormente e aggiungere le tue personalizzazioni e altri modelli di contenuto e così via.

Grazie mille per aver guardato. Spero che questo discorso sia stato davvero utile e ti abbia dato un'idea di tutte le fantastiche funzionalità che sono state emerse e continueranno a emergere nell'ecosistema Atlas.

PRESENTATORE: E questa è una conclusione per DE{CODE} 2022. Spero che tu l'abbia trovato d'ispirazione e che te ne vada con più esperienza su WordPress e nuove connessioni con la community. Cerca i contenuti registrati sul sito da venerdì per recuperare tutto ciò che potresti aver perso o guardare di nuovo un video.

Voglio ringraziare i nostri partner sponsor: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios e 10Up. Un enorme grazie per aver donato alla nostra raccolta fondi DE{CODE}. Apprezziamo molto la tua generosità.

Ora, per tutti coloro che hanno interagito con noi nel nostro hub per i partecipanti e nelle nostre sessioni, selezioneremo i primi tre vincitori e ti faremo sapere come richiedere il tuo premio alla fine di DE{CODE}. Non vediamo l'ora di rivederti ai nostri eventi futuri, di persona o virtualmente. Non vediamo l'ora di offrirti di più sulle ultime tendenze di sviluppo di WordPress e su come implementarle per creare siti WordPress più velocemente.

Questo è tutto da parte mia. Grazie mille per esserti unito a noi e abbi cura di te.