7 lucruri pe care nu știai că le poți face cu câmpurile personalizate avansate

Advanced Custom Fields (ACF) este aproape sinonim cu dezvoltarea WordPress. Având peste 4,5 milioane de site-uri, acest plugin a ajutat WordPress să crească la noi culmi. Știți pluginul. Probabil ați construit cu pluginul. Dar profiti din plin de asta?

În această sesiune, vom arunca o privire rapidă asupra unora dintre modalitățile mai puțin cunoscute prin care puteți utiliza ACF pentru a vă crea cele mai dinamice, puternice și captivante experiențe WordPress de până acum.

Difuzoare:

• Iain Poulson, Senior Product Manager la WP Engine
• Rob Stinson, Product Marketing Manager la WP Engine

Slide-urile sesiunii:

Transcriere:

Iain Poulson: Bună, și bun venit la sesiunea noastră despre pluginul Advanced Custom Fields. Sunt Iain Poulson, manager de produs pentru ACF la WP Engine și sunt alături de Rob Stinson, care este managerul nostru de marketing de produs. Astăzi, vă vom conduce printr-o sesiune destul de rapidă cu șapte lucruri pe care nu știați că le puteți face cu plug-in-ul Advanced Custom Fields, unele lucruri destul de noi și altele mai puțin cunoscute. Și funcționalitatea pe care o vom centra în jurul unui site fictiv pe care Rob l-a proiectat, așa că suntem fani mai degrabă ai exemplelor reale decât a lucrurilor abstracte, dar suntem și mari fani ai filmelor.

Așadar, acest site este o sărbătoare a celei mai bune perioade a cinematografiei, probabil, fără îndoială, a filmelor din anii '90, așa că site-ul se bazează pe recunoașterea și premiarea celor mai populare și mai iubite filme din anii '90. Site-ul trebuie să prezinte filme și să permită utilizatorilor să voteze pentru preferatul lor, iar în adevăratul stil Rob, site-ul arată grozav. Deci, să începem, să începem de la început și să instalăm ACF. Spune-mi cum, Rob.

ROB Stinson: Cool, mulțumesc, Iain. Da, mulțumesc, omule. Arată destul de bine, nu-i așa? A trecut mult timp să-l proiectăm, ne-am distrat puțin. Deci am câștigat contractul. Avem proiectul și începem lucrurile, iar primul lucru pe care l-am făcut a fost dacă a identificat, că acest lucru are sens în primul rând, pentru ACF. Va trebui să setăm o grămadă de câmpuri personalizate pentru unele tipuri de postări personalizate și să facem niște șabloane interesante și chestii de genul acesta. ACF este instrumentul pentru munca de aici. Deci, desigur, trebuie mai întâi să instalăm ACF, iar acesta este numărul unu aici. Așa că, de obicei, știm că ați putea să luați plug-in-ul ca fișier zip și să-l încărcați în administratorul WordPress, frumos și simplu.

Acesta este modul standard de instalare a unui plug-in, dar știm, de asemenea, că dezvoltatorilor din zilele noastre le place să-și gestioneze dependențele puțin diferit. Îmi place de obicei să-l gestionez în cod, iar în lumea PHP, asta se face de obicei cu Composer. Acum ați reușit să instalați destul de ușor pluginuri WordPress din depozitul WordPress.org de ceva timp cu Composer, dar a fost puțin mai greu de făcut cu pluginuri premium precum ACF Pro.

Dar cea mai recentă lansare acum câteva săptămâni, de fapt, acum aproximativ o lună, am activat de fapt capacitatea de a instala ACL Pro acum prin Composer, ceea ce este fantastic, așa că vom face asta chiar acum. Deci, cum să faceți acest lucru este, pasul numărul unu, trebuie să adăugați adresa URL ACF Pro Composer Repo la fișierul dvs. composer.JSON. Pasul numărul doi este că veți crea un fișier auth.JSON pentru acreditările dvs. și îl veți plasa în rădăcina proiectului dvs., atât la nivel local, cât și în drum spre locul în care vom implementa și acreditările de care aveți nevoie pentru acel fișier sunt acum disponibile în zona contului dvs. de pe advancedcustomfields.com.

Deci, dacă vă conectați, veți vedea o zonă de licențe și există câteva file suplimentare și chestii de genul acesta, puteți de fapt să luați întreaga bucată de cod, să copiați și să lipiți totul sau puteți lua numele de utilizator individual și parola și aduceți-o în fișierul pe care l-ați creat, fișierul auth.JSON.

Și al treilea pas, rulăm comanda Composer, așa că este frumos și ușor, un proces în 3 pași, dar fantastic pentru că înseamnă că, așa cum am spus, dezvoltatorii cărora le place să aibă un control puțin mai bine reglat asupra modului în care își gestionează dependențele proiectului lor, acum puteți face acest lucru cu ACF Pro, ceea ce este fantastic. Desigur, există mai multă documentație despre el, așa că doar pentru a merge mai adânc și pentru a vedea cum se despachetează totul, săriți la documentele de pe site și ar trebui să fiți gata de plecare. Cool, am de gând să vomite la Iain pentru numărul doi.

Iain Poulson: Corect, acum hai să vorbim despre configurarea datelor pentru site. Deci, tipurile de postări personalizate, sunt destul de fundamentale în WordPress în modul în care construiți un site care nu este doar despre postări sau pagini. Este caracteristica personalizată a tipului de postare care a venit în orice versiune WordPress de acum o transformă într-un CMS adecvat și, de obicei, este primul pas pe care îl fac dezvoltatorii atunci când construiesc site-urile. Și asta a fost întotdeauna ceva care s-a întâmplat în afara ACF. Din punct de vedere istoric, fie înregistrați un tip de postare cu cod, fie utilizați un alt plugin pentru a face asta, dar este partea din călătorie care se conectează destul de bine cu ACF. Deci, ca parte a ACF 6.1, această funcționalitate vine la plugin, deci este punctul de plecare natural al călătoriei.

Doriți să construiți un site cu date privind structura datelor, veți construi un tip de postare. Veți adăuga câmpuri la acesta, apoi ați putea adăuga câteva taxonomii și apoi începeți să editați acele date. Deci, da, este ceva ce am pus în 6.1 și este destul de interesant să avem acel flux complet de construcție în CMS. Deci, să căutăm site-ul de premii VHS. Va trebui să ne structurem datele și să facem WordPress să facă ceea ce trebuie să facă, așa că în ceea ce privește tipul de postare, pentru că nu vrem să folosim postări și pagini, vom crea o postare personalizată. tip pentru film, pentru a stoca datele filmului, obiectul de date sau modelul de date, dar evident, în termeni WordPress, acesta este un tip de postare personalizat.

Dorim să clasificăm filmele cu o taxonomie, astfel încât să putem permite utilizatorilor să vadă cu ușurință filme de un tip de gen, iar apoi veți obține o vizionare frontală ușoară, URL-uri simple care vă permit să accesați filme de anumite genuri. Și vom avea nevoie de câteva câmpuri suplimentare pentru a stoca date structurate în jurul unui film, așa că vrem, de exemplu, ca regizorul să fie un câmp text. Vom avea nevoie de anul în care filmul a apărut ca număr și vom avea nevoie de o formă de relație pentru a lega filmele între ele și, desigur, trebuie să stocăm numărul de voturi pe care le va obține, și acesta este câmpul numeric.

Deci, să aruncăm o privire rapidă în ACF 6.1 cum vom face asta. Deci acesta este ecranul ACF 6.1 și veți observa puțin diferit, avem meniul pe bara laterală. Acum este ACF, nu doar câmpuri personalizate, iar acesta este ecranul tip post. Deci, acesta sunt doar eu care configurez tipul de postare a filmului. Este cel mai simplu flux de lucru aici, de a adăuga doar o etichetă singulară pentru tipul de postare, care este film, eticheta plurală, și este generată automat cheia tipului de postare. Setarea publică este setată implicit pentru că vreau să fie vizibilă în front-end, tipul postării și vreau să o pot edita în administrator.

Așa că, odată ce a fost salvat și adăugat, lucrul plăcut despre conexiunea aici cu ACF este faptul că următorul pas în călătorie este că am creat tipul de postare, vrem să adăugăm câmpuri la tipul de postare sau vrem pentru a lega câmpurile existente la tipul postării sau pentru a crea o taxonomie? Deci, putem face toate acestea din acel punct aici, așa că și evident că trebuie să mergem și să adăugăm acele câmpuri. OK, deci făcând clic pe acea notificare pentru a adăuga câmpuri noi la tipul de postare de film, obținem Editorul de grup de câmpuri și este pre-populat în partea de jos în setările Metabox.

Deci, regulile de locație sunt deja setate să spună, afișați aceste câmpuri, atunci când editați tipul de postare de film, apoi puteți continua și adăugați câmpurile, ceea ce am făcut deja aici în captură de ecran. Deci avem regizorul, anul și voturile și filmele aferente. Apoi, desigur, putem înregistra taxonomia personalizată despre care am vorbit, adăugând genul și conectând taxonomia genului la tipul post de filme. Dar acestea sunt câmpuri pe care le-am adăugat și care sunt atașate obiectului film, dar cum rămâne cu câmpurile de care avem nevoie pentru a stoca date care ar putea fi mai globale sau la nivel de site? Rob, ce avem pentru asta?

Rob Stinson: Cool, mulțumesc pentru asta, Iain, arată bine. Modelul nostru de conținut vine bine, dar încă nu am terminat. Acum am abordat deja instalarea ACF Pro prin Composer și doar ne-am uitat la tipurile de postări personalizate și taxonomiile personalizate în ACF. Acum, acele două lucruri care sunt foarte, foarte proaspete, dar al treilea lucru pe care vreau să-l acopăr acum, este un vechi, dar o bunătate. Și așa este în plugin de câțiva ani, dar nu toată lumea știe despre el și nu toată lumea înțelege pe deplin valoarea acestui lucru, așa că ne vom uita acum la câmpurile globale cu pagina de opțiuni.

Acum, de obicei, vă gândiți la un câmp personalizat și la modul în care acesta stochează datele pentru o anumită postare, o pagină sau un tip de postare personalizat. Dar uneori avem nevoie să stocăm date care sunt asociate la nivelul întregului site, iar un exemplu grozav pe minunatul nostru site de premii VHS este acest tip de bară promoțională sau de notificare de top. Și aceasta este o bară pe care vrem să o menținem pe fiecare pagină a paginii de pornire a site-ului, mergi la o pagină de film, este acolo. Accesați pagina Despre, sau o pagină Contact sau o pagină Blog, această mică bară se află pe întregul site, indiferent unde navighează utilizatorul, așa că nu are sens să asociem acele date relevante cu o postare sau un film.

Este ceva care ar trebui asociat cu site-ul. Așa că vrem să putem activa și dezactiva această bară pentru că vrem să setăm lucrurile, dar poate că vrem să dorim să pornim aceasta în anumite perioade ale anului. S-ar putea să avem o anumită promoție sau o campanie, așa că dorim posibilitatea de a avea un câmp boolean, astfel încât să putem activa și dezactiva acest lucru. De asemenea, dorim să putem actualiza textul acțiunii apelate în sine sau în buton, așa că, desigur, câmpurile personalizate au foarte mult sens pentru asta.

Acum, pentru a configura o pagină de opțiuni, care este caracteristica din cadrul ACF care ne permite să facem acest lucru, pasul numărul unu este, de obicei, în funcțiile dvs., fișierul .PHP, sau puteți, desigur, să îl înregistrați în altă parte, poate un plug-in-ul pe care îl dezvoltați. Dar veți înregistra pagina de opțiuni în sine și există câteva configurații mici pe care le puteți face în setările de acolo. Puteți avea o singură pagină de opțiuni, dar puteți avea și mai multe, și le aveți cam imbricate, deci pagini copil, sau pagini părinte și lucruri de genul ăsta, astfel încât să puteți face lucruri interesante.

Pentru al nostru, al nostru este destul de simplu. Tocmai instalăm o bară de notificări aici, așa că avem nevoie doar de o singură pagină, așa că primul pas este să înregistrăm pagina de Opțiuni. Pasul doi, așa cum am proceda în mod normal, vom crea un grup de câmpuri. L-am numi câmpuri din bara promoțională, sau ceva de genul acesta, sau câmpuri din bara de notificări, și puteți vedea acolo că am câmpul meu boolean în partea de sus, deci adevărat sau fals este bara promoțională activă. Și apoi am un câmp de text pentru mesaj, un câmp de text pentru textul butonului, un câmp URL pentru linkul butonului și apoi s-ar putea să avem și un tip de notificare, dar poate că vrem să avem alerte sau stil promoțional notificări și, poate, facem un stil condiționat interesant pe baza celui care este selectat acolo.

Așadar, adăugăm grupul nostru de câmpuri și adăugăm câmpurile noastre, iar pasul trei este chiar mai jos. După cum știți, în regulile de locație, acum putem selecta pagina Opțiuni este egală cu– și vedeți setările site-ului pe care le am acolo – adică pagina Opțiuni pe care am înregistrat-o la pasul numărul unu. Și, cu toate acestea gata, în adminul WordPress acum vedem în partea stângă, în bara noastră de administrare avem Setări site, facem clic pe asta și vedem toate câmpurile, așa cum ne-am aștepta.

Și putem activa sau dezactiva bara de notificări. Putem să actualizăm textul, să actualizăm butonul și apoi acele date vor fi puse la dispoziție pentru șablonul nostru, astfel încât experiența de șabloane cu câmpurile de date dintr-o pagină de opțiuni este în general aceeași cu ceea ce ați face altfel. Există câteva mici nuanțe în ceea ce privește modul în care vizați în mod special faptul că aceasta este o pagină Opțiuni și nu o postare, dar accesați documentația de pe advancedcustomfields.com și vă îndrumă pe toți prin cum să gestionați asta. Numărul patru, o să ți-l arunc înapoi, Iain.

Iain Poulson: Mulțumesc, Rob, da. Vreau doar să vorbesc acum despre modul în care înregistrăm în mod programatic câmpurile cu ACF. Așadar, crearea câmpurilor în ACF este foarte ușoară cu interfața de utilizator Field Editor, genul de lucru pe care îl cunoaștem și îl iubim, pe care l-am văzut mai devreme, dar există și alte moduri de a defini câmpurile. ACF ne permite să exportăm atât fișiere JSON, cât și fișiere PHP cu definiții de câmp și care pot fi folosite pentru a crea câmpuri.

Dar știați că, de fapt, există în comunitatea ACF un pachet numit constructor ACF care vă permite să creați câmpuri folosind un fel de API fluent cu cod PHP? Este de fapt un pachet terță parte și se numește ACF Builder Package de la StoutLogic. Da, linkul GitHub este acolo. Practic, vă permite să creați câmpuri direct din cod, fără a cunoaște complexitatea modului în care ACF are nevoie de datele câmpului în PHP. Folosește un fel de mod expresiv de a face asta. Îl face reutilizabil și portabil.

Puteți trimite definițiile câmpurilor deoarece, cu fișierele PHP pentru controlul versiunii, este ușor să colaborați. Este ușor de trimis către mecanismul dvs. de implementare și, de asemenea, eliminați interfața de utilizare a editorului Field Group, astfel încât definiți acele câmpuri în cod, care apoi împiedică clienții să fie nevoiți să atingă interfața de utilizare, așa că haideți să vedem rapid cum Fă-o. Pentru a-l instala, pentru că este un pachet – am vorbit mai devreme despre Composer. Acesta este un pachet Composer pe care îl puteți instala cu următoarea comandă, Composer achiziționează StartLogic, furnizorul, ACF Builder, iar apoi așa arată codul.

Instanțiați o instanță a Fields Builder și îi oferiți slug-ul a ceea ce ar fi grupul de câmpuri. Și apoi spui, în acest grup de câmpuri, să adăugăm un câmp de text numit Director. Să adăugăm un câmp numeric numit An, iar apoi, important, vom seta locația pentru ca grupul de câmpuri să apară pe tipul de postare al filmului.

Și toate acestea fac multe pentru tine, fără să fii nevoit să te gândești la asta, așa că îi dai numele directorului pentru eticheta câmpului și va merge înainte și, evident, va crea melcul sau cheia pentru câmp fără ca tu să ai pentru a adăuga asta, deci elimină multă tastare, multă gândire și multă creație predispusă la erori. Și apoi a doua parte este în cazul în care încărcați acea definiție de câmp în ACF și va construi grupul de câmp pentru dvs.

Rob Stinson: Bine, deci numărul 5 aici, relații bidirecționale. Acum, acesta este un lucru interesant. Cred că îmi amintesc de acest proiect specific la care am lucrat în vremurile de agenție, când mi-am dat seama de asta și a fost un fel de schimbare a jocului. Așadar, dacă nu ați mai făcut acest lucru cu ACF, fiți atenți, pentru că acesta este un lucru cu adevărat util, așa că să ne uităm la un exemplu. Privind, desigur, site-ul nostru de premii VHS, avem o listă de 100 de filme și, evident, există diferite moduri de a conecta aceste lucruri.

Avem taxonomia personalizată de gen înainte. S-ar putea să avem câteva câmpuri diferite care se ocupă de lucruri precum etichetele sau gruparea, așa că relațiile bidirecționale sunt utile atunci când doriți să creați un anumit tip de conexiune bidirecțională între două postări sau, în cazul nostru, două filme. Deci, de exemplu, să presupunem că avem aceste trei filme în baza noastră de date și toate sunt animate, așa că vrem să creăm o relație bidirecțională cu ele.

Acum, ceea ce înseamnă asta este că spunem că avem primul nostru film aici, „Toy Story”, un film grozav, și identificăm că există alte două filme înrudite pe care vrem să le asociem. Așa că am putea crea un câmp de relații pentru tipul nostru de postare personalizat, care sunt filme, și am avea acolo un câmp de relații și am selecta filmul „Regele leu” și Prinții Monon – îmi pare foarte rău. Mă tot poticnesc de acest cuvânt. Îl măcelesc, dar filmul se numește „Princess Mononoke”. Ha, ha, ha. Te rog nu ma ura. Doar mă chinui să pronunț acel cuvânt dintr-un motiv oarecare.

Și identificăm că aceste două filme sunt legate, așa că le selectăm din Câmpul Relației. Acum, în acest caz, ar fi logic ca, da, „Regele Leu”, de exemplu, să aibă legătură cu „Povestea Jucăriilor” și, prin urmare, „Povestea Jucăriilor” să fie legat de „Regele Leu”. Așa că, în mod normal, am merge la „Regele Leu”, ecranul de editare, apoi am găsi „Toy Story” și l-am adăuga acolo, dar ne dublăm munca acolo. Deci, ceea ce face o relație bidirecțională este că creează automat acea conexiune pentru noi, ceea ce este cu adevărat, cu adevărat util.

Așa că, odată ce adăugăm, de exemplu, „Regele Leu” la „Povestea jucăriilor”, „Povestea jucăriilor” este adăugat automat la „Regele leului” și asta este foarte, foarte util. Economisește mult timp pentru creatorii de conținut și pentru managerii de conținut. Reduce riscul de a uita, sau poate că ați putea elimina unul dintr-o postare și apoi uitați să îl eliminați din cealaltă. Simplifică cu adevărat experiența de editare a conținutului, deci un lucru cu adevărat util care poate fi folosit, mai ales pe site-uri interesante ca acesta. Deci cum facem asta? Ei bine, există două modalități de a face acest lucru în prezent și voi vorbi despre un al treilea lucru, poate, care va avea loc mai târziu în acest an.

Deci, cum se face, numărul unu este că puteți face acest lucru în cod. Deci, doar cu plug-in-ul ACF Pro instalat, puteți scrie cod pentru a face acest lucru. Și puteți scrie o funcție care se conectează la ACF Update Value Filter, iar acest filtru rulează înainte ca o valoare să fie salvată și, practic, ceea ce face este, preia postarea curentă pe care o editați și identifică ID-ul postării. care a fost adăugat și apoi actualizează cealaltă postare și face acest fel de potrivire în fundal pentru tine, deci destul de util.

Un pic de cod, așa că atâta timp cât ești confortabil cu asta, nu este prea greu de ridicat. Dar, din nou, există un link acolo, sau o adresă URL, pe care o puteți consulta în documentele Câmpuri personalizate avansate pentru a vedea cum puteți face asta. Opțiunea a doua, totuși, nu este un cod, ceea ce este destul de plăcut uneori. Deci, acesta este de fapt un plug-in de ecosistem numit ACF Extended. Este disponibil pe WordPress.org și ceea ce face este că aduce această caracteristică în interfața de utilizare ACF în sine.

Deci, dacă ați instalat această extensie, ACF Extended și ați instalat ACF Pro, veți vedea o opțiune pe care atunci când creați un câmp de relație, există o comutare bidirecțională pe care o puteți activa și apoi puteți stabiliți asta într-o colecție chiar acolo din interiorul interfeței de utilizare, ceea ce este destul de util. Acum lucrurile merg cu adevărat interesant cu acest proiect, dar să nu ne pierdem capul cu el, sau ar trebui? Iain, la tine.

Iain Poulson: Da, mulțumesc Rob. Merită să spunem fără cap când vine vorba de ACF. ACF are suport fără cap, așa că da, site-uri subiacente fără cap, natura decuplată a site-urilor. Există o mulțime de comunicări API, iar ACF are suport API. API-ul REST pe care l-am adăugat nativ în ACF începând cu 5.11 sau 5.11 și acceptăm GraphQL cu pluginul WP GraphQL, care are un add-on ACF pentru WP GraphQL, astfel încât ACF acceptă site-uri fără cap. Are integrare cu programul WP Engine Atlas pentru site-uri WordPress corecte fără cap, dar să vorbim doar despre un fel de exemplu din lumea reală despre cum ați lua datele din site-ul nostru WordPress VHS și le-ați folosi într-un mod decuplat.

Deci, de exemplu, ascultă-mă, oamenii votează practic pe site-ul de premii VHS și vor fi... Cred că am stabilit o dată arbitrară, trebuie să voteze până la sfârșitul unei anumite date și noi Vom vedea care este cel mai popular. Avem cinematograful nostru local și face o carte dublă cu cele mai votate filme din anii '90. Deci au, la cinema, au panoul lor, și este online. Este conectat la web și putem alimenta dinamic ceea ce se afișează pe acel panou publicitar, așa că trebuie să ne conectăm la site-ul nostru WordPress.

De exemplu, panoul publicitar este o aplicație simplă de nod, trebuie să preluăm datele de pe site-ul VHS, așa că să aruncăm o privire rapidă cum am putea face asta cu un punct final personalizat API REST și, așa cum am spus mai înainte, am a primit suport GraphQL. Se poate face în ambele moduri, dar acesta este probabil un exemplu mai simplu de arătat. Deci, mai întâi de toate, vom crea o funcție care primește, practic, datele de care avem nevoie, așa că doar parcurgând asta, este o interogare WP care spune, vreau filme sau post tipuri de tip de film, dar eu doar vreau doi. Dar vreau să-l comand și după Câmpul ACF, care este numele câmpului este voturi, și îl comandăm în ordine descrescătoare, așa că vom obține partea de sus și vom obține partea de sus Două.

Apoi, în continuare, vom crea un punct final REST personalizat, care utilizează funcția de apel invers pe care am creat-o în diapozitivul anterior și care ne va oferi doar un punct final pe care îl putem atinge pentru a merge și a obține cele două filme. Așadar, cum arată de fapt în realitate – și acesta este doar o testare – deci URL-ul este vhsawards.com, WP-JSON și apoi i-am dat un spațiu de nume VHS Versiunea 1 în cazul în care vrem vreodată să schimbăm API-ul și tocmai avem o structură URL foarte simplă de popular.

Și asta înseamnă doar returnarea unui obiect JSON cu două articole, primele două votate, care s-a întâmplat să fie „Fight Club” și „Goodfellas”, care sunt destul de bune, așa că da. Cu siguranță este bine să arăți cum ACF alimentează site-urile decuplate și fără cap, dar este destul de greu să vorbești despre WordPress în acest moment fără a menționa blocaje. Nu pot să cred că am ajuns atât de departe fără să menționăm măcar blocaje. Ce ai pentru noi, Rob, să schimbăm asta?

Rob Stinson: Trebuie neapărat să vorbim despre blocuri. Înainte să o fac, mi-am dat seama că chiar înainte, când ne uităm la numărul cinci în jurul relațiilor bidirecționale, am făcut aluzie la un al treilea mod de a face asta. Nu l-am acoperit, așa că tot ceea ce vreau să spun este să urmăresc acest spațiu pentru că planificăm, avem pe foaia de parcurs, să ne uităm la adăugarea unui suport mai bun pentru relații bidirecționale în mod nativ în plugin-ul în sine, astfel încât să puteți facilita aceste lucruri doar în plug-in-ul ACF, fără a fi nevoie de chestii de la terți, așa că urmăriți acest spațiu, fără angajamente privind calendarul. Acesta este ceva la care ne uităm.

Deci numărul șapte, da. Să ne uităm la crearea unui bloc personalizat cu ACF. Acum majoritatea oamenilor știu că poți face asta în ACF acum, dar nu neapărat toți au încercat-o. Deci, dacă vă aflați în tabăra respectivă și sunteți un utilizator ACF de lungă durată și nu ați folosit acum funcționalitatea de blocare personalizată, urmăriți asta, deoarece s-ar putea să vă solicite doar să vedeți valoarea acestei caracteristici. Dar cum vom folosi asta pentru premiile VHS? Poate că vrem să avem o componentă de bloc pentru site-ul nostru în care să putem adăuga diverse locuri, iar aceasta este frumusețea unui bloc personalizat, sau a oricărui bloc, este că poate fi folosit și plasat pe pagini și postări de pe tot site-ul și dorim pentru a crea un bloc personalizat de apel la acțiune.

Acum, acesta este un bloc destul de simplu și cu siguranță puteți face lucruri mai interesante cu blocuri personalizate. Vom rămâne simplu acum. Dar acest banner albastru, apel la Action Block, dorim să îl putem plasa în pagina de pornire, sau poate pe unele postări de blog și lucruri de genul ăsta, încurajând cititorii și vizitatorii site-ului să facă clic pe acel buton și să parcurgă și votează pentru filmul lor preferat din anii '90. Deci, cum am construi acest bloc personalizat cu ACF? Și motivul pentru care o facem ca un bloc personalizat este că are un design unic.

Are acest gradient de fundal interesant pentru acest model de puncte care se repetă și ne-am dat seama că este mai ușor pentru noi să construim acest lucru ca bloc personalizat cu acel control reglat fin care ne oferă, față de ceea ce am putea face cu blocurile care sunt în afara raft cu miez WordPress. Deci cum facem asta? Pasul numărul unu este să înregistrăm blocul nostru personalizat, de obicei în functions.PHP sau oriunde scrieți acest tip de cod. Frumos și simplu, și indicăm directorul unde vor fi în cele din urmă fișierele șablon pentru blocul nostru personalizat, deci acesta este pasul numărul unu.

Pasul numărul doi, creăm grupul nostru de câmpuri și adăugăm câmpurile noastre. Așadar, pentru blocul nostru Acțiune numită, dorim să avem și text, text pentru buton, link pentru buton și culoare de fundal. Poate că vrem să oferim opțiunea pentru o variație a stilului pentru asta. Numărul trei este că, în regulile de locație, vom selecta blocul și vom spune că este egal cu, și am înregistrat blocul CTA chiar anterior și de aceea este disponibil pentru noi acolo în acel meniu derulant. Acum trecem la fișierul șablon, astfel încât toate câmpurile și totul sunt configurate, iar acum vom face unele dintre modelele noastre. Acum, șablonul este diferit, în anumite privințe, de modul în care ați fi, probabil, șablon tradițional cu ACF.

Dar în multe alte moduri, este foarte, foarte asemănător, așa că multe dintre modelele pe care le utilizați de obicei pentru dezvoltarea dvs., le veți folosi pe măsură ce vă construiți blocurile personalizate, ceea ce este fantastic. Deci, în proiectul nostru, vom spune că este tema noastră personalizată. Avem un director de blocuri, apoi avem un director CTA, care se potrivește cu blocul pe care l-am înregistrat și apoi, de obicei, veți avea trei fișiere șablon, block.JSONsomething.PHP, care este marcajul nostru HTML, și apoi punct CSS pentru nostru styling.

Așadar, acesta este tipul de bloc JSON și aici am înregistrat blocul, dar așa ne putem înțelege lucrurile puțin mai mult și puteți face multe aici în legătură cu configurația și diferitele caracteristici Core native care puteți activa sau dezactiva, puneți la dispoziție blocul personalizat. Așadar, verificați cu siguranță documentația despre asta și înțelegeți ce se poate face, deoarece aici puteți, așa cum am spus, să configurați modul în care acel bloc este disponibil și afișat, precum și caracteristicile, caracteristicile de bază prin care puteți trece la blocul dvs. personalizat.

Avem apoi fișierul nostru șablon, fișierul nostru PHP și puteți vedea aici că sunt doar un fel de a configura variabile care interacționează cu câmpul Obținere, interacționând cu datele din câmpul nostru de acolo, un pic de logică condiționată foarte simplă a stilului nostru acolo, și apoi HTML-ul nostru pentru blocul nostru în sine. Și apoi nu voi trece prin CSS. Știi ce este CSS și sunt sigur că probabil că ai putea scrie CSS mai bun decât ceea ce am scris eu aici, dar ai înțeles ideea. Aveți un fișier CSS pentru stilul blocului dvs. și puteți vedea că avem câteva lucruri interesante în jurul fonturilor și fundalul radial, gradient pentru acest tip de fundal cu puncte, ceea ce este oarecum distractiv.

Dar, din nou, motivul pentru care creăm acest bloc personalizat este că ne dorim să ne ajusteze cu adevărat CSS-ul, stilul, astfel încât să putem implementa cu adevărat designul la care lucrăm. Și doar pentru a vă arăta cum arată acest lucru în Editor, puteți vedea, putem selecta blocul nostru Acțiune numită, puteți lumina larg. Putem interacționa cu câmpurile noastre, să adăugăm textul pentru text și pentru buton și să adăugăm un link pentru buton, de asemenea, și acesta este un bloc personalizat foarte frumos pentru care îl putem trece la editorii noștri de conținut.

Iain Poulson: Da, mulțumesc, Rob. Ce priveliște arătosă. Chiar trebuie să punem asta live. Asta e minunat. Bine, hai să trecem peste ceea ce am vorbit astăzi. Așa că am analizat cum să instalăm ACF Pro, dar cu Composer. Am vorbit despre cum să înregistrăm tipuri de postări personalizate și taxonomii în ACF. Ne-am uitat la înregistrarea câmpurilor globale sau la nivelul întregului site cu o pagină de opțiuni și am analizat o modalitate diferită de a înregistra câmpuri în mod programatic cu un pachet.

Rob sa aprofundat în relații și cum să creeze relații bidirecționale. Ne-am referit la headless cu ACF, iar Rob tocmai a făcut un exemplu grozav de creare a unui bloc personalizat cu ACF cu aproape nimic în afară de PHP, HTML și CSS, și nicio reacție, așa că este foarte bine. A fost grozav, Rob. Care sunt voturile? Cum am ieșit?

Rob Stinson: Uite, pentru mine, totul se reduce la asta – cel mai grozav film al anilor '90 este, fără îndoială, „Hook” al lui Robin Williams. Multă nostalgie s-a învăluit pentru mine în asta, îmi place filmul. Dar tu, Iain?

Iain Poulson: Pentru mine, trebuie să fie „Robin Hood, Prințul Hoților” al lui Kevin Costner. Este un clasic. Uitați de părul rău, de chefali, de accentul englezesc dus, care nici măcar nu este un accent englezesc. Este cel mai grozav film cu Robin Hood din toate timpurile și acesta este un deal pe care sunt dispus să mor.

Rob Stinson: Ha, ha, nu, destul de corect. Uite, mulțumesc tuturor pentru petrecere. Sper că ați învățat ceva și așteptăm cu nerăbdare să vedem ce construiți cu ACF, noroc.