Om vi bläddrar i WordPress temakatalog, en majoritet av teman visar upp omslagsbilder. Det är en funktion i populär efterfrågan. Försättsbladstrenden är sant även i blockera temakatalogen skärmdumpar också.
Låt oss överväga följande exempel från Tjugo tjugo (ett klassiskt tema) som inkluderar en omslagsmall som kan användas för att visa både i enstaka inlägg och sida, där inläggets utvalda bild visas längst upp som sträcker sig över webbläsarskärmen, med inläggets titel och annan önskad metadata nedan. Omslagsmallar gör det möjligt att skapa innehåll som skiljer sig från de traditionella begränsningarna för att visa innehåll.
Att skapa omslagsmallar kräver för närvarande att du skriver PHP-kod som fångas här i Twenty Twenty standardtemas omslagsmall. Om vi tittar på template-parts/content-cover.php filen innehåller den koda för att visa innehåll när cover-template är använd.
Det är alltså inte möjligt att skapa ett skräddarsytt försättsblad om du inte har en djup kunskap om PHP. För många vanliga WordPress-användare är det enda alternativet att använda plugin som Custom Post Type UI som beskrivs i den här korta videon.
Täck avsnitt i blockteman
Eftersom WordPress 5.8, kan temaförfattare skapa anpassade mallar (som enstaka inlägg, författare, kategori och andra) med en topphjältesektion med blockredigerare omslagsblock och buntas in i sina teman med minimal eller ingen kod.
Innan vi dyker in i hur översta stora omslagssektioner skapas i blocktemans mallar, låt oss kort titta på de två blockteman Tjugo Tjugotvå och wabi av Rich Tabor (fullständig recension här.).
Bakom kulisserna implementerar Twenty Twenty-Two en stor header av lägga till en dold bild lagrad som ett mönster i header-dark-large delar. Medan i Wabi-temat är den stora bakgrundsfärgen i rubriken i ett enda inlägg implementerad med accentbakgrundsfärger och ett distansblock på 50 px höjd (rad: 5-9). Accentfärgerna hanteras av assets/js/accent-colors.js fil.
Många andra valde att skapa en topplocksektion genom att använda täckblock, som gjorde det möjligt för användare att ändra bakgrundsfärgen och lägga till en statisk bild från Media Library eller ladda upp från mediaenheter – utan att skriva någon kod. Med detta tillvägagångssätt, bilder från post utvalt bildblock var tvungen att läggas till manuellt i varje enskilt inlägg om du ville ha inläggsbilden som bakgrundsbild i enstaka inlägg.
Omslagsblock med dynamisk inläggsbild
WordPress 6.0 gjorde tillgänglig ännu en cool utvalda bildomslagsblock funktion, som tillåter användning av den utvalda bilden av alla inlägg eller sida som bakgrundsbild i omslagsblocket.
I följande kort video, Automattic-ingenjörer diskuterar att lägga till utvalda bilder för att täcka block med ett exempel från Archaeo tema:
Bildblocket inklusive post featured image block kan anpassas ytterligare med hjälp av duotone färg in theme.json som diskuterats i detta kort Att koppla ihop prickarna YouTube-video (Automattics Anne McCarthy).
Användningsexempel (Wei, Ljusläge)
Om vi bläddrar i miniatyrbilderna i blockera temakatalogen, ser vi att en majoritet av dem inkluderar stora omslagshuvudsektioner. Om vi gräver i deras mallfiler använder de sig av omslagsblock med statisk bildbakgrund.
Några nyligen utvecklade teman använder omslagsblock med den dynamiska bildbakgrunden (t.ex. Archeo, Wei, Frost, Bright Mode, etc.). En kort översikt över den nya funktionen finns i denna korta GitHub-video.
Kombinera dynamiska accentfärger funktioner i wabi tema med omslag och inlägg presenterade bildblock, utökar Rich Tabor sin kreativitet ytterligare i sin nya Wei tema (fullständig recension tillgänglig här.) för att visa dynamiska omslagsbilder från ett enda inlägg.
I sitt Wei tillkännagivande inlägg, Rich Tabor skriver: "Bakom kulisserna, den single.html mallen använder ett omslagsblock som utnyttjar inläggets utvalda bild. Sedan appliceras duotonen av det färgschema som tilldelats inlägget. På så sätt kommer nästan vilken bild som helst att se bra ut”.
Om du vill gräva djupare i Wei-temats header-omslagsblock och lära dig hur du skapar din egen, här är en kort video från Fränk Klein (WP Development Courses) som förklarar steg för steg hur det skapades.
I likhet med Wei-temat, Brian Gardner använder sig också av cover block med post featured image block i hans senaste Ljus läge tema att visa enastående innehåll med livliga färger.
Brian berättade för WPTavern: “han älskar mest om temat är hur Cover Block används på enstaka sidor. Den drar in den utvalda bilden i omslagsblocket och erbjuder även anpassade blockstilar för skuggor och alternativ i full höjd. […] Jag känner att det här verkligen presenterar vad som är möjligt med modern WordPress.”
För mer detaljer, här är dess demo webbplats och fullständig recension av Brians Bright Mode-tema.
Designa komplexa layouter med blockredigerare
Nyligen lanserade WordPress en ny designad blockredigerare landningshemsida och en ladda sidan. Tillkännagivandet väckte blandade reaktioner från sina läsare, inklusive från Matt Mullenweg (Automattic) som kommenterade de 33 dagar det tog att designa och lansera en sådan "enkel sida". Du kan hitta ytterligare bakom kulisserna diskussioner här.
Som svar skapade Jamie Marsland från Pootlepress denna YouTube -video där han återger en nästan identisk hemsida på nästan 20 minuter.
Kommenterar Marsland-videon, Sarah Gooding från WP Travern skriver: ”Han är vad man kan beskriva som en avancerad användare med blockredigeraren. Han kan snabbt blanda rader, kolumner och grupper runt, justera utfyllnad och marginaler efter behov, och tilldela varje avsnitt motsvarande färg för designen. För närvarande är detta inte något de flesta genomsnittliga WordPress-användare skulle kunna göra.”
Även om blockredigeraren har kommit långt, finns det fortfarande växande smärtpunkter för de flesta temautvecklare och vanliga användare att skapa och designa komplexa layouter med den.
Lägger till förbättring till TT2 Gopher-block
I det här avsnittet kommer jag att gå igenom hur jag lade till förbättringar av TT2 Gopher Blocks tema som jag refererade till i min tidigare artikel. Inspirerad av omslagsblock från teman som jag beskrev tidigare, ville jag lägga till tre omslagsmallar (författare, kategori och enkelomslag) till temat.
När vi surfar på webbplatser märker vi två typer av omslagsrubriker. Den mest observerade rubriken är omslagssektionen blandad med webbplatsens rubrik (webbplatstitel och toppnavigering) i omslagsblocket (t.ex. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). Vi hittar också header cover sektion som inte är blandad med site header och placerad precis under, som denna BBC Future hemsida. För TT2 Gopher block-tema valde jag det senare.
Skapa omslagshuvudmönster
Låt oss först skapa omslagsrubrikmönster för mallar för författare, singel och andra (kategorier, taggar) med hjälp av omslagsblock. Sedan kommer vi att konvertera dem till mönster (som beskrivs här tidigare) och anropa respektive rubrikomslagsmönster i mallarna.
Om du är bekant med att arbeta med blockredigeraren, designa din rubriksektion med omslagsblock i webbplatsredigeraren och konvertera sedan omslagshuvudkoden till mönster. Men om du inte är bekant med FSE-editorn är det enklaste sättet att kopiera mönster från mönsterkatalog i ett inlägg, gör nödvändiga ändringar och omvandla det till ett mönster.
I min tidigare CSS-Tricks-artikel, diskuterade jag i detalj om att skapa och använda blockmönster. Här är en kort översikt över arbetsflödet som jag använder för att skapa det enkla postomslagshuvudmönstret:
Mönster för sidhuvud med en stolpe
steg 1: Med hjälp av FSE-gränssnittet, låt oss skapa en ny tom fil och börja bygga blockstruktur som visas på den vänstra panelen.
Alternativt kan detta göras i ett inlägg eller en sida först, och sedan kopiera och klistra in markeringen i en mönsterfil senare.
steg 2: Därefter, för att dölja ovanstående markering till ett mönster, bör vi först kopiera dess kodmarkering och klistra in i en ny /patterns/header-single-cover.php i vår kodredigerare. Vi bör också lägga till obligatorisk mönsterfilshuvuduppmärkning (t.ex. titel, slug, kategorier, infogare, etc.).
Här är hela koden för /patterns/header-single-cover.php fil:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
steg 3: För den här demon har jag använt den här bilden från fotokatalogen som en fyllnadsbakgrundsbild och tillämpade Midnatt duotone färg. För att använda inläggsutvalda bilder dynamiskt bör vi lägga till "useFeaturedImage":true i omslagsblocket genom att ersätta ovanstående utfyllnadsbildlänk strax före "dimRatio":50 så att raden 10 ska se ut så här:
Alternativt kan utfyllnadsbilden också ändras genom att klicka ersätta och välja Använd utvald bild alternativ:
Nu bör omslagsmönstren för rubriken vara synliga i panelen för infogning av mönster för användning var som helst i mallarna, inläggen och sidorna.
Arkivomslagsrubriker
Inspirerad av detta WP Tavern-inlägg och en steg-för-steg-genomgång för att skapa en författarmallrubrik, jag ville skapa en liknande omslagsrubrik och lägga till TT2 Gopher-tema också.
Låt oss först skapa arkivomslagshuvudmönstret för author.html mallen också, enligt ovanstående arbetsflöde. I det här fallet skapar jag detta på en ny tom sida, genom att lägga till block (som visas nedan i listvyn):
I bakgrunden för omslaget använde jag samma bild som användes i omslaget för en posthuvud.
Eftersom vi skulle vilja visa en kort författarbiografi på författarblocket bör ett biografiskt uttalande också läggas till på användarprofilsidan, annars kommer ett tomt utrymme att visas i front-end.
Följande är uppmärkningskoden för header-author-cover, som vi kommer att använda mönster i nästa steg:
Published by:
För att dölja uppmärkningen till en header-author-cover mönster, bör vi lägga till den nödvändiga mönsterfilens rubrikmarkering som beskrivits tidigare. Genom att redigera header-author-cover.php mönster kan vi skapa liknande rubrikomslag för taggar, taxonomi och andra anpassade mallar.
Smakämnen header-category-cover.php mönster för min category.html mallen är tillgänglig på GitHub.
Skapa mallar med sidhuvudsblock
WordPress 6.0 och den senaste Gutenberg 13.7 utökade mallskapande funktioner i blockredigeraren, vilket gör det möjligt för många WordPress-användare, utan djup kunskap om kodning, att skapa sina anpassade mallar.
För mer detaljerad information och användningsfall, här är en grundlig anpassningsanteckning av Justin Tadlock.
Blockera redaktör gör det möjligt att skapa olika typer av mallar, inklusive omslagsmallar. Låt oss kortfattat överblicka hur man kombinerar täckblock och post utvalt bildblock med ny mall UI gör det enkelt att skapa olika typer av anpassade omslagsmallar även med ingen eller låg kodningsförmåga.
Att skapa mallar har gjorts mycket enklare med Gutenberg 13.7. Hur man skapar blockmallar med koder och i webbplatsredigeraren beskrivs i Tema handbok och i min tidigare artikel.
Författarmall med omslagsblock
Toppmarkeringen (huvudsektionen) för author.html mallen visas nedan (rad 6):
...
...
...
... Här är skärmdumpar av omslagsrubriker för author.html och category.html mallar:
Hela kod för båda mallarna är tillgänglig på GitHub.
Enkel stolpe med täckblock
För att visa omslagsblocket i vårt enda inlägg måste vi ringa till header-cover-single pattern under rubriken (rad 3):
....
....
....Här är en skärmdump som visar frontvyn av det enda inlägget med sidhuvudets omslagssektion:
Hela single-cover.html mallen är tillgänglig på GitHub.
Du kan hitta ytterligare steg-för-steg handledningar om hur du skapar en hjälte header post avsnitt och med hjälp av omslagsblock för bakgrundsbild med inlägg on WP Tavern och Fullständig redigering av webbplatsen webbsajt.
Där har du det!
Praktiska Resurser
Utvalt bildomslagsblock
Blogginlägg
Även om blockteman i allmänhet är det får massor av pushback från WordPress-communitymedlemmar, enligt min åsikt, de är framtiden för WordPressockså. Med blockteman kan amatörtemaförfattare, utan djupa kodningsfärdigheter och behärskning av PHP och JavaScript-språk, nu skapa teman med komplexa layouter med en hjälteomslagssektion som beskrivs i den här artikeln i kombination med mönster och stilvariationer.
Som en tidig Gutenberg-användare kunde jag inte vara mer exalterad med de nya temaverktygen som skapa blocktema plugin och andra som tillåter temaförfattare att uppnå följande direkt från blockredigeringsgränssnittet utan att skriva någon kod:
- (I) skapa
- (ii) skriva över temafiler och exportera
- (iii) generera tomt eller ett underordnat tema, och
- (iv) modifiera och spara stilvariationer av det aktuella temat
Dessutom tillåter de senaste iterationerna av Gutenberg-pluginen aktivering flytande typografi och layoutanpassningar och andra stilistiska kontroller med endast theme.json fil utan JavaScript och en rad CSS-regler.
Tack för att du läser och delar dina kommentarer och tankar nedan!
