Come costruire il tuo primo progetto WordPress senza testa con ACF + WPGraphQL

Ognuno ha i propri strumenti preferiti quando si tratta di sviluppare WordPress e l'idea di costruire un sito headless senza questi strumenti può essere scoraggiante. Fortunatamente, due strumenti preferiti dagli sviluppatori di WordPress, ACF e WPGraphQL, possono aiutarti a immergerti nello sviluppo headless.

In questa sessione, Jeff Everhart, sostenitore dello sviluppatore senior di WP Engine, mostra i dettagli dell'infrastruttura costruendo un sito dimostrativo in pochi minuti utilizzando Atlas!

Slide della sessione:

Trascrizione:

JEFF EVERHART: Che succede, gente? Mi chiamo Jeff Everhart, uno sviluppatore senior sostenitore qui a WP Engine. Grazie mille per esserti unito al mio discorso di oggi sulla creazione del tuo primo progetto WordPress headless con ACF e WP GraphQL. Prima di iniziare a costruire, mi piace sempre fornire un contesto su cosa sia WordPress headless. Sembra che senza testa stia diventando meno un termine di nicchia e più mainstream, quindi cercherò di mantenere la spiegazione breve.

Headless WordPress al suo interno consiste nell'usare il CMS di WordPress attraverso un'API per alimentare qualche altro tipo di applicazione. Se osserviamo il diagramma in questa diapositiva, quando un utente richiede site.com/page, invece di lasciare che WordPress gestisca quella richiesta, un'applicazione JavaScript risponde a quel percorso. Esamina il percorso, determina di quali dati ha bisogno da WordPress o da altre fonti, effettua le chiamate API e genera una risposta per l'utente.

È importante notare che ciò che è in quello slot di runtime di Node.js potrebbe davvero essere un numero qualsiasi di diversi tipi di applicazioni o client. Abbiamo visto vari esempi di app mobili o siti Web creati con tutti i framework più popolari che utilizzano questo modello con grande successo. Ora che hai una buona idea di cosa sia Headless WordPress, esaminiamo lo stack tecnologico che useremo per il progetto di oggi.

Al nostro livello più arretrato, utilizzeremo WP GraphQL come nostra API. WP GraphQL trasforma il tuo backend WordPress in una potente API GraphQL. Applica tutti gli stessi controlli di sicurezza di ruolo e capacità che fanno WordPress nativo e l'API REST principale. WP GraphQL è un'ottima scelta per lo sviluppo di applicazioni senza testa perché utilizzando il suo linguaggio di query dichiarativo, possiamo eseguire query per diversi tipi di contenuto in tutta quella creazione di contenuti. Quindi ottenere post, pagine con le loro categorie tutti nella stessa richiesta.

Ora, vediamo come possiamo strutturare e modellare alcuni dati più complessi utilizzando il CMS di WordPress. Molti sviluppatori che si avvicinano a progetti senza testa devono modellare e archiviare dati diversi, giusto? Si estende oltre i post o le pagine tipiche di WordPress. ACF o campi personalizzati avanzati è un ottimo strumento per modellare quei campi personalizzati. In una prossima versione, diventerà ancora più potente consentendoti di registrare tipi di post e tassonomie direttamente nell'interfaccia utente nella versione gratuita di questo plugin.

Rende facilmente disponibili tutti i dati tramite l'API REST, ma sarà necessario installare un'estensione WP GraphQL per aggiungere alcuni di quei dati di campo al nostro schema GraphQL. Personalmente, sono davvero entusiasta di vedere questo plugin evolversi man mano che diventa più potente per gli sviluppatori senza testa.

Ora che possiamo modellare dati complessi e interrogarli tramite WP GraphQL, abbiamo bisogno di un modo per creare quelle moderne esperienze web per i nostri utenti, supportando anche gli editor di contenuti che già conoscono e amano WordPress. È qui che entra in gioco Faust. Faust è un framework in due parti composto da un plugin per WordPress e un framework JavaScript basato su Next.js. Lavorano insieme per rendere la creazione di siti WordPress headless facile e intuitiva.

Aggiunge il supporto per cose come le anteprime dei post e l'autenticazione pronta all'uso e puoi appoggiarti a un'esperienza gerarchica di modelli WP reinventata nel moderno JavaScript. Faust.js mira ad essere una piattaforma molto estensibile e viene fornita con un sistema di plug-in e una barra di amministrazione che puoi utilizzare per personalizzare e creare esperienze che supportano il tuo particolare caso d'uso.

Ultimo ma non meno importante, avremo bisogno di alcuni modi per lavorare con questi strumenti a livello locale e in produzione. Utilizzando la migrazione locale e WP, ho raccolto tutte le risorse di WordPress di cui avrai bisogno per questo progetto in un singolo file zip che puoi trascinare e rilasciare in locale per iniziare. Una volta che abbiamo finito di costruire il nostro sito, possiamo trasferire il nostro lavoro sulla piattaforma Atlas. Atlas WP Engine è la soluzione di hosting headless all-in-one che combina il tuo back-end WordPress e un container Node.js, tutti ottimizzati per lavorare insieme disponibili attraverso un'unica dashboard senza interruzioni.

Quindi, ora che hai una buona conoscenza di tutti gli strumenti che useremo nella presentazione di oggi, entriamo subito e iniziamo a costruire. Apri l'URL in questa diapositiva per accedere al codice demo nel browser. Ho cercato di rendere questa esperienza il più semplice possibile da seguire, ma copriremo molto terreno nei prossimi 25 minuti, quindi sentiti libero di guardare ora e fare riferimento a questo repository GitHub e al registrazione di questa sessione in un secondo momento per continuare a lavorare dopo la conferenza. Se il resto della decodifica è uno spettacolo automobilistico, allora questa sessione riguarda la costruzione di motori. Gioco di parole totalmente voluto.

Ora che abbiamo aperto il repository GitHub, iniziamo. La prima cosa che ti consiglio di fare è creare un fork di questo repository nel tuo account. Se dai un'occhiata a ciò che è contenuto in questo repository, vedrai un mucchio di codice di esempio e alcune istruzioni passo passo nel readme per tutto ciò che faremo in questa presentazione. In effetti, faremo molto copia e incolla direttamente da questo repository nel tuo progetto. Per clonarlo localmente, andiamo avanti ed eseguiamo il comando Git clone all'interno del tuo terminale.

Ci vorrà solo un secondo per il download, quindi una volta scaricato il progetto, andiamo avanti e cambiamo la nostra directory in quella directory del progetto. Da lì, eseguirò un comando per aprire questo progetto in VS Code, ma dovresti sentirti libero di usare qualsiasi editor di codice che desideri. Poiché VS Code ha già un terminale integrato, posso ripulirlo e poi andare avanti e chiudere iTerm. E ora, possiamo passare alla localizzazione del nostro sito locale WordPress. Per fare ciò, apriremo questo progetto in Finder e quindi individueremo il file zip demo WP senza testa che ho preparato per te.

Trascineremo il file zip direttamente nell'ambiente di sviluppo locale e local avvierà il processo di decompressione e bootstrap del tuo sito demo WordPress per te. Possiamo praticamente attenerci alle impostazioni predefinite, quindi in locale ci vorranno solo pochi minuti per creare un nuovo sito WordPress. Ora, questa è una grande funzionalità di WP migrate pro che mi consente di esportare qualsiasi sito come zip e trascinarlo direttamente in locale in modo da poter portare un sito di produzione sul mio computer locale molto rapidamente, indipendentemente dalla piattaforma.

Una volta terminata l'installazione, potresti voler andare avanti e fidarti di questo certificato SSL, quindi andremo avanti e apriremo questo progetto in WP Admin. Da lì, andremo avanti e ridurremo a icona local, dato che è già in esecuzione e non abbiamo davvero bisogno di fare nient'altro con esso. Quindi, da lì, apriremo il nostro repository, dove troverai un nome utente e una password di amministratore che ho già creato per questo sito demo. Dovresti essere in grado di utilizzare tali credenziali per procedere e accedere alla dashboard di WP Admin. Da lì, ci vorrà solo un secondo per trovarci con questa installazione locale di WordPress.

La prima cosa che faremo è dare un'occhiata ai plugin installati con questo sito WordPress. Vediamo cose come campi personalizzati avanzati per la modellazione dei dati. Abbiamo falli per abilitare alcune delle nostre capacità senza testa, WP GraphQL per agire come un'API per il nostro sito, e quindi WP GraphQL per l'estensione ACF per far emergere alcuni dei gruppi di campi ACF. Ora diamo un'occhiata anche ai post. Se guardi tutti i diversi post demo che ho precompilato all'interno di questo progetto, possiamo vedere che abbiamo un numero di post diversi con un sacco di categorie diverse.

Se diamo un'occhiata al contenuto all'interno di ogni post, vedremo che abbiamo un sacco di contenuto del corpo, alcune immagini, immagini in primo piano e alcuni gruppi di campi ACF che abbiamo già creato e precompilato. Quindi diamo un'occhiata ai gruppi di campi in modo più dettagliato. Se apriamo il menu ACF, vedrai che abbiamo creato due gruppi di campi: risorse alimentari e dolci mixtape. Diamo prima un'occhiata alle risorse alimentari.

Questo è solo un gruppo di campi molto semplice con due singoli campi: testo e URL. Per ognuna di queste cose, ho selezionato l'opzione Mostra in GraphQL in modo che appaiano in GraphQL. Quindi ho anche controllato quell'opzione a livello di gruppo di campi. Inoltre, ho una logica condizionale per determinare quando rendere questi post, quindi se la categoria del post è uguale al cibo. E diamo un'occhiata a che aspetto ha il dolce mixtape.

Vedremo che questo sembra abbastanza simile alle nostre risorse alimentari e che abbiamo un paio di campi diversi. Ognuno ha l'opzione Mostra in GraphQL selezionata, oltre a quella selezionata anche a livello di gruppo di campi. Possiamo vedere che ci sono un paio di impostazioni diverse fornite dall'estensione WP GraphQL di cui potremmo non aver bisogno. Inoltre, possiamo vedere che lo stiamo visualizzando in modo condizionale anche in base alla categoria del post.

Quindi ora, diamo un'occhiata a WP GraphQL e cosa ci offre in termini di strumenti. Se apriamo il menu GraphQL, verremo trascinati all'interno dell'IDE grafico. Ora, questo è un ambiente di sviluppo interattivo che ti consente di creare query utilizzando WP GraphQL. Possiamo specificare che vogliamo, diciamo, i primi 10 post con le categorie e includere qui anche i nostri campi ACF aggiuntivi. Quando facciamo clic sul pulsante Esegui, otteniamo dati in tempo reale dal nostro sito WordPress che corrispondono ai dati in quella query.

Se vogliamo, possiamo aprire la finestra Query Composer e comporre visivamente gli aspetti della nostra query. Quindi questo è uno strumento davvero utile se non sei sicuro di quali particolari campi o dati potrebbero trovarsi su un particolare oggetto WordPress. Puoi utilizzare Query Composer per esplorare ed eseguire tali query in tempo reale. Passiamo ora alla configurazione di Faust aprendo il menu delle impostazioni di Faust. Come ho detto nel discorso introduttivo, Faust è in realtà un framework in due parti che consiste in un plug-in di WordPress e la tua base di codice front-end.

Quindi, se torniamo al menu delle impostazioni del plug-in di WordPress, possiamo vedere che abbiamo impostato questa opzione per l'URL del sito front-end, che punterà all'indirizzo del nostro sito front-end. Subito sotto, nell'opzione della chiave segreta, andremo avanti e faremo clic su rigenera per generare una chiave univoca che puoi utilizzare per il tuo progetto demo. Da lì, torniamo effettivamente alla base di codice JavaScript ed eseguiremo questo comando per copiare un file di variabile d'ambiente di esempio in uno che possiamo utilizzare con il nostro sito.

Dopo averlo eseguito, apri il comando .env.localfile e apporteremo un paio di modifiche. La prima cosa è che sostituirà la prossima opzione dell'URL pubblico di WordPress con la posizione del tuo sito locale. Quindi ACF.WPEngine.local. E poi prenderemo anche quel valore di chiave segreta e lo useremo per la nostra chiave segreta Faust. Assicurati di voler decommentare anche questo, e quindi l'ultima variabile di ambiente è davvero utile solo per il test e lo sviluppo locale in modo da poter appianare eventuali problemi SSL che potresti avere durante la connessione all'ambiente di sviluppo locale.

Da lì, vorremo eseguire NPM Install per installare tutte le dipendenze del nostro progetto, quindi, una volta fatto, possiamo dare il via ed eseguire NPM Run Dev per avviare il nostro progetto. Ci vorrà solo un secondo per compilare, ma una volta fatto, possiamo aprire localhost:3000 nel browser e dovremmo vedere il nostro sito Faust in azione.

Una volta eseguito il rendering, puoi vedere che Faust sta già gestendo un po' di magia per noi. Se guardiamo quel menu in alto a destra, possiamo vedere che sta già estraendo pagine e contenuti dai nostri menu che abbiamo definito nel nostro backend di WordPress, e se torniamo al nostro WordPress Admin, possiamo guardare come funziona questa connessione in modo un po' più dettagliato.

Poiché il plug-in Faust conosce l'indirizzo del nostro URL front-end, riscrive molti collegamenti, come quelli di anteprima in modo che quando li apri nel browser, si aprono nell'URL del sito front-end, in modo che tu stai ricevendo un'anteprima dal vivo di come appariranno i tuoi contenuti sul front-end.

Ora, facciamo un tuffo più profondo nella struttura del nostro progetto Faust JavaScript. Se hai familiarità con il lavoro in Next.js, probabilmente hai utilizzato la directory della pagina per creare componenti di pagina che implementano i tuoi percorsi. Puoi ancora farlo in Faust, ma si basa su questo concetto fornendo un percorso catchall chiamato nodo WordPress che ti consente di prendere qualsiasi URI gestito da WordPress e risolverlo in un particolare contenuto.

Quindi otteniamo alcuni dati aggiuntivi su quell'elemento di contenuto e li trasmettiamo attraverso i nostri componenti in modo da poter risolvere quel singolo contenuto in un particolare modello nella cartella dei modelli WP. Questo è molto simile al concetto di gerarchia dei modelli e ai temi tradizionali di WordPress e a molte delle convenzioni di denominazione. Corrisponde ad esempio, frontpage.js è la prima pagina del nostro sito Web, mentre page.js è responsabile del rendering delle cose del tipo di contenuto della pagina. E single.js è lì per rendere singoli post.

Ora, iniziamo e rendiamo il nostro frontpage.js un po' più dinamico. OK . Quindi, per iniziare, apriremo il nostro file front page.js e ci concederemo un po' più di spazio per lavorare. Quindi, se guardiamo al contenuto di questo file, possiamo vedere che ci sono tre parti principali. C'è il componente stesso che rendiamo, una proprietà di query che viene collegata al componente, e questa viene eseguita ogni volta che eseguiamo il rendering del componente, e poi alcune variabili che possiamo passare in fondo.

E come puoi vedere, ci sono due modi davvero principali per usarlo. O usando l'hook di query use all'interno del componente, oppure può essere passato come oggetti di scena nel componente stesso, e lo vedrai in un esempio più avanti. Quindi torniamo al repository e iniziamo con il passaggio 2.1 per aggiornare la query per il nostro frontpage.js. Quindi lo copieremo, quindi torneremo nell'IDE grafico e giocheremo lì per un secondo. Quindi questa query che abbiamo negli appunti dovrebbe ottenere i primi 10 post e ottenere un paio di dati associati a ciascuno di quei post.

E quindi se facciamo clic lì e lo eseguiamo, vediamo che tutto funziona alla grande. E quindi vorremo andare avanti e aggiungerlo alla nostra proprietà di query del componente. Quindi troveremo un buon posto per farlo e lo incolleremo lì dentro, e faremo un po' di riformattazione. E quindi ciò che fa è aggiungere questa singola parte della query a quella query stessa. Quindi dobbiamo ancora rendere disponibili i risultati di quella query al resto del nostro componente, quindi andremo avanti e aggiungeremo questa riga aggiuntiva che estrae semplicemente il risultato del post in una variabile con cui possiamo lavorare.

Ora, il passaggio successivo per rendere dinamica questa home page è in realtà la creazione di un componente per il rendering di quegli estratti di post. Quindi lo faremo e creeremo un paio di file nella cartella dei componenti, e menzionerò qui che– vado avanti e creo un postexcerpt.js all'interno di una cartella di estratti di post, e io' In realtà sto solo duplicando la struttura dei componenti esistenti che fanno parte di questo progetto introduttivo di Faust.js. Sei davvero libero di fare quello che vuoi qui, e sto solo seguendo il framework poiché è già stato definito per me come parte di questa guida introduttiva.

Quindi, una volta che avremo tutti e tre questi file, inizieremo ad aggiungere alcune cose per renderizzare quei post. Quindi la prima cosa che faremo è inserire del contenuto nel componente dell'estratto del post. E quindi lo copieremo e incolleremo semplicemente dal nostro repository, e possiamo vedere che stiamo importando quel file module.css. E abbiamo una funzione chiamata post excerpt che è il nostro componente che assaggia un prop che è il post, poi stiamo rendendo una sezione, con un collegamento che andrà direttamente a quell'URI del post, rendendo il titolo. Poi laggiù, abbiamo anche i riquadri delle categorie che stiamo visualizzando, e quindi usando pericolosamente set nel nostro HTML per impostare il contenuto HTML per l'estratto del post.

Ora, una volta che tutto ciò che è fantastico e salvato, lo salveremo, ma entreremo anche qui e aggiungeremo questo stile con ambito aggiuntivo al nostro componente per modellare quei tag span per le nostre categorie, e poi ci limiteremo a esegui un po 'di importazione ed esportazione all'interno del file index.js per portarlo da un'esportazione predefinita a un'esportazione con nome e salveremo tutte queste cose. E poi l'ultimo passaggio per renderlo disponibile per l'uso in altre cose è aggiungere un'altra riga di esportazione al file index.js della nostra cartella dei componenti. E ora che l'abbiamo fatto, se torniamo alla home page, frontpage.js, dovremmo essere in grado di aggiungere un'ulteriore importazione alla nostra dichiarazione di importazione esistente per utilizzare il nostro estratto del post.

Ora, vorremmo trovare un posto per implementarlo, e se scendiamo e guardiamo all'interno del nostro elemento principale, vediamo che abbiamo delle cose proprio sotto l'eroe: quello che faremo è semplicemente copia e incolla parte del codice nel repository e sovrascrivi cosa c'è dentro quel main con l'uso del nostro estratto del post. E faremo solo un po' di riformattazione per smussare alcune cose, ma puoi vedere lì che quello che stiamo facendo è all'interno di quel contenitore, mapperemo attraverso la serie di post che abbiamo ricevuto come risultato della nostra query e quindi restituiamo un componente dell'estratto del post in cui passiamo il post e gli diamo una chiave.

E poi se andiamo avanti e salviamo tutto questo e lo rendiamo nel browser e lo aggiorniamo, dovremmo vedere che abbiamo una grande home page dinamica. Sì, ognuno di questi titoli ha un collegamento cliccabile, così come i riquadri delle singole categorie. E se facciamo clic, possiamo vedere che grazie ai vantaggi dei modelli che già esistono in Faust, tutto il nostro contenuto dei post viene già visualizzato, anche se mancano alcuni di quei gruppi di risorse che abbiamo creato utilizzando ACF. Quindi, se facciamo clic su un secondo post, possiamo vedere che uno viene visualizzato alla grande così come tutti i collegamenti di categoria predefiniti che sono: stiamo solo usando quegli URI di categoria per appoggiarci a Faust nel rendering di quel modello JS di categoria .

Ok, ora che abbiamo una home page dinamica, passiamo a visualizzare quei campi ACF sul nostro modello single.js. Quindi vai avanti e ripulisci il nostro editor di codice, quindi possiamo aprire il file single.js e dare un'occhiata a cosa c'è dentro. Sappiamo che a quel livello superiore, abbiamo questa funzione componente che stiamo esportando che in realtà accetta oggetti di scena e la proprietà component.query che ha una query GraphQL dinamica che sta leggendo alcune di quelle variabili che otteniamo dalla query seme.

E quello che alla fine vorremo fare alla fine è visualizzare alcune di quelle diverse risorse di post nella parte inferiore del contenuto del nostro post. Quindi torno nel repository e scorro verso il basso fino al passaggio 3.1, dove aggiorniamo la singola query post, e daremo un'occhiata a questo perché inizia a inserire sia il dolce mixtape che i gruppi di campi delle risorse alimentari che abbiamo creato in il passo precedente. Se prendo quella query e la copio e incollo in grafica, vado avanti e codifico un ID del database per un post e rimuovo solo un paio di quelle cose diverse che non abbiamo bisogno come As Preview e quell'altro frammento .

Se vado avanti e lo eseguo, vedremo che ottengo alcuni dati che contengono davvero ciò che mi aspetterei. Il contenuto, restituisco l'autore e restituisco, cosa importante, sia quei gruppi di campi che i loro dati. Quindi vado avanti e copio quella query e torno in single.js. Da lì, sostituirò davvero quella parte della query con ciò che ho dai miei appunti. Possiamo solo andare avanti e salvarlo. Puoi riformattarlo se vuoi, ma questo è indipendente dagli spazi bianchi, quindi penso che per la maggior parte vada bene.

Quindi da lì, vorremo fare la stessa cosa che abbiamo fatto nell'ultimo passaggio, dove l'abbiamo reso parte della nostra query. Ora, vogliamo assicurarci di rendere disponibili queste variabili all'interno del nostro componente. Quindi li aggiungeremo a quella dichiarazione di strutturazione, e poi in aggiunta, dato che abbiamo un paio di categorie diverse per i nostri post, vogliamo creare alcune cose booleane per aiutarci a determinare se dobbiamo o meno mostrare risorse alimentari o dolci mixtape. Perché come puoi vedere lì, non importa cosa otteniamo entrambi, e se non c'è niente da trovare per i dolci campi di mixtape, quelli tornano come nulli. Quindi vorrò fare un controllo condizionale lì, quindi aggiungerò queste due righe di codice al nostro file.

E ciò che fa fondamentalmente è che ci crea alcune variabili booleane che possiamo usare in basso per il rendering condizionale dei modelli. In questa cosa, esaminiamo i nodi per ogni categoria e quindi sostanzialmente li filtriamo per determinare se contengono o meno cibo o musica, quindi controlliamo la lunghezza. Probabilmente ci sono molti modi in cui potresti implementare questo tipo di variabile booleana, quindi sentiti libero di cambiarlo se hai un modo più pulito per farlo, ma per i nostri scopi qui, penso che funzionerà bene.

Ora, il passaggio successivo è che vorremo effettivamente, come nel passaggio precedente, creare alcuni componenti aggiuntivi. Quindi vado avanti e all'interno del mio file dei componenti vado avanti e creo un componente delle risorse alimentari. Quindi creerò una cartella e poi un file food resources.js al suo interno e, insieme a questo, creerò un file index.js e un file di moduli CSS. E ora quel file dei moduli SCSS è davvero utile perché ci consente di estendere i nostri stili a quel particolare componente. Quindi sembra una sintassi funky per farlo, ma alla fine è un risultato davvero pulito perché non dobbiamo scrivere un mucchio di classi e cose del genere.

Quindi inizierò a copiare e incollare il codice del componente dal repository direttamente in quei file. Possiamo vedere che abbiamo una funzione per le risorse alimentari che prende due oggetti di scena, il nome della ricetta e il link della ricetta, quindi li rendiamo al di sotto della nostra bella età con l'emoji del burrito. Copiamo e incolliamo anche alcuni stili di file SCC in questa particolare cartella, quindi ci assicuriamo di esportarli dalle cartelle dei componenti index.js. E proprio come nell'esempio precedente, vorremo andare avanti ed esportare anche questo nella index.js della nostra cartella dei componenti in modo da poter avere un gruppo davvero carino da importare, come hai visto direttamente da quei componenti cartella altrove in alcuni di questi diversi file.

Quindi, una volta aggiunto questo, rivolgeremo la nostra attenzione al componente delle risorse musicali e faremo la stessa cosa. Andremo avanti e creeremo la stessa struttura di file. Quindi la cartella delle risorse musicali e un file musicresources.js al suo interno. Quindi andremo avanti e creeremo un file index.js per esportarlo e quindi anche il nostro file musicresources.module.scss per quegli stili di ambito.

Quindi, una volta che avremo tutta quella roba, faremo la stessa cosa che abbiamo fatto per le nostre risorse alimentari e semplicemente copiamo e incolliamo parte di questo codice dal repository. Possiamo vedere che questo componente sembra quasi identico. Abbiamo risorse musicali. Questo in realtà ha tre oggetti di scena invece di due, ma avevamo tre campi in questo gruppo di campi, ma la convenzione styles.component è la stessa. E stiamo solo facendo un rendering leggermente diverso perché abbiamo contenuti diversi.

Quindi, da lì, aggiungeremo anche il nostro codice SCSS e ci assicureremo di esportarlo dalle cartelle dei componenti index.js e poi lo importeremo anche nella nostra cartella qui, e penso di averlo effettivamente fatto– rinominiamolo molto velocemente e assicurati solo che tutti i nostri nomi abbiano un bell'aspetto, in modo che il nostro index.js e i componenti trovino le nostre risorse musicali e tutto il resto sia fantastico. Quindi ora andremo avanti e chiuderemo tutte queste schede estranee perché siamo pronti per implementare effettivamente quei componenti nel nostro file single.js.

Quindi, per farlo, aggiungeremo semplicemente questi due componenti alla nostra dichiarazione di importazione esistente, che già li riconosce automaticamente, e troveremo un buon posto per farlo. E quindi abbiamo questo componente wrapper di contenuto quaggiù. E così in questo momento, stiamo passando il contenuto, ma in realtà accetterà facoltativamente anche i bambini. Quindi possiamo passare il contenuto ma anche passare alcuni componenti figlio direttamente a quel wrapper di contenuto, in modo che venga visualizzato in quel bel spazio orizzontale che abbiamo già e tutto sia allineato.

Quindi è quello che faremo, e poi copieremo e incolleremo quel codice lì dentro e lo riformatteremo e parleremo di cosa sta succedendo in questo particolare esempio. Quindi, proprio all'interno di quel componente wrapper di contenuto, stiamo usando quelle variabili booleane is food e is music per eseguire il rendering condizionale, tuttavia, dei componenti delle risorse corrispondenti. Quindi, se il cibo è vero e questo post è nella categoria del cibo, lo renderemo. E se è musica, faremo la stessa cosa. E lì, puoi vedere che stiamo passando tutti i diversi oggetti di scena necessari per renderlo.

E se torniamo indietro e aggiorniamo una delle nostre pagine modello single.js, possiamo vedere che le nostre risorse alimentari vengono visualizzate proprio come ci aspetteremmo e quel collegamento funzionerebbe in modo appropriato se torniamo in WP Admin o nella nostra casa pagina. E se ne troviamo uno e la categoria cibo o musica, possiamo aprire Kinfolk Synth DIY e vedere come appare il nostro componente di risorse musicali, e tutto ciò che sembra fantastico. E se ne troviamo uno che è effettivamente in entrambe le categorie, possiamo vedere che in realtà, in fondo, rende entrambi questi componenti proprio come ci aspetteremmo.

OK. Quindi, ora che abbiamo il nostro sito nel modo in cui lo vogliamo, passiamo a parlare di come implementare questo sito. Ora, ho una sezione del repository GitHub creata per noi e, in realtà, ho creato un ramo distribuito completamente separato nel ramo finale. Quindi l'esecuzione del check out di Git è terminata, te lo daremo. E puoi anche distribuire quel ramo direttamente su Atlas, che è la soluzione di hosting WordPress headless di WP Engine.

Ciò ti offre sia un'installazione di WordPress che un contenitore Node.js e puoi registrarti per un account sandbox gratuito semplicemente facendo clic su questo pulsante nella pagina di destinazione di Atlas. Portati in un forum davvero veloce e, come puoi vedere, il prezzo è zero. Potresti comunque dover inserire una carta di credito che usiamo solo per scopi di prevenzione delle frodi, ma puoi avere un account gratuito per giocare con tutto questo per testarlo, per imparare senza testa secondo il desiderio del tuo cuore. Quindi andrò avanti e aprirò la dashboard di WP Engine per iniziare a distribuire questo sito su Atlas.

La prima cosa che farò in realtà è aprire il mio elenco di siti e aprirò il mio sito WordPress di produzione. Quindi, in realtà, questo sito senza testa ACF che vedete proprio qui, dove aprirò l'amministratore di WP in una nuova finestra, è il sito principale per il file zip che state usando tutti localmente. Quindi ne ho creato uno zip usando l'esportazione WP, ed è quello che userò per la mia distribuzione di produzione.

Da lì, farò clic sulla scheda Atlas e quindi su Crea app. E mi viene presentata questa opzione. Sceglierò Pull From Repo, quindi fare clic su Continua. E se non mi sono autenticato con GitHub, è qui che lo faresti, ma dato che lo sono già, posso semplicemente andare avanti e selezionare il mio repository. Quindi andremo avanti e selezioneremo il repository che stiamo usando per questo progetto, faremo clic su Continua, quindi distribuirò la mia app in US Central.

Da qui, mi permette di scegliere un ramo e, come ho detto, userò Finished. Ci sono anche opzioni se stai usando un monorepo, cosa che non stiamo facendo, e lascerò selezionata l'installazione di Ho la mia installazione di WordPress e cerca il mio sito senza testa ACF. Ora, qui, vorrò, in realtà, invece di usare un file .env, vorrò copiare due variabili d'ambiente dal mio progetto di file.

Quindi il primo è il prossimo URL pubblico di WordPress. Quelle sono le stesse variabili d'ambiente che abbiamo impostato nel nostro progetto locale, e copierò lì il link alla mia installazione di WordPress di produzione. Quindi aggiungerò un'altra variabile d'ambiente, e questa sarà per la nostra chiave segreta Faust. Quindi vado avanti e lo copio dal menu Impostazioni Faust, lo inserisco e imposto la chiave per quello su Faust Secret Key.

E una volta fatto, posso andare avanti e fare clic su Crea app e Atlas inizierà il processo di creazione e distribuzione della mia app. Durante il processo di compilazione di Atlas, eseguirà l'installazione di NPM e il tuo comando di compilazione NPM per qualsiasi framework tu stia utilizzando. E poi, una volta che tutto quel codice è stato creato, distribuirà quel contenitore Node per te sulla nostra rete. E così, una volta che tutto questo gira solo per un secondo, dovremmo ricevere un messaggio di successo, quindi possiamo fare clic sull'URL che ci è stato fornito e guardare effettivamente il nostro sito dal vivo.

Quindi riceveremo il nostro messaggio di successo, quindi potremo andare avanti e aprire questo URL in un'altra scheda. E lì possiamo vedere che il nostro sito ha esattamente l'aspetto che aveva a livello locale, e sta raccogliendo tutti i dati corretti, tutte le immagini corrette e sta persino risucchiando tutto il nostro contenuto ACF. Alcuni dei nostri post sembrano davvero fantastici e le nostre prestazioni molto elevate su Atlas: in realtà sto usando alcune immagini davvero grandi qui, quindi se vedi un po 'di lentezza, è sicuramente dovuto alle mie scelte.

La piattaforma Atlas è piena zeppa di funzionalità che i moderni sviluppatori JavaScript apprezzeranno. Purtroppo, non c'è abbastanza tempo in questa presentazione per esaminarli tutti in dettaglio.

Ma Atlas fa davvero un buon lavoro nel riunire dettagli importanti sia dalla parte front-end che da quella back-end del tuo ecosistema headless in un'unica comoda dashboard, dove puoi guardare i singoli registri di build e l'output della build, esaminare le distribuzioni, le variabili di ambiente che hai usato per una particolare build, oltre ad avere accesso a impostazioni o funzionalità aggiuntive che è possibile abilitare, come gli ambienti di anteprima, in cui è possibile creare un ambiente aggiuntivo per ogni PR creato sul repository GitHub o creare webhook dell'ambiente per ricostruire parti particolari di la tua app o CDN mentre apporti modifiche a WordPress.

Tutte queste cose diventano possibili con la piattaforma Atlas e abbassa davvero la barriera per iniziare a costruire con WordPress headless.

Oh. Congratulazioni, come ho detto, era molto da coprire in 25 minuti. Sentiti libero di continuare a esercitarti dopo la presentazione e contattami se hai domande su come iniziare con le risorse demo. Se sei interessato a saperne di più su headless ma hai bisogno di uno spazio per farlo, registrati per un account Atlas Sandbox gratuito. Oltre a distribuire i tuoi repository di codice, come abbiamo fatto oggi, puoi anche iniziare con alcuni dei nostri progetti predefiniti, che sono pile di progetti con un clic che possono aiutarti a vedere come appare un progetto headless quando è finito.

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.