Dacă răsfoim Director de temă WordPress, majoritatea temelor prezintă imagini de copertă. Este o caracteristică la cererea populară. Tendința paginii de copertă este adevărată chiar și în blocați directorul de teme capturi de ecran de asemenea.
Să luăm în considerare următorul exemplu din Douăzeci și douăzeci (o temă clasică) care include a șablon de copertă care poate fi folosit pentru a afișa atât într-o singură postare, cât și în pagină, unde imaginea prezentată a postării este afișată în partea de sus, care se întinde pe ecranul browserului, cu titlul postării și alte metadate dorite mai jos. Șabloanele de copertă permit crearea de conținut care iese în evidență față de constrângerile tradiționale de afișare a conținutului.
Crearea șabloanelor de copertă necesită în prezent scrierea codului PHP așa cum este capturat aici în Șablonul de copertă implicit al temei Twenty Twenty. Dacă ne uităm la template-parts/content-cover.php fișier, acesta conține fișierul cod pentru afișarea conținutului atunci când cover-template este folosit.
Astfel, nu este posibil să creați o pagină de copertă personalizată dacă nu aveți cunoștințe profunde de PHP. Pentru mulți utilizatori obișnuiți de WordPress, singura opțiune este să folosească plugin-uri asemănătoare Custom UI tip post așa cum este descris în acest scurt videoclip.
Acoperiți secțiuni în teme de bloc
Întrucât WordPress 5.8, autorii de teme ar putea crea șabloane personalizate (cum ar fi o singură postare, autor, categorie și altele) cu o secțiune de top eroi folosind editor bloc bloc de acoperire și incluse în temele lor cu cod minim sau fără cod.
Înainte de a descoperi cum sunt create secțiunile mari de copertă în șabloanele de teme de bloc, să ne uităm pe scurt la cele două teme de bloc Douăzeci și douăzeci și doi și wabi de Rich Tabor (recenzie completă aici).
În spatele scenei, Twenty Twenty-Two implementează un antet mare adăugarea unei imagini ascunse stocată ca model în header-dark-large părți. În timp ce, în tema Wabi, culoarea de fundal a antetului mare într-o singură postare este implementată cu accentuează culorile de fundal și un bloc de distanță de 50 px înălțime (linii: 5-9). Culorile de accent sunt gestionate de assets/js/accent-colors.js fișier.
Mulți alții au ales să creeze o secțiune de acoperire superioară folosind bloc de acoperire, care a permis utilizatorilor să schimbe culoarea de fundal și să adauge o imagine statică din Media Library sau să încarce de pe dispozitive media - fără a scrie niciun cod. Cu această abordare, imaginile din postați bloc de imagini prezentate trebuia adăugat manual la fiecare postare dacă ați vrut ca postarea să prezinte imaginea de fundal în postările individuale.
Blocuri de acoperire cu imagine dinamică prezentată în postare
WordPress 6.0 a făcut disponibil un alt cool blocuri de acoperire a imaginilor prezentate caracteristică, care permite utilizarea imaginii prezentate a oricărei postări sau pagini ca imagine de fundal în blocul de copertă.
În cele ce urmează video scurt, Inginerii Automattic discută despre adăugarea de imagini prezentate pentru a acoperi blocuri cu un exemplu din Archaeo temă:
Blocul de imagini, inclusiv blocul de imagini post-reprezentat, poate fi personalizat suplimentar folosind duotone culoare în theme.json așa cum se discută în acest scurt scurt Unind punctele Video YouTube (Anne McCarthy de la Automattic).
Exemple de cazuri de utilizare (Wei, Modul luminos)
Dacă răsfoim imaginile în miniatură din blocați directorul de teme, vedem că majoritatea dintre ele includ secțiuni mari de antet de copertă. Dacă săpăm în fișierele lor șablon, ei folosesc blocuri de acoperire cu fundal de imagine statică.
Unele teme dezvoltate recent folosesc blocuri de acoperire cu fundal dinamic al imaginii prezentate în postare (de exemplu, Archeo, Wei, Frost, Bright Mode etc.). O scurtă prezentare generală a noii caracteristici este disponibilă în acest scurt videoclip GitHub.
Combinând caracteristicile de culori de accent dinamic ale wabi cu o temă cu coperta și blocuri de imagini prezentate în postare, Rich Tabor își extinde și mai mult creativitatea în noua lui Wei tema (recenzia completă disponibilă aici) pentru a afișa imagini dinamice de copertă dintr-o singură postare.
În mesajul său de anunț Wei, Rich Tabor scrie: „În culise, cel single.html șablonul folosește un bloc Cover care folosește imaginea prezentată a postării. Apoi duotonul este aplicat de schema de culori atribuită postării. În acest fel, aproape orice imagine va arăta bine”.
Dacă doriți să aprofundați în blocul de acoperire a antetului temei Wei și să aflați cum să vă creați propriul, iată un video scurt din Fränk Klein (WP Development Courses) care explică pas cu pas cum a fost creat.
Similar cu tema Wei, Brian Gardner folosește, de asemenea, blocul de acoperire cu blocul de imagini post prezentate în recentul său Mod luminos temă cu care să afișați conținut remarcabil culori vibrante.
Brian a spus WPTavern: „Cel mai mult îi place tema este modul în care este folosit Cover Block pagini singure. Atrage imaginea prezentată în blocul Copertă și oferă, de asemenea, stiluri de bloc personalizate pentru umbre și opțiuni de înălțime completă. […] Simt că acest lucru prezintă cu adevărat ceea ce este posibil cu WordPress modern.”
Pentru mai multe detalii, aici este site demo și revizuire completă a temei Bright Mode a lui Brian.
Proiectarea machetelor complexe cu editor de blocuri
Recent, WordPress a lansat un nou editor de blocuri conceput pagina de start de aterizare și pagina de descărcare. Anuntul a atras reacții mixte de la cititorii săi, inclusiv de la Matt Mullenweg (Automatic) care a comentat cele 33 de zile necesare pentru proiectarea și lansarea unei astfel de „pagini simple”. Puteți găsi discuții suplimentare în spatele scenei aici.
Ca răspuns, Jamie Marsland de la Pootlepress a creat acest videoclip de pe YouTube unde reproduce o pagină de pornire aproape identică în aproape 20 de minute.
Comentând videoclipul Marsland, Sarah Gooding de la WP Travern scrie: „El este ceea ce s-ar putea descrie ca un utilizator puternic cu editorul de blocuri. El poate amesteca rapid rânduri, coloane și grupuri, ajustând umplutura și marginile după cum este necesar și să atribuie fiecărei secțiuni culoarea corespunzătoare pentru design. În acest moment, acesta nu este ceva ce majoritatea utilizatorilor obișnuiți de WordPress ar putea face.”
Deși editorul de blocuri a parcurs un drum lung, există încă puncte în creștere pentru majoritatea dezvoltatorilor de teme și utilizatorii obișnuiți pentru a crea și proiecta machete complexe cu acesta.
Adăugarea de îmbunătățiri la blocurile TT2 Gopher
În această secțiune, vă voi prezenta modul în care am adăugat îmbunătățiri la Tema TT2 Gopher Blocks la care am făcut referire în articolul meu anterior. Inspirat de blocurile de copertă din temele pe care le-am descris mai devreme, am vrut să adaug trei șabloane de copertă (autor, categorie și o singură copertă) temei.
În timpul navigării pe site-uri web, observăm două tipuri de anteturi de copertă. Antetul cel mai observat este secțiunea de acoperire amestecată cu antetul site-ului (titlul site-ului și navigarea de sus) în blocul de acoperire (de exemplu, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode etc.). Găsim, de asemenea, secțiunea de acoperire a antetului care nu este amestecată cu antetul site-ului și poziționată chiar dedesubt, cum ar fi aceasta Viitorul BBC site-ul web. Pentru tema blocurilor TT2 Gopher, am optat pentru cea din urmă.
Crearea modelelor de antet de copertă
În primul rând, să creăm modele de antet de copertă pentru șabloane de autor, single și altele (categorii, etichete) folosind blocuri de copertă. Apoi le vom converti în modele (așa cum este descris aici anterior) și apelați modelele de acoperire antet respective în șabloane.
Dacă sunteți familiarizat să lucrați cu editorul de blocuri, proiectați-vă secțiunea antet folosind blocuri de copertă în editorul site-ului și apoi convertiți codul antetului de copertă în modele. Cu toate acestea, dacă nu sunteți familiarizat cu editorul FSE, atunci cel mai simplu mod este să copiați modele din directorul de modele într-o postare, faceți modificările necesare și transformați-o într-un model.
În mea articolul anterior CSS-Tricks, am discutat în detaliu despre crearea și utilizarea modelelor de bloc. Iată o scurtă prezentare generală a fluxului de lucru pe care îl folosesc pentru a crea modelul de antet al unui singur post:
Model de antet pentru acoperirea unui singur post
Etapa 1: Folosind interfața FSE, să creăm un nou fișier gol și să începem să construim structura blocului așa cum se arată în panoul din stânga.
Alternativ, acest lucru ar putea fi făcut mai întâi într-o postare sau într-o pagină, apoi copiați și lipiți marcajul într-un fișier cu model, mai târziu.
Etapa 2: Apoi, pentru a ascuns marcajul de mai sus într-un model, mai întâi ar trebui să copiem codul de marcare și să lipim într-un nou model. /patterns/header-single-cover.php în editorul nostru de cod. De asemenea, ar trebui să adăugăm marcajul necesar pentru antetul fișierului de model (de exemplu, titlu, slug, categorii, insertor etc.).
Iată întregul cod al /patterns/header-single-cover.php fișier:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Etapa 3: Pentru acest demo, am folosit această imagine din directorul de fotografii ca imagine de fundal de umplere și a aplicat Miezul nopţii culoare biton. Pentru a utiliza în mod dinamic imaginea prezentată în postare, ar trebui să adăugăm "useFeaturedImage":true în blocul de acoperire prin înlocuirea linkului de imagine de umplere de mai sus chiar înainte de "dimRatio":50 astfel încât linia 10 ar trebui să arate astfel:
Alternativ, imaginea de umplere poate fi modificată și făcând clic Înlocui și selectarea Utilizați imaginea prezentată opţiune:
Acum, modelele de acoperire antet ar trebui să fie vizibile în panoul de inserare a modelelor pentru a fi utilizate oriunde în șabloane, postări și pagini.
Arhivă antete de copertă
Inspirat de această postare WP Tavern și o explicație pas cu pas pentru a crea un antet șablon de autor, am vrut să creez un antet de copertă similar și să îl adaug și la tema TT2 Gopher.
În primul rând, să creăm modelul antetului coperta arhivei pentru author.html șablonul, de asemenea, urmând fluxul de lucru de mai sus. În acest caz, o creez într-o nouă pagină goală, adăugând blocuri (după cum se arată mai jos în vizualizarea listă):
În fundal pentru coperta, am folosit aceeași imagine folosită în coperta antetului unei singure postări.
Deoarece am dori să afișăm o scurtă biografie a autorului pe blocul autorului, ar trebui adăugată și o declarație biografică pe pagina de profil a utilizatorului, altfel va fi afișat un spațiu liber în front-end.
Următorul este codul de markup al header-author-cover, pe care îl vom folosi model, în pasul următor:
Published by:
Pentru a acoperi marcajul într-un header-author-cover model, ar trebui să adăugăm marcajul necesar pentru antetul fișierului de model așa cum este descris mai devreme. Prin editarea header-author-cover.php model, putem crea coperți de antet similare pentru etichete, taxonomie și alte șabloane personalizate.
header-category-cover.php model pentru mine category.html șablonul este disponibil pe GitHub.
Crearea de șabloane cu blocuri de acoperire antet
WordPress 6.0 și recent Gutenberg 13.7 Șabloane extinse care creează caracteristici în editorul de blocuri, făcând astfel posibil ca mulți utilizatori WordPress, fără cunoștințe profunde de codificare, să își creeze șabloanele personalizate.
Pentru informații mai detaliate și cazuri de utilizare, aici este a notă de personalizare amănunțită de Justin Tadlock.
Editor bloc permite crearea diferitelor tipuri de șabloane, inclusiv șabloane de copertă. Să vedem pe scurt cum se combină bloc de acoperire și postați bloc de imagini prezentate cu noua interfață de utilizare a șablonului facilitează crearea diferitelor tipuri de șabloane personalizate de acoperire, chiar și cu abilități de codare lipsite sau scăzute.
Crearea șabloanelor a fost mult mai ușoară cu Gutenberg 13.7. Cum se creează șabloane de bloc cu coduri și în editorul site-ului este descris în Manual tematic și, în articolul meu precedent.
Șablon de autor cu bloc de copertă
Marcajul de sus (secțiunea antetului) al author.html șablonul este prezentat mai jos (linia 6):
...
...
...
... Iată capturi de ecran ale antetelor de copertă pentru author.html și category.html șabloane:
Intregul codul pentru ambele șabloane este disponibil pe GitHub.
Stâlp unic cu bloc de acoperire
Pentru a afișa blocul de acoperire în singura noastră postare, trebuie să apelăm la header-cover-single pattern sub secțiunea antet (linia 3):
....
....
....Iată o captură de ecran care arată vederea frontală a postării unice cu secțiunea de acoperire a antetului:
Intregul single-cover.html șablonul este disponibil pe GitHub.
Puteți găsi tutoriale pas cu pas suplimentare despre crearea unui secțiunea de postare a antetului eroului și utilizând blocuri de copertă de fundal de imagine post prezentate on Taverna WP și Editare completă a site-ului site-ul web.
Acolo îl ai!
Resurse utile
Bloc de acoperire a imaginii prezentate
Blog posturi
Chiar dacă temele de bloc, în general, sunt primind o mulțime de respingeri de la membrii comunității WordPress, in opinia mea, ei sunt viitorul WordPress, de asemenea. Cu teme de bloc, autorii de teme amatori, fără abilitățile profunde de codificare și stăpânirea limbajelor PHP și JavaScript, pot acum crea teme cu machete complexe, cu o secțiune de coperta erou, așa cum este descris în acest articol, combinată cu modele și variatii de stil.
Ca un utilizator Gutenberg timpuriu, nu aș putea fi mai încântat de noile instrumente de tematică, cum ar fi creați tema blocului plugin și altele care permit autorilor de teme să realizeze următoarele direct din interfața de utilizare a editorului de blocuri fără a scrie niciun cod:
- (I) crea
- (ii) suprascrieți fișierele tematice și exportați
- (iii) generează o temă goală sau copil și
- (iv) modificați și salvați variația de stil a temei curente
În plus, iterațiile recente ale pluginului Gutenberg permit activarea tipografie fluidă și aliniamente de layout și alte controale stilistice folosind numai theme.json fișier fără JavaScript și o linie de reguli CSS.
Vă mulțumim că ați citit și împărtășiți comentariile și gândurile voastre mai jos!