Hvis vi blar gjennom WordPress temakatalog, et flertall av temaene viser omslagsbilder. Det er en funksjon i populær etterspørsel. Forsidetrenden er sann selv i blokker temakatalogen skjermbilder også.
La oss vurdere følgende eksempel fra Tjue tjue (et klassisk tema) som inkluderer en omslagsmal som kan brukes til å vise både i enkeltinnlegg og side, hvor innleggets fremhevede bilde vises øverst som strekker seg over nettleserskjermen, med innleggstittel og annen ønsket metadata nedenfor. Omslagsmaler lar deg lage innhold som skiller seg ut fra de tradisjonelle begrensningene for å vise innhold.
Å lage omslagsmaler krever for øyeblikket å skrive PHP-kode som fanget her i Twenty Twenty standard temas omslagsmal. Hvis vi ser på template-parts/content-cover.php filen, inneholder den kode for å vise innhold når cover-template benyttes.
Dermed er det ikke mulig å lage en tilpasset forside dersom du ikke har dyp kunnskap om PHP. For mange vanlige WordPress-brukere er det eneste alternativet å bruke plugin som Custom Post Type UI som beskrevet i denne korte videoen.
Dekk seksjoner i blokktemaer
Siden WordPress 5.8, kan temaforfattere lage egendefinerte maler (som enkeltinnlegg, forfatter, kategori og andre) med en toppheltseksjon ved å bruke blokkredigerer omslagsblokk og buntet inn i temaene deres med minimal eller ingen kode.
Før vi dykker inn i hvordan de øverste store omslagsseksjonene lages i blokktemamaler, la oss kort se på de to blokktemaene Tjue og tjueto og Wabi av Rich Tabor (full anmeldelse her.).
Bak kulissene implementerer Twenty Twenty-Two en stor header av legge til et skjult bilde lagret som et mønster i header-dark-large deler. Mens i Wabi-temaet er den store overskriftens bakgrunnsfarge i et enkelt innlegg implementert med aksent bakgrunnsfarger og en 50px høyde avstandsblokk (linjer: 5-9). Aksentfargene administreres av assets/js/accent-colors.js filen.
Mange andre valgte å lage en toppdekseldel ved å bruke dekkblokk, som tillot brukere å endre bakgrunnsfargen og legge til et statisk bilde fra Media Library eller laste opp fra medieenheter – uten å skrive noen kode. Med denne tilnærmingen kan bilder fra post utvalgt bildeblokk måtte legges til manuelt i hvert enkelt innlegg hvis du ønsket å ha post-fremhevet bilde som bakgrunnsbilde i enkeltinnlegg.
Dekkblokker med dynamisk post-fremhevet bilde
WordPress 6.0 gjort tilgjengelig enda en kul omtalte bildedekselblokker funksjon, som tillater bruk av det fremhevede bildet til ethvert innlegg eller side som bakgrunnsbilde i omslagsblokken.
I de neste kort video, Automattic-ingeniører diskuterer å legge til utvalgte bilder for å dekke blokker med et eksempel fra Archaeo tema:
Bildeblokken inkludert bildeblokk med post-utvalgte bilder kan tilpasses ytterligere ved å bruke duotone farge inn theme.json som diskutert i denne korte artikkelen Se sammenhengen YouTube-video (Automattics Anne McCarthy).
Brukseksempler (Wei, lysmodus)
Hvis vi blar gjennom miniatyrbildene i blokker temakatalogen, ser vi at et flertall av dem inkluderer store omslagshodeseksjoner. Hvis vi graver i malfilene deres, bruker de omslagsblokker med statisk bildebakgrunn.
Noen nylig utviklede temaer bruker dekkblokker med den dynamiske bildebakgrunnen (f.eks. Archeo, Wei, Frost, Bright Mode, etc.). En kort oversikt over den nye funksjonen er tilgjengelig i denne korte GitHub-videoen.
Kombinere dynamiske aksentfarger funksjoner av Wabi tema med bildeblokker med omslag og innlegg, utvider Rich Tabor sin kreativitet ytterligere i sin nye Wei tema (full anmeldelse tilgjengelig her.) for å vise dynamiske forsidebilder fra et enkelt innlegg.
I sitt Wei-kunngjøringsinnlegg, Rich Tabor skriver: «Behind-the-scenes, the single.html malen bruker en omslagsblokk som utnytter innleggets fremhevede bilde. Deretter påføres duotone av fargeskjemaet som er tildelt innlegget. På denne måten vil omtrent alle bilder se bra ut».
Hvis du vil grave dypere inn i Wei-temaets overskriftsdekselblokk og lære hvordan du lager din egen, her er en kort video fra Fränk Klein (WP Development Courses) som forklarer steg-for-steg hvordan det ble opprettet.
I likhet med Wei-temaet, Brian Gardner gjør også bruk av cover block med post omtalt bildeblokk i hans siste Lys modus tema for å vise fremstående innhold med livlige farger.
Brian fortalte WPTavern: «han elsker mest om temaet er måten Cover Block brukes på enkeltsider. Den trekker det fremhevede bildet inn i Cover-blokken og tilbyr også tilpassede blokkstiler for skygger og alternativer i full høyde. […] Jeg føler at dette virkelig presenterer hva som er mulig med moderne WordPress.»
For flere detaljer, her er den demo nettsted og full anmeldelse av Brians Bright Mode-tema.
Utforme komplekse layouter med blokkredigering
Nylig lanserte WordPress en ny blokkredigerer designet landingshjemmeside og en laste siden. Kunngjøringen vakte blandede reaksjoner fra sine lesere, inkludert fra Matt Mullenweg (Automattic) som kommenterte de 33 dagene det tok å designe og lansere en slik "enkel side". Du kan finne flere bak kulissene diskusjoner her.
Som svar opprettet Jamie Marsland fra Pootlepress denne YouTube -videoen hvor han gjengir en nesten identisk hjemmeside på nesten 20 minutter.
Kommenterer Marsland-videoen, Sarah Gooding fra WP Travern skriver: «Han er det man kan beskrive som en superbruker med blokkredaktøren. Han kan raskt blande rader, kolonner og grupper rundt, justere polstring og marger etter behov, og tildele hver seksjon den tilsvarende fargen for designet. På dette tidspunktet er ikke dette noe de fleste gjennomsnittlige WordPress-brukere kan gjøre.»
Selv om blokkredigeringsprogrammet har kommet langt, er det fortsatt økende smertepunkter for de fleste temautviklere og vanlige brukere for å lage og designe komplekse oppsett med den.
Legger til forbedring til TT2 Gopher-blokker
I denne delen vil jeg lede deg gjennom hvordan jeg la til forbedringer til TT2 Gopher Blocks-tema som jeg refererte til i min forrige artikkel. Inspirert av omslagsblokker fra temaer som jeg beskrev tidligere, ønsket jeg å legge til tre omslagsmaler (forfatter, kategori og enkeltomslag) til temaet.
Når vi surfer på nettsteder, legger vi merke til to typer omslagsoverskrifter. Den mest observerte overskriften er omslagsseksjonen blandet med sideoverskriften (nettstedets tittel og toppnavigasjon) inn i omslagsblokken (f.eks. Twenty Twenty, Twenty Twenty-To, Wei, Wabi, Frost, Bright Mode, etc.). Vi finner også header cover-seksjon som ikke er blandet med site header og plassert rett under, slik som dette BBC Future nettsted. For TT2 Gopher-blokker-tema valgte jeg det siste.
Opprette omslagshodemønstre
La oss først lage omslagshodemønstre for forfatter-, enkelt- og andre maler (kategorier, tagger) ved å bruke omslagsblokker. Deretter vil vi konvertere dem til mønstre (som beskrevet her tidligere) og kall inn de respektive toppdekselmønstrene i malene.
Hvis du er kjent med å jobbe med blokkredigeringsprogrammet, utform topptekstdelen ved å bruke omslagsblokker i nettstedsredigereren og konverter deretter omslagsoverskriftskoden til mønstre. Men hvis du ikke er kjent med FSE-editoren, er den enkleste måten å kopiere mønstre fra mønsterkatalog i et innlegg, gjør nødvendige endringer og konverter det til et mønster.
I min forrige CSS-Tricks-artikkel, diskuterte jeg i detalj om å lage og bruke blokkmønstre. Her er en kort oversikt over arbeidsflyten som jeg bruker for å lage overskriftsmønsteret for enkelt postomslag:
Toppmønster med enkelt stolpedeksel
Trinn 1: Ved å bruke FSE-grensesnittet, la oss lage en ny tom fil og starte byggeblokkstrukturen som vist på venstre panel.
Alternativt kan dette gjøres i et innlegg eller en side først, og deretter kopiere og lime inn markeringen i en mønsterfil senere.
Trinn 2: Deretter, for å skjule markeringen ovenfor til et mønster, bør vi først kopiere kodemarkeringen og lime inn i en ny /patterns/header-single-cover.php i vår kodeeditor. Vi bør også legge til nødvendig mønsterfiloverskrift (f.eks. tittel, slug, kategorier, inserter, etc.).
Her er hele koden for /patterns/header-single-cover.php file:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Trinn 3: For denne demoen har jeg brukt dette bildet fra fotokatalogen som et utfyllende bakgrunnsbilde, og brukte Midnatt duotone farge. For å bruke post omtalt bilde dynamisk, bør vi legge til "useFeaturedImage":true i dekselblokken ved å erstatte utfyllingsbildelinken ovenfor like før "dimRatio":50 slik at linje 10 skal se slik ut:
Alternativt kan utfyllingsbildet også endres ved å klikke Erstatt og velg Bruk fremhevet bilde alternativ:
Nå skal toppdekselmønstrene være synlige i mønsterinnsettingspanelet for bruk hvor som helst i malene, innleggene og sidene.
Arkivomslagsoverskrifter
Inspirert av dette WP Tavern-innlegget og en trinn-for-trinn-gjennomgang for å lage en forfattermaloverskrift, jeg ønsket å lage en lignende omslagsoverskrift og legge til TT2 Gopher-tema også.
La oss først lage topptekstmønsteret for arkivdekselet author.html malen også, etter arbeidsflyten ovenfor. I dette tilfellet oppretter jeg dette på en ny tom side ved å legge til blokker (som vist nedenfor i listevisning):
I bakgrunnen for omslaget brukte jeg det samme bildet som ble brukt i enkeltpostoverskriften.
Fordi vi ønsker å vise en kort forfatterbiografi på forfatterblokken, bør en biografisk uttalelse også legges til på brukerprofilsiden, ellers vil det vises en tom plass i front-end.
Følgende er markup-koden til header-author-cover, som vi vil bruke mønster i neste trinn:
Published by:
For å skjule markeringen til en header-author-cover mønster, bør vi legge til den nødvendige mønsterfiloverskriften som beskrevet tidligere. Ved å redigere header-author-cover.php mønster, kan vi lage lignende overskrifter for tagger, taksonomi og andre tilpassede maler.
De header-category-cover.php mønster for min category.html malen er tilgjengelig på GitHub.
Opprette maler med toppdekselblokker
WordPress 6.0 og den siste Gutenberg 13.7 utvidet malopprettingsfunksjoner i blokkredigeringsprogrammet, og gjør det dermed mulig for mange WordPress-brukere, uten dyp kunnskap om koding, å lage sine tilpassede maler.
For mer detaljert informasjon og brukstilfeller, her er en grundig tilpasningsnotat av Justin Tadlock.
Blokkeringsredaktør lar deg lage ulike typer maler, inkludert omslagsmaler. La oss en kort oversikt over hvordan kombinere dekkblokk og post utvalgt bildeblokk med ny mal gjør brukergrensesnittet enkelt å lage ulike typer tilpassede omslagsmaler selv med ingen eller lave kodingsferdigheter.
Å lage maler har blitt mye enklere med Gutenberg 13.7. Hvordan lage blokkmaler med koder og i nettstedsredigering er beskrevet i Temahåndbok og i min forrige artikkel.
Forfattermal med omslagsblokk
Topp (overskriftsseksjon) markering av author.html malen er vist nedenfor (linje 6):
...
...
...
... Her er skjermbilder av omslagsoverskrifter for author.html og category.html maler:
Hele kode for begge malene er tilgjengelig på GitHub.
Enkel stolpe med dekkblokk
For å vise omslagsblokk i enkeltinnlegget vårt, må vi ringe til header-cover-single pattern under overskriftsdelen (linje 3):
....
....
....Her er et skjermbilde som viser front-end-visningen av enkeltinnlegget med toppdekseldelen:
Hele single-cover.html malen er tilgjengelig på GitHub.
Du kan finne flere trinnvise veiledninger for å lage en hero header post seksjon og ved å bruke omslagsblokker for bakgrunnsbilde med innlegg on WP Tavern og Fullstendig redigering av nettstedet nettside.
Der har du det!
Nyttige Ressurser
Utvalgt bildedekselblokk
Blogginnlegg
Selv om blokktemaene generelt sett er det får mye tilbakemelding fra WordPress-fellesskapsmedlemmer, etter min mening, de er fremtiden til WordPressogså. Med blokktemaer kan forfattere av amatørtemaer, uten dype kodingsferdigheter og mestring av PHP- og JavaScript-språk, nå lage temaer med komplekse oppsett med en helteomslagsseksjon som beskrevet i denne artikkelen kombinert med mønstre og stilvariasjoner.
Som en tidlig Gutenberg-bruker kunne jeg ikke vært mer begeistret for de nye temaverktøyene som lage blokktema plugin og andre som lar temaforfattere oppnå følgende direkte fra blokkredigeringsgrensesnittet uten å skrive noen kode:
- (I) skape
- (ii) overskrive temafiler og eksportere
- (iii) generere tomt eller et underordnet tema, og
- (iv) endre og lagre stilvariasjoner av det gjeldende temaet
I tillegg tillater de siste iterasjonene av Gutenberg-pluginen aktivering flytende typografi og layoutjusteringer og andre stilistiske kontroller som kun bruker theme.json fil uten JavaScript og en linje med CSS-regler.
Takk for at du leser og deler dine kommentarer og tanker nedenfor!