Gestionarea și crearea de modele de vârf

Cei care stăpânesc modelele de bloc vor fi puternic poziționați să conducă în noua paradigmă de proiectare, construire și scalare WordPress.

Urmăriți această sesiune pentru a afla cum puteți utiliza cele mai recente funcții de model, precum și un nou instrument interesant care îmbunătățește experiența de gestionare a modelelor pentru freelanceri și agenții.

Difuzoare:

• Michael Day, inginer React la WP Engine
• Phil Johnston, Senior Staff Software Engineer la WP Engine

Slide-urile sesiunii:

Transcriere:

PHIL JOHNSTON: Bună ziua. Numele meu este Phil Johnston și sunt Senior Staff Software Engineer la WP Engine. Și eu, împreună cu colegul meu de echipă Mike Day, vom vorbi despre gestionarea și crearea modelelor de ultimă oră în WordPress.

Deci, există o mulțime de lucruri noi și interesante care sunt adăugate la WordPress în ultima vreme. Și unul dintre acestea este modelele. Și o să vorbesc despre asta. Modelele sunt făcute din blocuri. Așa că haideți să ne aruncăm direct în ea.

Veți folosi blocuri în editorul de blocuri, care este tabloul de bord WordPress. Aici ați merge pentru a crea ceva de genul unei postări pe blog sau o pagină și unde puteți începe să scrieți sau să creați. Și este locul în care ai folosi blocuri.

Așa că am putut împrumuta câteva blocuri LEGO de la copiii mei pentru această discuție. Așadar, pentru a ilustra acest lucru, când te uiți la pagina de aici unde scrie că sunt un bloc de titlu, te poți gândi la asta ca la un bloc LEGO. Și apoi dedesubt, unde scrie că sunt un bloc de paragraf, te poți gândi la asta ca la un alt bloc pe care l-ai tăiat sub acesta și apoi așa mai departe și așa mai departe.

Mai ai un bloc de direcție dedesubt. Așa că puteți face clic pe acesta. Și apoi puteți începe să vă construiți pagina după cum doriți. Și puteți rearanja acele blocuri doar făcând clic, trăgând sau reordonând. Și apoi vă puteți reasambla pagina foarte ușor astfel, deoarece toate sunt blocate.

Deși acest lucru este foarte simplu pentru ceva de genul unei postări pe blog și puteți să vă scufundați direct în editor și să începeți să faceți asta fără să știți că acestea sunt blocuri, dar puteți construi și un aspect de bloc mult mai complex, cum ar fi ceea ce dvs. văd aici. Deci aici aveți un aspect cu trei coloane cu trei imagini. Și mai sus, aveți de fapt o coloană cu lățime completă. Și se întinde pe toate cele trei coloane. Și apoi trei blocuri de imagine, trei blocuri de titlu de probă, trei blocuri de paragraf și apoi trei blocuri de butoane dedesubt.

Deci, din nou, blocurile WordPress sunt ca LEGO. Le puteți combina pentru a crea fie un aspect simplu, precum primul pe care l-am arătat, fie un aspect mai complex, precum cel la care vă uitați chiar aici. Și așa am evidențiat blocurile pe care v-ați aștepta să le vedeți pe o pagină ca aceasta în roșu. Deci, puteți vedea că primul are o cutie roșie în jurul lui. Scuzați-mă. Și asta reprezintă un bloc. Și apoi dedesubt, aveți un alt bloc cu niște text Lorem ipsum în el și apoi trei blocuri de imagine, așa cum am menționat, trei blocuri de titlu, trei blocuri de paragraf sub acesta și trei blocuri de butoane.

S-ar putea să credeți că este tot ce este nevoie pentru a face un aspect de pagină ca acesta, dar de fapt este ceva mai complex decât atât. Așa că aici, pe acest slide, am evidențiat blocurile invizibile, blocurile pe care nu le puteți vedea. Acestea sunt blocuri care trebuie să fie pe pagină pentru a defini unde ar trebui să stea lucrurile, cum ar fi faptul că există trei coloane în loc de o singură coloană.

Prin urmare, blocurile invizibile, deși puternice, sunt, de asemenea, foarte greu pentru un utilizator obișnuit să se scufunde și să înceapă să le folosească. Pe măsură ce mișcați mouse-ul în interiorul editorului de blocuri, nu veți ști că există blocuri invizibile acolo, deoarece sunt invizibile. Și toate aceste blocuri au, de asemenea, controale complexe care vin împreună cu ele. De exemplu, iată unul dintre blocurile de coloane.

Și dacă te uiți în partea dreaptă, poți vedea toate controalele complexe care vin împreună cu cele care nu sunt foarte ușor sau intuitiv de înțeles. Lucruri precum blocurile interioare folosesc lățimea conținutului sau umplutura sau spațierea între blocuri. Utilizatorul mediu nu va ști sau înțelege ce fac aceste setări. Și asta seamănă puțin cu mine dacă ar fi să intru într-o bucătărie și să văd o grămadă de mirodenii.

Nu sunt un bucătar grozav. Și așa aș avea o grămadă de mirodenii pe raft ca acesta. Și nu aș ști să le combin sau să le folosesc pentru că nu mi-am făcut timp să devin bucătar. Și la fel cum este nevoie de timp pentru a deveni un bucătar de cinci stele și a găti o masă grozavă și delicioasă, este nevoie de timp și există o curbă dificilă de învățare cu editorul de blocuri și înțelegerea blocurilor să folosești, în ce moment, pentru a face ceva care arată bine sau are gust. bun.

Și deci este o specialitate. Este un meșteșug pe care trebuie să îl dezvolți. Deci, utilizatorul obișnuit va fi aruncat în editorul de blocuri cu o listă goală, precum ceea ce vedeți aici. Și nu vor ști că trebuie să folosească un bloc de coloane, sau cum să folosească acel bloc, sau ce să pună în acel bloc, practic condimentele pe care trebuie să le combine pentru a face ceva care să arate cu adevărat grozav.

S-ar putea să-l considere frustrant. S-ar putea să li se pară obositor și dificil să obțină ceea ce își doresc. Și chiar dacă învață toate aceste complexități ale blocurilor, s-ar putea să nu aibă abilități de proiectare. Și astfel, deși sunt puternice, blocurile pot fi dificil de utilizat. Și de aceea a fost inventat conceptul de model.

Deci, la WP Engine, am construit un plugin numit Atomic Blocks. Și în Atomic Blocks, practic am venit cu conceptul de model, dar le-am numit secțiuni și machete. Și este exact același concept. Și WordPress Core de fapt s-a inspirat din Atomic Blocks pentru conceptul a ceea ce sunt acum în WordPress Core și se numesc modele.

Deci, modelele sunt grupuri prefabricate de blocuri pe care utilizatorii le pot naviga, așa cum vedeți aici. Există o grămadă de modele aici din care să aleagă. Și făcând clic pe unul, ei primesc toate acestea inserate în pagina lor cu un singur clic. Deci, în loc să fie nevoie să asambleze astfel de blocuri, blocuri LEGO, ei obțin ceva de genul acesta, un grup preasamblat de o grămadă de blocuri care a fost făcut, sperăm, de cineva care este deja foarte bun la proiectare și a pus ore întregi în acea meșteșug de a face. blocuri.

Și așa că, odată ce îl inserați în pagină, arată puțin cam așa. Și chiar așa, boom, ai un model, o grămadă de blocuri preasamblate care arată bine, au gust bun și funcționează și pe care apoi poți să intri și să tastați textul pe care trebuie să îl schimbați. . Așadar, ați schimba ceva precum titlul eșantionului la textul unic pentru pagina dvs.

Deci, tiparele sunt ca un avantaj enorm pentru utilizatorul obișnuit. Nu trebuie să învețe toate complexitățile editorului de blocuri, toate aceste lucruri complexe. Nu trebuie să fie un designer profesionist, dar pot obține un design grozav doar inserând un model pe pagină.

Deci, dacă sunteți o agenție, cineva care construiește site-uri web pentru o altă persoană sau un client, puteți folosi modele de bloc pentru a ajuta clienții să se ajute singuri. Livrând o mulțime de modele prestabilite clientului dvs., acesta își poate construi propriile pagini.

Așa că spuneți că urmează un eveniment pentru care au nevoie de o pagină specială. Ei pot lua un model de bloc pe care l-ați creat pentru ei, care se potrivește cu marca lor. Se potrivește cu schema lor de culori și cu toate aceste lucruri, și pot doar să facă clic și să o insereze în pagină și să facă inginerie inversă – trebuie doar să începeți să tastați în acele blocuri în loc să fie nevoie să știe toate complexitățile blocului pe care să-l folosească. scenariu și ce să nu faci, de asemenea, și cum să construiești un aspect care funcționează grozav pe dispozitive și toate aceste tipuri de lucruri.

Cu toate acestea, în timp ce modelele de bloc sunt ușor de utilizat pentru utilizatorul obișnuit, ele nu sunt ușor de creat. Și sunt și mai greu de gestionat în timp. Și pentru dezvoltatori și agenții, WordPress nu are un flux de lucru sau instrumente care să vă ajute să creați modele.

Așa că am rupt pașii pentru construirea unui model în prezent în ceea ce voi numi pe calea grea aici în 10 pași. Și dacă acest lucru pare copleșitor, este pentru că așa este. Primul lucru pe care trebuie să-l faceți este să creați un fișier PHP într-un editor de cod precum VS Code. Trebuie să puneți un antet de fișier specific în partea de sus a acelui fișier.

Atunci ai nevoie de unde să construiești. Deci trebuie să aveți un WordPress, probabil pe local, ceea ce este grozav. Dar apoi trebuie să creați o pagină temporară în interiorul acelui WordPress doar pentru a putea pune blocuri undeva și a lucra la ele. Și apoi trebuie să-l construiești. Trebuie să folosești acele abilități, acel meșteșug pe care l-ai dezvoltat și să-l faci să pară frumos. Și apoi, când ați terminat, trebuie să treceți la o vizualizare de cod și să copiați tot acel cod în acel fișier pe care l-ați creat la pasul unu.

Și apoi trebuie să salvați acel fișier într-o locație specifică din tema dvs. Dacă construiți o temă și o livrați clientului dvs., trebuie să o puneți în directorul de modele. Și apoi, dacă modelul tău conține imagini ca în aspectul cu trei coloane pe care l-am arătat, trebuie să te asiguri că acele imagini vor funcționa într-adevăr atunci când le vei livra clientului tău. Deci, deoarece ați creat-o pe computerul dvs. local, acea imagine va fi, de asemenea, referită în cod ca și cum ar fi pe hard disk-ul computerului local.

Evident, aceasta este o problemă. Odată ce nu mai este pe computer, acea imagine nu va funcționa. Deci, trebuie să parcurgeți codul cu un pieptene cu dinți fin, să căutați oricare dintre adresele URL ale computerelor locale și să le înlocuiți cu o etichetă PHP specifică. Și apoi trebuie să vă asigurați că mutați efectiv acele fișiere imagine și în tema dvs. Nu îl poți schimba pur și simplu în cod. De asemenea, trebuie să mutați acel fișier.

Și apoi, ca să fie și mai greu, aici devine cu adevărat, cred că cel mai frustrant, cel puțin pentru mine, când construiam o mulțime de modele, a fost dacă aș face o greșeală de ortografie în interiorul unui model, ar trebui să încep. la pasul trei din nou și mergeți până la pasul nouă din nou de fiecare dată doar pentru a remedia o greșeală de ortografie. De asemenea, trebuie să – pentru că trebuie să regenerați tot codul de bloc de fiecare dată – trebuie să căutați toate acele URL-uri de imagine și să le înlocuiți, să le puneți înapoi în fișier.

Este un întreg set repetitiv, plictisitor de pași, mai ales pentru gestionarea în timp. Ca să spunem că trebuie să modificați un model peste câteva luni. Este foarte plictisitor. Și acesta este ceva ce ne-am întâlnit în timp ce construim modele pentru colecția noastră Genesis Pro. Am livrat o mulțime de secțiuni și machete sau modele cu acestea și am devenit foarte frustrați de procesul de a face aceste lucruri plictisitoare din nou și din nou și din nou.

Și asta ne-a determinat să construim un instrument care să ne ajute să nu trebuie să facem aceste lucruri, să eliminăm această oboseală și să o facem într-adevăr cât mai rapid posibil. Poți doar să lucrezi la el, să-l salvezi și, boom, va merge direct în fișier pentru tine. Acesta va pune fișierul în locul potrivit. Acesta scrie tot codul pentru tine. Și așa am decis să construim un instrument pentru noi înșine în interior care să înlăture toată această durere. Și niciodată nu am intenționat ca acesta să devină ceva pe care să-l lăsăm pe alții să îl folosească, dar a devenit atât de util pentru noi încât am vrut să îl punem la dispoziție și pentru alți oameni.

Deci, din nou, după cum puteți vedea, modul dificil actual de a construi un model nu este ideal și nu este o modalitate grozavă de a face lucrurile. De aceea, am construit Pattern Manager, o interfață de utilizare pentru crearea și menținerea colecțiilor de modele în WordPress. Așa că îl voi preda colegului meu, Mike Day, pentru a ne prezenta managerul de modele și a ne arăta toate caracteristicile minunate din interiorul acestuia. Deci la tine, Mike.

MIKE DAY: Bună. Eu sunt Mike. Sunt inginer software la WP Engine. Modelele sunt un instrument puternic de creare a machetelor care au potențialul de a schimba jocul pentru constructorii WordPress. Dar, așa cum tocmai a demonstrat Phil, experiența utilizării efective a acestor modele în ceea ce privește crearea și gestionarea lor este cel puțin lipsită. Pattern Manager își propune să aducă gestionarea fișierelor de tipare în prim-planul designului WordPress într-un mod fără fricțiuni, printr-un plugin care poate aluneca în fluxul dvs. de lucru. Să sărim înăuntru.

Pentru scopurile inițiale ale acestei demonstrații, voi lăsa fereastra editorului de cod deschisă aici, în dreapta. Acesta este un fișier cu model real salvat direct pe discul meu. Și chiar vreau să aduc punctul de vedere că atunci când lucrezi cu Pattern Manager, de fapt manipulezi și creezi fișiere fizice salvate pe disc. Mai exact, acestea sunt salvate în directorul dvs. de teme curent. Așa că puteți vedea chiar aici aceste două fișiere PHP sau fișiere de model, ele reprezintă modelele care sunt active în prezent în această vizualizare de modele.

În plus, rețineți acest director de imagini. Phil a adus în discuție un punct cu adevărat interesant că, chiar acum, când lucrați cu modele, să presupunem că aveți o grămadă de imagini salvate într-un model. Toate acele URL-uri pentru acele imagini anume vor indica instalarea dvs. locală. Aceasta este o mare problemă ori de câte ori vine timpul să vă împărtășiți munca.

Toate aceste imagini vor fi sparte. Așa că abordăm asta puțin diferit. De fapt, salvăm copii ale acestor imagini direct în folderul cu teme. Acesta este un schimbător de joc pentru controlul versiunilor, de exemplu. Să presupunem că tu și colaboratorii tăi folosiți Git. Acum puteți fi sigur că aveți toți acces la aceleași imagini în timp ce lucrați.

BINE. Deci, să intrăm de fapt în interfață. Aceasta este vizualizarea tiparelor. Și imediat aici, puteți vedea ambele modele care sunt înregistrate pentru tema mea. Când treceți cu mouse-ul peste o previzualizare a modelului, observați butoanele de acțiune care apar. Avem opțiuni pentru editarea, duplicarea sau ștergerea unui anumit model. Există, de asemenea, câteva opțiuni de filtrare aici, în stânga, dar voi reveni la asta aici în scurt timp. Deocamdată, să intrăm și să edităm un model.

Deci imediat, sunt sigur că veți recunoaște o interfață de utilizare foarte familiară. Acesta este editorul de blocuri WordPress, în acest caz reutilizat pentru a oferi un spațiu specific pentru lucrul cu modele. Și aici, în dreapta, veți vedea aceste diferite proprietăți de antet. Acum, înainte de a trece la acestea, vreau să dau puțin mai mult context și să folosesc de fapt niște text împrumutat din documentația pentru dezvoltatori WordPress.

Proprietatea titlului este destul de explicită. Acesta este un ID care poate fi citit de om, dacă doriți, pe care utilizatorii îl vor vedea când interacționează cu modelul dvs. pe un site. Categoriile sunt într-adevăr folosite pentru gruparea tiparelor împreună. Aceasta va fi o serie de categorii înregistrate în care puteți adăuga una sau mai multe, sau chiar deloc, dacă doriți. Dar există o problemă aici cu modul actual în care funcționează în WordPress Core.

Nu există într-adevăr o modalitate excelentă de a spune ce categorii sunt de fapt disponibile. Nu există un loc evident pentru a găsi aceste categorii de modele de bloc înregistrate nicăieri pe site-ul dvs., cel puțin despre care știu eu. Acum, cuvintele cheie pe care le puteți considera ca fiind un fel de termeni de căutare. În esență, puteți introduce aceste alias-uri descriptive pentru a vă descrie modelul, astfel încât, indiferent de ce caută utilizatorii în insert, aceștia pot găsi cu ușurință ceea ce au nevoie. Și descrierea este un fel de extensie a acelei idei, cu excepția că este un text ascuns vizual. Acest lucru este cu adevărat util pentru utilizatorii cu deficiențe de vedere care ar putea folosi un cititor de ecran.

Acum săriți înapoi în Managerul de modele, să modificăm aceste meta proprietăți. Titlul modelului este o simplă introducere de text. Pur și simplu începe să tastați pentru a redenumi modelul. Dar observați o caracteristică ascunsă aici. Managerul de modele îmi spune că un model cu acest titlu există deja în temă. Nu vreau să distrug accidental acel fișier, așa că o să las titlul în pace.

BINE. Să alegem câteva categorii. Deci, imediat, observați că am redat această listă de categorii doar într-un meniu vertical. În caz contrar, este greu de știut unde să găsești de fapt aceste date. Dar această listă este populată dinamic printr-un apel API. Aceasta înseamnă nu numai toate categoriile de modele de bloc înregistrate pentru tema dvs., ci și orice categorie pe care ați putea-o fi înregistrat, o vom afișa aici. Să alegem doar prezentate deocamdată.

BINE. Și să adăugăm câțiva termeni care pot fi căutați. În scopul acestei demonstrații, voi folosi doar un model de probă. Dar amintiți-vă că aici ați putea adăuga termeni care ar descrie acest model pentru utilizatorii care caută în insertor. Și observați că am folosit un termen cu mai multe cuvinte aici. Acestea sunt acceptate în managerul de modele.

BINE. Și să adăugăm o descriere. Amintiți-vă că acesta este un text ascuns vizual. Deci, în opinia mea, intenția principală aici este de a ajuta cititorii de ecran. Deci, să descriem asta ca trei coloane cu culori inversate. BINE. Perfect. Simt că suntem într-un loc bun acum. Ne putem salva de fapt munca. Dar înainte de a face asta, vreau să acordați o atenție deosebită antetului din acest fișier din dreapta. Acum, de îndată ce am apăsat Actualizare model, dintr-o dată există mult mai multe date aici. Descrierea, categoriile și cuvintele cheie pe care tocmai le modificam au apărut toate aici fără ca eu să fiu nevoit să ating acest fișier.

BINE. Să ne uităm la meta proprietățile rămase. Deci, în primul rând, avem o proprietate destul de interesantă în lățimea ferestrei de vizualizare. Acesta este destinat să fie un număr întreg care reprezintă lățimea scalată pentru previzualizarea acestui model. Deci, în mod implicit, ori de câte ori creați un model – să presupunem că faceți ceva cu lățime completă sau poate chiar foarte îngustă. Setările implicite pentru aceasta într-un nucleu WordPress ar putea face ca scalarea să pară puțin ciudată în previzualizări.

Deci tipuri de postări. Aceasta este pur și simplu o serie de melci de tip post cu care modelul este destinat să fie utilizat. Rețineți că adăugarea de valori aici va restricționa de fapt modelul, astfel încât să funcționeze numai cu acele tipuri de postări. De asemenea, rețineți că dacă lăsați acest necompletat, modelul va funcționa cu toate tipurile de postări.

În continuare avem tipuri de blocuri. Acesta este un alt tablou, dar de data aceasta tipul de blocuri este destinat să fie folosit. Acum trebuie să recunosc, de câte ori am început să folosesc aceste tipuri de blocuri, mi s-a părut puțin confuz. Se pare că utilizarea este într-adevăr destinată a fi multifuncțională, dar intenția din spatele acesteia nu este foarte clară în opinia mea.

Și, în sfârșit, avem proprietatea de inserare. Acum, în mod implicit, toate modelele vor apărea în insertor, dar să presupunem că doriți să schimbați asta. Pur și simplu ați adăuga o valoare booleană false pentru această proprietate și va fi ascunsă de utilizare în insertor.

Așa că, revenind la Pattern Manager, să vedem cum gestionăm aceste meta proprietăți rămase. În primul rând, voi închide aceste alte panouri. Și să aruncăm o privire la lățimea ferestrei de vizualizare. Acum amintiți-vă că aceasta este o valoare întreagă care controlează pur și simplu previzualizările scalate pentru modelul dvs. în insertor. Un lucru care este o durere cu implementarea actuală a acestui lucru este să vezi de fapt rezultatele muncii tale.

Deci, să presupunem că modific antetul din fișierul meu de model și schimb lățimea ferestrei de vizualizare. Singura modalitate de a vedea cu adevărat cum arată este să spunem crearea unei noi postări. Asta devine puțin complicat. Este doar puțin prea complicat să sari înainte și înapoi. Este un pic de durere. Așadar, modul în care ne-am abordat este pur și simplu să treci cu mouse-ul peste glisor și imediat este afișată o previzualizare. Și pe măsură ce mă trag și încerc diferite dimensiuni, pot vedea cum se scalează acest model. Acest lucru este cu adevărat util și un mare economie de timp. Să alegem 1.200 deocamdată. Și să trecem la tipurile de postări.

Primul lucru de remarcat despre acest panou este prezența acestor sfaturi. Acestea sunt doar mici informații care să încerce și să vă ghideze pe drum în timp ce utilizați aplicația. Deci, în primul rând, acesta este doar reiterea unui lucru despre care am discutat deja. Dacă nu există selecții, dacă nu există tipuri de postări adăugate la antetul fișierului dvs. de model, modelul dvs. va funcționa pentru toate tipurile de postări. Dar observați mai jos că există această setare numită Vizibilitate modală.

Aceasta este o caracteristică ascunsă cu adevărat cool. În esență, dacă aveți tipul corect de tip de bloc în antetul fișierului dvs. de model, ori de câte ori utilizatorii creează o nouă postare de tipul vizat, vor vedea un modal care apare. Și vă pot alege modelul direct din acel mod. Și vă voi arăta exact ce vreau să spun într-o clipă. Dar vreau să observați cum acest comutator este de fapt dezactivat. Și asta pentru că setările de vizibilitate modală nu vor funcționa decât dacă există un tip de postare populat.

Deci, modul în care abordăm acest lucru este pur și simplu dezactivând comutatorul până când este prezent un tip de postare. BINE. Acum pot activa acest lucru. Iar afișajul și dispozitivul de inserare comută, face ceea ce ați putea ghici. Dacă ar fi să dezactivați această opțiune, aceasta ar atribui o valoare false în antetul fișierului dvs. Și acest model nu ar mai apărea în insertor. BINE. Să mergem mai departe și să actualizăm asta.

Acum să vedem cum funcționează de fapt toate acestea într-o postare. Așa că voi schimba și voi crea o postare nouă. Acum, imediat, acesta este acel modal despre care vorbeam în acțiune. Deoarece tipul corect de bloc și tipul de postare sunt ambele adăugate la fișier, acum văd acest lucru imediat când creez o nouă postare. Și pot pur și simplu să dau clic pe previzualizarea modelului și, boom, modelul meu este chiar acolo.

Este destul de grozav, dar haideți să vedem cum funcționează de fapt etichetarea altfel. Deci, iată categoria pe care am ales-o, caracteristica. Și celălalt model din tema mea are categoriile de coloane și text, așa că funcționează excelent. Dar termenii mei de căutare? Termenul meu de căutare cu model de exemplu. Funcționează grozav. Și textul meu ascuns a început cu trei coloane, de asemenea, funcționând exact așa cum a fost intenționat. Grozav.

BINE. Așa că haideți să revenim și să acoperim încă o meta proprietate rămasă. Acesta este puțin ciudat de explicat. Simt că e mai ușor dacă îți arăt în schimb. Deci, haideți să creăm un nou model. Tot ce trebuie să faci pentru asta este să apeși acest buton Creare model nou. Și iată-mă din nou în editor. În acest caz, voi alege blocul de cod. Și în acest bloc de cod, voi lipi niște exemplu de cod.

Acum, acesta este de fapt preluat din documentația WordPress. Acesta este modul în care ați înregistra o transformare de bloc folosind PHP. Deci, ați lua acest cod și poate ați lipi într-un fișier cu funcții, orice ați prefera. Permiteți-mi să vă arăt cum abordăm asta. În această secțiune de tip bloc transformat, există un meniu derulant. Acest meniu drop-down este populat dinamic la fel ca tipurile și categoriile de postări printr-un apel API.

Așa că pot pur și simplu să caut tipul meu vizat – aici este, nucleul/codul – și să-l aleg. Acum doar pentru a ilustra încă o dată, diferența este în modul în care ați putea face acest lucru acum față de utilizarea managerului de modele. Pentru a face acest lucru acum, trebuie să vânez acest bloc de cod, să îmi dau seama exact de ce conținut am putea avea nevoie, să îmi dau seama tipul meu de bloc și să-l lipesc undeva, în comparație cu Pattern Manager, tocmai am ales acest câmp. Am ales această valoare dintr-un meniu derulant. BINE. Să actualizăm asta. Și voi crea o nouă postare. Și să ieșim din modal nostru.

Acum, de data aceasta, voi alege și blocul de cod. Dar, în loc să populez acest lucru cu conținut, pot alege pur și simplu această opțiune din bara de instrumente. Și observați această selecție de model. Când aleg modele, există modelul meu. Și făcând clic pe el, imediat acest bloc a fost transformat în modelul meu țintă.

Un alt lucru de acoperit cu tipurile de transformare este ideea a ceea ce se numește modele de bloc semantice. Acestea sunt asemănătoare unei transformări bloc, dar vizează părțile șablonului. De exemplu, anteturi și subsoluri. Dar există o problemă acolo. Un lucru de știut despre selectarea acelui tip de bloc de parte a șablonului țintă este că trebuie să aveți și tipul corect de post alocat sau pur și simplu nu va funcționa. Deci, modul în care am abordat acest lucru este prin simpla atribuire a acestui tip de șabloane pentru dvs. Și este blocat. Și va rămâne blocat până când acest tip de bloc este cu adevărat eliminat.

Așadar, asta este pentru demonstrația inițială a acestei vizualizări editor, dar trebuie să schimb temele în fundal aici. Și acum voi reveni la vizualizarea modele. Ideea aici este să vă arătăm cum se comportă Managerul de modele cu o mulțime de modele. Această temă specială are peste 50 de modele înregistrate.

Acum observă, în timp ce fac clic în jurul acestor diferite categorii, cât de imediat sunt filtrate aceste modele. Acest lucru este foarte util atunci când încerc să găsesc ceea ce am nevoie printre o grămadă de modele. Dar să presupunem că doriți un control mai granular. Pur și simplu începe să tastezi. Această filtrare funcționează foarte asemănător cu Insererul. Este cu adevărat util și foarte rapid. Și vorbind despre snappy, încă un lucru de subliniat este cât de rapidă se simte această interfață.

Observați cum aceste previzualizări nu se încarcă până când derulez efectiv la ele. Aceasta este o implementare personalizată care este într-adevăr excelentă la economisirea resurselor browserului. Și face ca această aplicație să se simtă rapidă și foarte rapidă, indiferent de câte modele folosiți. În regulă. Am acoperit o mulțime de teren în această prezentare, așa că haideți să recapitulăm rapid. Modelele reprezintă o intersecție interesantă între gestionarea elementelor de conținut individuale și designul paginii întregi.

În calitate de constructor WordPress, abilitatea de a crea elemente de aspect mai mari și de a le reutiliza pe o temă este o idee convingătoare. Anteturi, subsoluri, mărturii, casete de caracteristici. Acestea sunt toate semnele distinctive ale fiecărui site web. Și acum vă puteți proiecta cu ușurință întregul site cu modele.

Acum, în ciuda apariției modelelor ca o componentă cheie a temelor bloc, WordPress în sine nu are nicio interfață oficială pentru crearea sau gestionarea efectivă a acestor modele și nici nu există nimic pe foaia de parcurs. În schimb, constructorii trebuie să creeze modele manual în editorul lor de cod, copiend și lipând codul înainte și înapoi de zeci de ori, lăsând mult loc pentru erori.

Produsul nostru, Pattern Manager, este proiectat pentru a intra în fluxul dvs. de lucru. Pur și simplu instalați și activați pluginul și veți obține o interfață de utilizare modernă pentru filtrarea modelelor, crearea, duplicarea, editarea, ștergerea și toate acestea, împreună cu experiența de editare a conținutului în experiența familiară de utilizare a editorului WordPress de bază. În plus, multe complicații mai greu de înțeles ale etichetării corecte a unui fișier de tipar, de exemplu, adăugarea de categorii, cuvinte cheie sau poate chiar restricționarea pentru a lucra numai cu anumite tipuri de postări personalizate, sunt toate rezumate în interfața noastră de utilizare. Constructorii au control complet asupra acestor setări prin comenzile din bara laterală ușor de utilizat.

Pattern Manager a fost lansat și este disponibil pentru descărcare acum la adresa URL de mai jos. Învârte-i și spune-ne părerea ta. Și vă rog să nu ezitați să mă contactați personal și să-mi spuneți ce părere aveți. Sperăm să încercați Pattern Manager. Și sperăm că te ajută în același mod în care a ajutat echipa noastră de constructori WordPress. Mulțumesc.