Cum să construiți primul dvs. proiect WordPress fără cap cu ACF + WPGraphQL

Toată lumea are instrumentele lor preferate când vine vorba de dezvoltarea WordPress, iar ideea de a construi un site fără aceste instrumente poate fi descurajantă. Din fericire, două instrumente preferate ale dezvoltatorilor WordPress - ACF și WPGraphQL - vă pot ajuta să vă scufundați degetele de la picioare în dezvoltarea fără cap.

În această sesiune, WP Engine Senior Developer Advocate Jeff Everhart arată dezavantajele infrastructurii prin construirea unui site demonstrativ în doar câteva minute folosind Atlas!

Slide-urile sesiunii:

Transcriere:

JEFF EVERHART: Ce se întâmplă, toată lumea? Numele meu este Jeff Everhart, un avocat senior pentru dezvoltatori aici la WP Engine. Vă mulțumesc foarte mult că v-ați alăturat discuției mele de astăzi despre construirea primului dvs. proiect WordPress fără cap cu ACF și WP GraphQL. Înainte de a intra în construcție, îmi place întotdeauna să ofer un context despre ce este WordPress fără cap. Se pare că fără cap devine din ce în ce mai puțin un termen de nișă și mai popular, așa că voi încerca să păstrez explicația scurtă.

WordPress fără cap în esență se referă la utilizarea CMS WordPress printr-un API pentru a alimenta un alt tip de aplicație. Dacă ne uităm la diagrama din acest diapozitiv, atunci când un utilizator solicită site.com/page, în loc să aibă WordPress să se ocupe de acea solicitare, o aplicație JavaScript răspunde la acea rută. Se uită la cale, determină ce date are nevoie de la WordPress sau din alte surse, efectuează apeluri API-uri și generează un răspuns utilizatorului.

Este important să rețineți că ceea ce este în acel slot de rulare Node.js ar putea fi într-adevăr orice număr de tipuri diferite de aplicații sau clienți. Am văzut diverse exemple de aplicații mobile sau site-uri web create cu toate cele mai populare cadre care folosesc acest model cu mare succes. Acum că aveți o idee bună despre ce este WordPress fără cap, să trecem prin stiva tehnologică pe care o vom folosi pentru proiectul de astăzi.

În cel mai mare strat din spate, vom folosi WP GraphQL ca API. WP GraphQL transformă backend-ul dvs. WordPress într-un puternic API GraphQL. Implementează aceleași verificări de securitate pentru rol și capacitate pe care le fac WordPress nativ și API-ul REST de bază. WP GraphQL este o alegere excelentă pentru dezvoltarea de aplicații fără cap, deoarece folosind limbajul său de interogare declarativ, putem interoga diferite tipuri de conținut în întreaga acea natură de conținut. Așa că obținerea de postări, pagini cu categoriile lor, toate în aceeași solicitare.

Acum, să vedem cum putem structura și modela câteva date mai complexe folosind CMS-ul WordPress. Mulți dezvoltatori care abordează proiecte fără cap trebuie să modeleze și să stocheze date care sunt diferite, nu? Se extinde dincolo de postările sau paginile tipice ale WordPress. ACF sau câmpurile personalizate avansate sunt un instrument excelent pentru modelarea acelor câmpuri personalizate. Într-o versiune viitoare, va deveni și mai puternic, permițându-vă să înregistrați tipurile de postări și taxonomii direct în interfața de utilizare în versiunea gratuită a acestui plugin.

Face toate datele disponibile prin API-ul REST cu ușurință, dar va trebui să instaleze o extensie WP GraphQL pentru a adăuga unele dintre acele date de câmp la schema noastră GraphQL. Personal, sunt foarte încântat să văd că acest plugin evoluează pe măsură ce devine mai puternic pentru dezvoltatorii fără cap.

Acum, că putem modela date complexe și le putem interoga prin WP GraphQL, avem nevoie de o modalitate de a crea acele experiențe web moderne pentru utilizatorii noștri, sprijinind în același timp editorii de conținut care cunosc și iubesc deja WordPress. Aici intervine Faust. Faust este un cadru format din două părți, format dintr-un plugin WordPress și un cadru JavaScript bazat pe Next.js. Ei lucrează împreună pentru a face construirea site-urilor WordPress fără cap ușor și intuitivă.

Adaugă suport pentru lucruri precum previzualizările postărilor și autentificarea imediată și vă puteți baza într-o experiență de ierarhie a șabloanelor WP reimaginată în JavaScript modern. Faust.js își propune să fie o platformă foarte extensibilă și este livrat cu un sistem de plug-in și o bară de administrare pe care le puteți utiliza pentru a personaliza și a crea experiențe care să sprijine cazul dvs. de utilizare particular.

Nu în ultimul rând, vom avea nevoie de câteva modalități de a lucra cu aceste instrumente la nivel local și în producție. Folosind migrarea locală și WP, am extras toate resursele WordPress de care veți avea nevoie pentru acest proiect într-un singur fișier zip pe care îl puteți trage și plasa în local pentru a începe. Odată ce am terminat de construit site-ul nostru, ne putem împinge munca către platforma Atlas. Soluția de găzduire fără cap de la Atlas WP Engine, care combină backend-ul WordPress și un container Node.js, toate reglate pentru a funcționa împreună, disponibile printr-un singur tablou de bord.

Așa că acum că înțelegeți bine toate instrumentele pe care le vom folosi în prezentarea de astăzi, să intrăm direct și să începem construirea. Deschideți adresa URL din acest slide pentru a accesa codul demonstrativ în browser. Am încercat să fac această experiență cât mai ușor de urmărit, dar vom acoperi o mulțime de teren în următoarele 25 de minute, așa că nu ezitați să vizionați acum și să vă referiți la acest depozit GitHub și la înregistrarea acestei sesiuni mai târziu pentru a continua să lucreze după conferință. Dacă restul decodării este o expoziție de mașini, atunci această sesiune este despre construirea motoarelor. Joc total destinat.

Acum că avem depozitul GitHub deschis, să începem. Primul lucru pe care ți-l recomand este să faci un furk al acestui depozit în propriul tău cont. Dacă vă uitați prin ceea ce este conținut în acest depozit, veți vedea o grămadă de exemplu de cod, precum și câteva instrucțiuni pas cu pas în readme pentru tot ceea ce vom face în această prezentare. De fapt, vom face o mulțime de copiere și lipire direct din acest depozit în proiectul dvs. Pentru a clona acest lucru la nivel local, haideți să rulăm comanda Git clone în interiorul terminalului dvs.

Descărcarea va dura doar o secundă, iar apoi, odată ce am descărcat proiectul, să mergem mai departe și să ne schimbăm directorul în directorul respectiv al proiectului. De acolo, voi rula o comandă pentru a deschide acest proiect în VS Code, dar ar trebui să vă simțiți liber să utilizați orice editor de cod doriți. Deoarece VS Code are deja un terminal integrat, pot să curăț acest lucru și apoi să închid iTerm. Și acum, putem trece la localizarea site-ului nostru local WordPress. Pentru a face asta, vom deschide acest proiect în Finder și apoi vom găsi fișierul zip demo WP fără cap pe care l-am pregătit pentru tine.

Vom trage și plasa fișierul zip direct în mediul de dezvoltare local, iar local va începe procesul de despachetare și bootstrapping pentru site-ul dvs. demo WordPress. Putem să rămânem cu valorile implicite, iar localul va dura doar câteva minute pentru a vă crea un nou site WordPress. Acum, aceasta este o caracteristică excelentă a WP migrate pro care îmi permite să export orice site ca un zip și să trageți și să plasați direct în local, astfel încât să pot duce foarte repede un site de producție pe mașina mea locală, indiferent de platformă.

Odată ce s-a terminat de instalat, poate doriți să continuați și să aveți încredere în acest certificat SSL, apoi vom continua și vom deschide acest proiect în WP Admin. De acolo, vom merge mai departe și vom minimiza doar localul, deoarece rulează deja și nu trebuie să facem nimic altceva cu el. Deci, de acolo, vom deschide depozitul nostru, unde veți găsi un nume de utilizator și o parolă de administrator pe care le-am creat deja pentru acest site demonstrativ. Ar trebui să puteți utiliza acele acreditări pentru a continua și a vă conecta la tabloul de bord WP Admin. De acolo, vom lua doar o secundă pentru a ne situa cu această instalare locală WordPress.

Primul lucru pe care îl vom face este să aruncăm o privire la pluginurile care sunt instalate cu acest site WordPress. Vedem lucruri precum câmpuri personalizate avansate pentru modelarea datelor. Avem greșeli pentru a permite unele dintre capacitățile noastre fără cap, WP GraphQL să acționeze ca un API pentru site-ul nostru și apoi WP GraphQL pentru extensia ACF pentru a evidenția unele dintre grupurile de câmpuri ACF. Acum, să aruncăm o privire și la postări. Dacă te uiți la toate postările demonstrative pe care le-am pre-populat în cadrul acestui proiect, putem vedea că avem o serie de postări diferite cu o grămadă de categorii diferite.

Dacă ne uităm la conținutul din interiorul fiecărei postări, vom vedea că avem o mulțime de conținut corporal, câteva imagini, imagini prezentate și câteva grupuri de câmpuri ACF pe care le-am creat și pre-populat deja. Deci, să aruncăm o privire asupra grupurilor de câmpuri mai detaliat. Dacă deschidem meniul ACF, veți vedea că avem două grupuri de câmp create – resurse alimentare și mixtape dulci. Să aruncăm o privire mai întâi asupra resurselor alimentare.

Acesta este doar un grup de câmpuri de bază cu două câmpuri individuale – text și URL. Pentru fiecare dintre aceste lucruri, am bifată opțiunea Afișare în GraphQL, astfel încât să apară în GraphQL. Apoi am verificat și acea opțiune la nivel de grup de câmpuri. În plus, am o logică condiționată pentru a determina când să redau aceste postări – deci dacă categoria postării este egală cu mâncarea. Și haideți să vedem cum arată mixtape dulce.

Vom vedea că aceasta arată destul de asemănătoare cu resursele noastre alimentare și că avem câteva domenii diferite. Fiecare are bifată opțiunea Afișare în GraphQL, precum și aceasta bifată la nivel de grup de câmpuri în plus. Putem vedea că există câteva setări diferite pe care extensia WP GraphQL ni le oferă de care este posibil să nu avem nevoie. În plus, putem vedea că afișăm acest lucru condiționat și pe baza categoriei de postare.

Deci, acum, să aruncăm o privire la WP GraphQL și la ce ne oferă asta în ceea ce privește instrumentele. Dacă deschidem meniul GraphQL, vom fi introduși în interiorul IDE-ului grafic. Acum, acesta este un mediu de dezvoltare interactiv care vă permite să creați interogări folosind WP GraphQL. Putem specifica că vrem, să zicem, primele 10 postări cu categorii și să includem și aici câmpurile ACF suplimentare. Când facem clic pe butonul Run, primim înapoi datele live de pe site-ul nostru WordPress care se potrivesc cu datele din acea interogare.

Dacă dorim, putem deschide fereastra Query Composer și putem compune vizual aspecte ale interogării noastre. Deci, acesta este un instrument foarte util dacă nu sunteți sigur ce câmpuri sau date ar putea fi pe un anumit obiect WordPress. Puteți utiliza Query Composer pentru a explora și a rula acele interogări în timp real. Acum, să trecem la configurarea Faust prin deschiderea meniului de setări Faust. După cum am spus în discuția introductivă, Faust este într-adevăr un cadru din două părți, care constă dintr-un plugin WordPress și baza de cod front-end.

Deci, dacă revenim în meniul de setări pentru pluginul WordPress, putem vedea că am setat această opțiune pentru adresa URL a site-ului front-end, care va indica adresa site-ului nostru front-end. Chiar sub aceasta, în opțiunea cheie secretă, vom continua și vom face clic pe regenerare pentru a genera o cheie unică pe care o puteți folosi pentru proiectul dvs. demo. De acolo, să ne întoarcem de fapt în baza de cod JavaScript și vom rula această comandă pentru a copia un exemplu de fișier variabilă de mediu într-unul pe care îl putem folosi cu site-ul nostru.

Odată ce l-am executat, comanda deschideți fișierul .env.local și vom face câteva modificări. Primul lucru este că va înlocui următoarea opțiune publică URL WordPress cu locația site-ului dvs. local. Deci ACF.WPEngine.local. Și apoi vom lua și acea valoare a cheii secrete și o vom folosi pentru cheia noastră secretă Faust. Asigurați-vă că vrem să anulăm comentariile și asta, iar apoi ultima variabilă de mediu este într-adevăr utilă pentru testare și dezvoltare locală, astfel încât să puteți elimina orice probleme SSL pe care le puteți avea în timp ce vă conectați la mediul de dezvoltare local.

De acolo, vom dori să rulăm NPM Install pentru a instala toate dependențele proiectului nostru și apoi, odată ce s-a terminat, putem începe și rula NPM Run Dev pentru a începe proiectul nostru. Compilarea va dura doar o secundă, dar odată ce o face, putem deschide localhost:3000 în browser și ar trebui să vedem site-ul nostru Faust în acțiune.

Odată ce se redă, puteți vedea că Faust se ocupă deja de ceva magie pentru noi. Dacă ne uităm la acel meniu din partea dreaptă sus, putem vedea că atrage deja pagini și conținut din meniurile noastre pe care le-am definit în backend-ul nostru WordPress și, dacă ne întoarcem în administratorul WordPress, ne putem uita la cum funcționează această conexiune mai detaliat.

Deoarece plugin-ul Faust știe adresa URL-ului nostru front-end, rescrie multe dintre link-uri, cum ar fi acele link-uri de previzualizare, astfel încât atunci când le deschideți în browser, acestea se deschid în URL-ul site-ului front-end, astfel încât să puteți primiți o previzualizare reală în direct a modului în care va arăta conținutul dvs. pe front-end.

Acum, să aruncăm o privire mai profundă în structura proiectului nostru Faust JavaScript. Dacă sunteți familiarizat cu lucrul în Next.js, probabil că ați folosit directorul paginii pentru a crea componente ale paginii care vă implementează rutele. Puteți face în continuare acest lucru în Faust, dar se bazează pe acest concept, oferind o rută de captură numită nodul WordPress, care vă permite să luați orice URI pe care WordPress îl gestionează și să îl rezolvați într-o anumită bucată de conținut.

Apoi obținem câteva date suplimentare despre acel element de conținut și le transmitem prin componentele noastre, astfel încât să putem rezolva acea bucată de conținut individual într-un anumit șablon din folderul șabloane WP. Acest lucru este foarte asemănător cu conceptul de ierarhie a șablonului și cu tematica tradițională WordPress și cu multe convenții de denumire. Potrivire, de exemplu, frontpage.js este prima pagină a site-ului nostru, în timp ce page.js este responsabil pentru redarea lucrurilor de tipul conținutului paginii. Și single.js este acolo pentru a reda postări unice.

Acum, să începem și să facem frontpage.js-ul nostru doar puțin mai dinamic. BINE . Așa că, pentru a începe, vom merge mai departe și vom deschide fișierul nostru front page.js și ne vom oferi doar puțin mai mult spațiu de lucru. Deci, dacă ne uităm la conținutul acestui fișier, putem vedea că există trei piese principale. Există componenta în sine pe care o redăm, o proprietate de interogare care se atașează la componentă și aceasta este rulată de fiecare dată când redăm componenta și apoi câteva variabile pe care le putem transmite în partea de jos.

Și după cum puteți vedea, există două modalități principale de a utiliza acest lucru. Fie utilizând cârligul de interogare în interiorul componentei, fie poate fi transmis ca elemente de recuzită în componenta în sine și veți vedea asta într-un exemplu mai târziu. Așadar, să ne întoarcem la depozit și să începem cu pasul 2.1 pentru a actualiza interogarea pentru frontpage.js. Așa că îl vom copia, apoi ne întoarcem în IDE-ul grafic și ne vom juca doar acolo pentru o secundă. Deci, această interogare pe care o avem în clipboard ar trebui să obțină primele 10 postări și să primească câteva date asociate cu fiecare dintre aceste postări.

Și așadar, dacă facem clic acolo și îl rulăm, vedem că totul funcționează excelent. Și așa vom dori să mergem mai departe și să adăugăm asta la proprietatea noastră de interogare a componentelor. Așa că vom găsi un loc bun pentru a face asta și doar să-l lipim acolo și să facem puțină reformatare. Și deci ceea ce face este că adaugă această parte individuală a interogării la acea interogare în sine. Deci, încă trebuie să facem rezultatele acelei interogări disponibile pentru restul componentei noastre, așa că vom merge mai departe și vom adăuga această linie suplimentară care doar extrage rezultatul postării într-o variabilă cu care putem lucra.

Acum, următorul pas pentru a face această pagină de pornire dinamică este de fapt crearea unei componente pentru a reda acele fragmente de postare. Așa că vom face asta și vom crea câteva fișiere în folderul componente și voi menționa aici că – voi merge mai departe și voi crea un postexcerpt.js în interiorul unui folder cu extras de postare și am Doar duplicat structura componentelor existente care fac parte din acest proiect Faust.js Noțiuni introductive. Sunteți cu adevărat liber să faceți tot ce doriți aici, iar eu doar urmez cadrul, deoarece a fost deja stabilit pentru mine ca parte a acestui Noțiuni introductive.

Deci, odată ce avem toate aceste trei fișiere, vom începe să le adăugăm câteva lucruri pentru a reda acele postări. Deci, primul lucru pe care îl vom face este să punem conținut în componenta noastră de extras de postare. Și așa vom doar copia și lipim asta din depozitul nostru și putem vedea că importăm acel fișier module.css. Și avem o funcție numită post excerpt, care este componenta noastră, care gustă o propă care este postarea, apoi redăm o secțiune, având un link care va merge direct la acel URI al postării, redând titlul. Apoi, acolo jos, avem piese de categorie pe care le redăm și, apoi folosim setarea periculos în HTML pentru a seta conținutul HTML pentru fragmentul postării.

Acum, odată ce toate acestea sunt grozave și salvate, vom salva asta, dar vom veni și aici și vom adăuga acest stil suplimentar la componenta noastră pentru a stila acele etichete span pentru categoriile noastre, apoi vom doar faceți niște importuri, exportați în interiorul fișierului index.js pentru a le duce de la un export implicit la un export numit și vom salva toate aceste lucruri. Și apoi ultimul pas pentru a face acest lucru disponibil pentru utilizare în alte lucruri este să adăugați încă o linie de export în fișierul index.js al folderului nostru de componente. Și acum că am făcut asta, dacă ne întoarcem la pagina de pornire, frontpage.js, ar trebui să putem doar să adăugăm un import suplimentar la declarația noastră de import existentă pentru a folosi extrasul nostru de postare.

Acum, vom dori să găsim un loc în care să implementăm asta și, dacă coborâm și ne uităm în interiorul elementului nostru principal, vedem că avem niște lucruri chiar sub erou – ceea ce vom face este să facem doar copiați și lipiți o parte din cod în depozit și suprascrieți ceea ce este în interiorul acelui principal folosind fragmentul postării noastre. Și vom face doar un pic de reformatare pentru a ne ușura unele lucruri, dar puteți vedea acolo că ceea ce facem este în interiorul acelui container, vom mapa prin gama de postări pe care le-am primit ca un rezultat al interogării noastre și apoi returnăm o componentă de extras de post unde trecem în post și îi dăm o cheie.

Și apoi dacă mergem mai departe și salvăm toate acestea și le redăm în browser și reîmprospătăm, ar trebui să vedem că avem o pagină de pornire dinamică grozavă. Da, fiecare dintre aceste titluri are un link pe care se poate face clic, la fel ca plăcile de categorie individuale. Și dacă facem clic, putem vedea că, prin beneficiul șabloanelor care există deja în Faust, toate articolele noastre postate sunt deja redate, deși ne lipsesc unele dintre acele grupuri de resurse pe care le-am creat folosind ACF. Deci, dacă facem clic pe o a doua postare, putem vedea că una se redă grozav, precum și toate linkurile de categorii prefabricate care sunt - folosim doar acele URI-uri de categorie pentru a ne apleca pe Faust pentru a reda acel șablon JS de categorie. .

Ok, acum că avem o pagină de pornire dinamică, să trecem la redarea acelor câmpuri ACF pe șablonul nostru single.js. Așa că mergeți mai departe și curățați editorul nostru de cod și apoi putem deschide fișierul single.js și aruncăm o privire la ce se află acolo. Știm că, la acel nivel superior, avem această funcție de componentă pe care o exportăm, care are de fapt elemente de recuzită și proprietatea component.query care are o interogare dinamică GraphQL care citește unele dintre acele variabile pe care le primim din interogarea semințe.

Și ceea ce vom dori să facem în cele din urmă este să afișăm unele dintre aceste resurse diferite de postare în partea de jos a conținutului postării noastre. Așa că mă întorc în depozit și derulez în jos până la pasul 3.1, unde actualizăm interogarea unică de postare și ne vom uita la asta, deoarece începe să atragă atât grupurile de câmpuri de amestec dulce, cât și de resurse alimentare pe care le-am creat în pasul anterior. Dacă iau acea interogare și o copiez și o lipesc în grafic, voi continua și voi codifica un ID de bază de date pentru o postare și voi elimina doar câteva dintre acele lucruri diferite de care nu avem nevoie, cum ar fi As Preview și acel fragment. .

Dacă merg înainte și rulez asta, vom vedea că voi primi câteva date care conțin cu adevărat ceea ce mă aștept. Conținutul, primesc înapoi autorul și, important, îmi revin ambele grupuri de câmpuri și datele lor. Deci voi merge mai departe și voi copia acea interogare și voi reveni în single.js. De acolo, voi înlocui cu adevărat acea parte a interogării cu ceea ce am din clipboard. Putem merge mai departe și salvăm asta. Puteți să-l reformatați dacă doriți, dar acesta este agnostic spațiile albe, așa că cred că, în cea mai mare parte, arată bine.

Deci, de acolo, vom dori să facem același lucru pe care l-am făcut în ultimul pas, în care am făcut ca asta să facă parte din interogarea noastră. Acum, vrem să ne asigurăm că facem acele variabile disponibile în interiorul componentei noastre. Așa că le vom adăuga la acea declarație de structurare și, în plus, din moment ce avem câteva categorii diferite pentru postările noastre, dorim să creăm câteva chestii booleene care să ne ajute să stabilim dacă ar trebui sau nu să afișăm resurse alimentare sau mixtape dulci. Pentru că, după cum puteți vedea acolo, indiferent de ce primim ambele, și dacă nu există nimic de găsit pentru câmpurile de mixtape dulci, acestea revin ca nule. Așa că voi dori să fac niște verificări condiționate acolo, așa că voi adăuga aceste două linii de cod în fișierul nostru.

Și ceea ce face acest lucru este că ne creează câteva variabile booleene pe care le putem folosi mai jos pentru a reda condiționat șabloane. În acest lucru, ne uităm la nodurile pentru fiecare categorie și apoi, practic, le filtrăm pentru a determina dacă au sau nu mâncare sau muzică, apoi verificăm lungimea. Probabil că există o mulțime de modalități prin care puteți implementa acest tip de variabilă booleană, așa că nu ezitați să schimbați acest lucru dacă aveți o modalitate mai curată de a face asta, dar pentru scopurile noastre aici, cred că asta va funcționa foarte bine.

Acum, următorul pas este că vom dori de fapt, ca în pasul anterior, să creăm câteva componente suplimentare. Așa că voi merge mai departe și în interiorul fișierului meu de componente, voi crea o componentă de resurse alimentare. Deci voi crea un folder și apoi un fișier food resources.js în interiorul acestuia și, împreună cu acesta, voi crea un fișier index.js, precum și un fișier de module CSS. Și acum, fișierul de module SCSS este cu adevărat util, deoarece ne permite să ne extindem stilurile la acea componentă specială. Așa că se simte ca o sintaxă funky să o faci, dar în cele din urmă este un rezultat foarte curat pentru că nu trebuie să scriem o grămadă de clase și chestii.

Așa că voi începe să copiez și să inserez codul componentei din depozit direct în acele fișiere. Putem vedea că avem o funcție de resurse alimentare care necesită numele rețetei a două elemente de recuzită și linkul rețetei, apoi le redăm sub vârsta noastră frumoasă cu emoji-ul burrito. De asemenea, vom copia și lipi câteva stiluri de fișiere SCC în acest folder special și apoi ne vom asigura că le exportăm din folderele componente index.js. Și la fel ca în exemplul anterior, vom dori să mergem mai departe și să exportăm acest lucru în index.js al folderului nostru de componente, astfel încât să putem avea un grup foarte frumos de importat, așa cum ați văzut direct din acele componente. folder în altă parte în unele dintre aceste fișiere diferite.

Așa că, odată ce am adăugat asta, ne vom îndrepta atenția către componenta de resurse muzicale și vom face același lucru. Vom merge mai departe și vom crea aceeași structură de fișiere. Deci folderul de resurse muzicale și un fișier musicresources.js în interiorul acestuia. Apoi vom continua și vom crea un fișier index.js pentru a-l exporta și apoi, de asemenea, fișierul nostru musicresources.module.scss, de asemenea, pentru acele stiluri de domeniu.

Așa că, odată ce avem toate aceste lucruri, vom face același lucru pe care l-am făcut pentru resursele noastre alimentare și vom copia și lipi o parte din acest cod din depozit. Putem vedea că această componentă arată aproape identică. Avem resurse muzicale. Acesta are de fapt trei elemente de recuzită în loc de două, dar am avut trei câmpuri în acest grup de câmpuri, dar convenția styles.component este aceeași. Și facem doar o randare ușor diferită, deoarece avem conținut diferit.

Deci, de acolo, vom adăuga, de asemenea, codul nostru SCSS și ne vom asigura că îl exportăm din folderele componente index.js și apoi îl vom importa și în folderul nostru de aici, și cred că de fapt l-am făcut - haideți să redenumim rapid acest lucru și Asigurați-vă că toate denumirea noastră arată bine, astfel încât index.js și componentele noastre să găsească resursele noastre muzicale și toate aceste lucruri sunt grozave. Deci, acum, vom merge mai departe și doar închidem toate aceste file străine, deoarece suntem gata să implementăm efectiv acele componente în fișierul nostru single.js.

Deci, pentru a face asta, vom adăuga doar acele două componente la declarația noastră de import existentă, care le recunoaște deja automat și vom găsi un loc bun pentru a face asta. Și așa că avem această componentă de înveliș de conținut aici. Așadar, chiar acum, transmitem conținutul, dar acesta va accepta opțional și copii. Așa că putem trece conținutul, dar apoi și unele componente secundare direct în acel înveliș de conținut, astfel încât să fie afișat în acel spațiu orizontal frumos pe care îl avem deja și totul este aliniat.

Așa că asta vom face și apoi vom copia și lipi acel cod acolo, îl vom reformata și vom vorbi despre ceea ce se întâmplă în acest exemplu special. Așadar, chiar în interiorul acelei componente de înveliș de conținut, folosim variabile booleene care sunt alimente și muzică pentru a reda condiționat, totuși, componentele de resurse corespunzătoare. Deci, dacă mâncarea este adevărată și această postare este în categoria alimente, vom reda asta. Și dacă este muzică, vom face același lucru. Și acolo, puteți vedea că trecem în toate elementele de recuzită diferite care sunt necesare pentru a reda asta.

Și dacă revenim și reîmprospătăm una dintre paginile noastre de șablon single.js, putem vedea că resursele noastre alimentare se redau exact așa cum ne-am aștepta și că linkul ar funcționa corespunzător dacă revenim în WP Admin sau acasă. pagină. Și dacă găsim una și categoria de mâncare sau muzică, putem deschide Kinfolk Synth DIY și vedem cum arată componenta noastră de resurse muzicale și toate acestea arată grozav. Și dacă găsim unul care se află de fapt în ambele categorii, putem vedea că de fapt, în partea de jos, redă ambele componente exact așa cum ne-am aștepta.

BINE. Așa că acum că avem site-ul așa cum ne dorim, să trecem la a vorbi despre cum să implementăm acest site. Acum, am o secțiune din depozitul GitHub creată pentru noi și, de fapt, am creat o ramură implementată complet separată în ramura de finisare. Așa că s-a terminat de executat verificarea Git, vă vom obține asta. Și puteți, de asemenea, să implementați acea ramură direct în Atlas, care este soluția de găzduire WordPress fără cap a WP Engine.

Acest lucru vă oferă atât o instalare WordPress, cât și un container Node.js și vă puteți înscrie pentru un cont sandbox gratuit făcând clic pe acest buton de pe pagina de destinație Atlas. Te duce pe un forum foarte rapid și, după cum poți vedea, prețul este zero. S-ar putea să trebuiască totuși să introduceți un card de credit pe care îl folosim doar în scopuri de prevenire a fraudei, dar puteți avea un cont gratuit pentru a vă juca cu toate acestea pentru a-l testa, pentru a învăța fără cap după dorința inimii. Așa că voi merge mai departe și voi deschide tabloul de bord WP Engine pentru a începe implementarea acestui site pe Atlas.

Primul lucru pe care îl voi face de fapt este să-mi deschid lista de site-uri și o să-mi deschid site-ul WordPress de producție. Deci, de fapt, acest site ACF fără cap pe care îl vedeți chiar aici, unde voi deschide Administratorul WP într-o fereastră nouă, este site-ul părinte pentru fișierul zip pe care îl folosiți cu toții local. Așa că am făcut un zip folosind exportul WP și asta este de fapt ceea ce voi folosi pentru implementarea mea de producție.

De acolo, voi face clic pe fila Atlas și apoi dau clic pe Creare aplicație. Și mi se prezintă această opțiune. Voi alege Pull From Repo, apoi dau clic pe Continuare. Și dacă nu m-am autentificat cu GitHub, aici ați face-o, dar din moment ce sunt deja, pot să merg mai departe și să îmi selectez depozitul. Deci vom merge mai departe și vom selecta depozitul pe care îl folosim pentru acest proiect, faceți clic pe Continuare, apoi voi implementa aplicația mea în US Central.

De aici, îmi permite să aleg o ramură și, așa cum am spus, voi folosi Finished. Există, de asemenea, opțiuni dacă utilizați un monorepo, ceea ce noi nu, și voi lăsa bifată Instalarea mea WordPress și voi căuta site-ul meu ACF Headless. Acum, aici, voi dori să, de fapt, în loc să folosesc un fișier .env, voi dori să copiez peste două variabile de mediu din proiectul meu de fișiere.

Deci, primul este următorul URL public WordPress. Acestea sunt aceleași variabile de mediu pe care le-am stabilit în proiectul nostru local și voi copia acolo linkul către instalarea WordPress de producție. Apoi voi adăuga o altă variabilă de mediu, iar aceasta va fi pentru cheia noastră secretă Faust. Așa că voi merge mai departe și îl voi copia din meniul Setări Faust, îl voi introduce acolo și voi seta cheia pentru aceasta la Faust Secret Key.

Și odată ce s-a terminat, pot continua și pot face clic pe Creare aplicație, iar Atlas va începe procesul de construire și implementare a aplicației mele. În timpul procesului de construire Atlas, acesta va rula instalarea NPM și comanda dvs. de compilare NPM pentru orice cadru pe care îl utilizați. Și apoi, odată ce tot codul a fost construit, va implementa acel container Node pentru tine în rețeaua noastră. Și așa că, odată ce toate acestea se învârt doar pentru o secundă, ar trebui să primim un mesaj de succes, apoi putem face clic pe adresa URL care ne-a fost furnizată și să ne uităm efectiv la site-ul nostru live.

Așa că vom primi mesajul nostru de succes și apoi putem să deschidem această adresă URL într-o altă filă. Și acolo putem vedea că site-ul nostru arată exact ca și la nivel local și atrage toate datele corecte, toate imaginile corecte și chiar atrage tot conținutul nostru ACF. Unele dintre postările noastre arată foarte bine și sunt foarte performante pe Atlas – de fapt folosesc niște imagini foarte mari aici, așa că dacă vezi o oarecare lentoare, cu siguranță se datorează alegerilor mele.

Platforma Atlas este plină de funcții pe care dezvoltatorii JavaScript moderni le vor aprecia. Din păcate, nu este suficient timp în această prezentare pentru a le analiza pe toate în detaliu.

Dar Atlas face o treabă foarte bună în reunirea detaliilor importante atât din partea frontală, cât și din partea backend ale ecosistemului tău fără cap într-un singur tablou de bord convenabil, unde poți să te uiți la jurnalele de construcție individuale și la rezultatul construcției, să examinezi implementările, variabilele de mediu pe care le-ai folosit pentru o anumită versiune, precum și să aveți acces la setări sau funcții suplimentare pe care le puteți activa, cum ar fi mediile de previzualizare, în care puteți crea un mediu suplimentar pentru fiecare PR care este creat împotriva depozitului dvs. GitHub sau puteți crea webhook-uri de mediu pentru a reconstrui anumite părți ale aplicația sau CDN-ul dvs. pe măsură ce faceți modificări în WordPress.

Toate aceste lucruri devin posibile cu platforma Atlas și chiar reduce bariera pentru a începe construirea cu WordPress fără cap.

Wow. Felicitări, așa cum am spus, a fost mult de acoperit în 25 de minute. Vă rugăm să nu ezitați să continuați să exersați după prezentare și să mă contactați dacă aveți întrebări despre începerea cu resursele demo. Dacă sunteți interesat să aflați mai multe despre headless, dar aveți nevoie de un spațiu pentru a face acest lucru, creați un cont gratuit Atlas Sandbox. Pe lângă implementarea propriilor depozite de coduri, așa cum am făcut astăzi, puteți începe și cu unele dintre planurile noastre prefabricate, care sunt stive de proiecte cu un singur clic care vă pot ajuta să vedeți cum arată un proiect fără cap când este terminat.

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.