Hvis vi gennemser WordPress temakatalog, et flertal af temaer viser forsidebilleder. Det er en funktion i populær efterspørgsel. Forsidetrenden er sand selv i blokere temamappe også screenshots.
Lad os overveje følgende eksempel fra Tyve Tyve (et klassisk tema), som omfatter en cover skabelon der kan bruges til at vise både i enkelt indlæg og side, hvor indlæggets fremhævede billede vises øverst, der strækker sig hen over browserskærmen, med indlægstitel og andre ønskede metadata nedenfor. Cover-skabeloner gør det muligt at skabe indhold, der skiller sig ud fra de traditionelle begrænsninger for at vise indhold.
Oprettelse af coverskabeloner kræver i øjeblikket at skrive PHP-kode som fanget her i Twenty Twenty standard temas forsideskabelon. Hvis vi ser på template-parts/content-cover.php fil, den indeholder kode til visning af indhold, når cover-template anvendes.
Det er således ikke muligt at lave en tilpasset forside, hvis du ikke har et dybt kendskab til PHP. For mange almindelige WordPress-brugere er den eneste mulighed at bruge plugin som Custom Post Type UI som beskrevet i denne korte video.
Dæk sektioner i bloktemaer
Siden WordPress 5.8, kunne temaforfattere oprette brugerdefinerede skabeloner (som enkelt indlæg, forfatter, kategori og andre) med en topheltesektion ved hjælp af blok editor cover blok og bundtet i deres temaer med minimal eller ingen kode.
Før vi dykker ned i, hvordan de øverste store omslagssektioner oprettes i bloktema-skabeloner, lad os kort se på de to bloktemaer Tyve Toogtyve , Wabi af Rich Tabor (fuld anmeldelse link.).
Bag kulisserne implementerer Twenty Twenty-Two et stort header af tilføje et skjult billede gemt som et mønster i header-dark-large dele. Hvorimod i Wabi-temaet er den store header-baggrundsfarve i et enkelt indlæg implementeret med accent baggrundsfarver og en 50px højde afstandsblok (linjer: 5-9). Accentfarverne styres af assets/js/accent-colors.js fil.
Mange andre valgte at lave en topdækselsektion ved at bruge dækblok, som gjorde det muligt for brugere at ændre baggrundsfarven og tilføje et statisk billede fra Media Library eller uploade fra medieenheder – uden at skrive nogen kode. Med denne tilgang kan billeder fra post fremhævet billedblok skulle tilføjes manuelt til hvert enkelt indlæg, hvis du ville have det fremhævede billede som baggrundsbillede i enkelte indlæg.
Cover Blocks med dynamisk post fremhævet billede
WordPress 6.0 stillet til rådighed endnu en cool fremhævede billedomslagsblokke funktion, som tillader brug af det fremhævede billede af ethvert indlæg eller side som baggrundsbillede i forsideblokken.
I det følgende korte video, Automattic-ingeniører diskuterer tilføjelse af fremhævede billeder til at dække blokke med et eksempel fra Archaeo tema:
Billedblokken inklusive post fremhævede billedblokken kan tilpasses yderligere ved hjælp af duotone farve ind theme.json som diskuteret i denne korte Forbindelse af prikkerne YouTube-video (Automattics Anne McCarthy).
Brugseksempler (Wei, lys tilstand)
Hvis vi gennemser miniaturebillederne i blokere temamappe, ser vi, at et flertal af dem inkluderer store cover-header-sektioner. Hvis vi graver i deres skabelonfiler, gør de brug af coverblokke med statisk billedbaggrund.
Nogle nyligt udviklede temaer bruger coverblokke med den dynamiske billedbaggrund (f.eks. Archeo, Wei, Frost, Bright Mode osv.). En kort oversigt over den nye funktion er tilgængelig i denne korte GitHub-video.
Kombination af dynamiske accentfarver funktioner af Wabi tema med forside og indlæg fremhævede billedblokke, udvider Rich Tabor sin kreativitet yderligere i sin nye Wei tema (fuld anmeldelse tilgængelig link.) for at vise dynamiske forsidebilleder fra et enkelt indlæg.
I sit Wei-meddelelsesindlæg, Rich Tabor skriver: “Bag kulisserne, den single.html skabelonen bruger en coverblok, der udnytter indlæggets fremhævede billede. Derefter påføres duotone af det farveskema, der er tildelt posten. På denne måde vil næsten ethvert billede se godt ud”.
Hvis du gerne vil grave dybere ned i Wei-temaets header-omslagsblok og lære, hvordan du laver din egen, er her en korte video fra Fränk Klein (WP-udviklingskurser), som forklarer trin-for-trin, hvordan det blev oprettet.
Svarende til Wei-temaet, Brian Gardner gør også brug af forsideblok med post fremhævede billedblok i hans seneste Lys tilstand tema til at vise enestående indhold med livlige farver.
Brian fortalte WPTavern: “han elsker mest ved at temaet er måden, coverblokken bruges på enkelte sider. Det trækker det fremhævede billede ind i Cover-blokken og tilbyder også brugerdefinerede blokstile til skygger og muligheder i fuld højde. […] Jeg føler, at dette virkelig præsenterer, hvad der er muligt med moderne WordPress."
For flere detaljer, her er den demo site , fuld anmeldelse af Brians Bright Mode-tema.
Design af komplekse layouts med blokeditor
For nylig lancerede WordPress en ny blokeditor designet landingshjemmeside og en download siden. Meddelelsen tiltrak blandede reaktioner fra sine læsere, herunder fra Matt Mullenweg (Automattic), der kommenterede de 33 dage, det tog at designe og lancere sådan en "simpel side". Du kan finde yderligere diskussioner bag kulissen her.
Som svar oprettede Jamie Marsland fra Pootlepress denne YouTube-video hvor han gengiver en næsten identisk hjemmeside på næsten 20 minutter.
Kommenterer Marsland-videoen, Det skriver Sarah Gooding fra WP Travern: “Han er, hvad man kan beskrive som en superbruger med blokeditoren. Han kan hurtigt blande rækker, kolonner og grupper rundt, justere polstring og marginer efter behov og tildele hver sektion den tilsvarende farve til designet. På dette tidspunkt er dette ikke noget, de fleste gennemsnitlige WordPress-brugere kunne gøre.”
Selvom blokeditoren er nået langt, er der stadig voksende smertepunkter for de fleste temaudviklere og almindelige brugere til at skabe og designe komplekse layouts med den.
Tilføjelse af forbedring til TT2 Gopher-blokke
I dette afsnit vil jeg guide dig gennem, hvordan jeg tilføjede forbedringer til TT2 Gopher Blocks tema som jeg refererede til i min tidligere artikel. Inspireret af forsideblokke fra temaer, som jeg beskrev tidligere, ønskede jeg at tilføje tre forsideskabeloner (forfatter, kategori og enkeltomslag) til temaet.
Mens vi browser på websteder, bemærker vi to typer forsideoverskrifter. Den oftest observerede overskrift er omslagssektion blandet med sidehovedet (webstedets titel og topnavigation) i forsideblokken (f.eks. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, osv.). Vi finder også header cover sektion, som ikke er blandet med site header og placeret lige nedenunder, såsom dette Bbc fremtid internet side. Til TT2 Gopher-blokke-temaet valgte jeg det sidste.
Oprettelse af cover-header-mønstre
Lad os først oprette cover-header-mønstre for forfatter-, single- og andre (kategorier, tags) skabeloner ved hjælp af cover blocks. Derefter vil vi konvertere dem til mønstre (som beskrevet her tidligere) og kald de respektive overskriftsomslagsmønstre ind i skabelonerne.
Hvis du er fortrolig med at arbejde med blokeditoren, skal du designe din header-sektion ved hjælp af coverblokke i siteeditoren og derefter konvertere coverheaderkoden til mønstre. Men hvis du ikke er bekendt med FSE editor, så er den nemmeste måde at kopiere mønstre fra mønstre bibliotek i et indlæg, lav de nødvendige ændringer og konverter det til et mønster.
I min tidligere CSS-Tricks artikel, diskuterede jeg i detaljer om at skabe og bruge blokmønstre. Her er en kort oversigt over den arbejdsgang, som jeg bruger til at skabe et enkelt postomslagsoverskriftsmønster:
Overskriftsmønster med enkelt stolpedæksel
Trin 1: Ved hjælp af FSE-grænsefladen, lad os oprette en ny tom fil og starte byggeblokstrukturen som vist i venstre panel.
Alternativt kan dette gøres i et indlæg eller en side først, og derefter kopiere og indsætte markeringen i en mønsterfil senere.
Trin 2: Dernæst, for at skjule ovenstående markering til et mønster, skal vi først kopiere dets kodemarkering og indsætte i en ny /patterns/header-single-cover.php i vores kodeeditor. Vi bør også tilføje påkrævet mønsterfil-headermarkup (f.eks. titel, slug, kategorier, indsætter osv.).
Her er hele koden for /patterns/header-single-cover.php fil:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Trin 3: Til denne demo har jeg brugt dette billede fra fotobiblioteket som et fyldbaggrundsbillede, og anvendte Midnat duotone farve. For at bruge post fremhævede billede dynamisk, bør vi tilføje "useFeaturedImage":true i dækblokken ved at erstatte ovenstående filler image link lige før "dimRatio":50 sådan at linje 10 skal se ud som følgende:
Alternativt kan udfyldningsbilledet også ændres ved at klikke udskifte og vælge Brug fremhævet billede valgmulighed:
Nu skal overskriftsdækslets mønstre være synlige i mønsterindsættelsespanelet til brug hvor som helst i skabelonerne, indlæggene og siderne.
Arkivomslagsoverskrifter
Inspireret af dette WP Tavern-indlæg og en trin-for-trin gennemgang til at oprette en forfatterskabelon-header, jeg ønskede at oprette en lignende cover-header og også føje til TT2 Gopher-tema.
Lad os først oprette arkivcoverets overskriftsmønster for author.html skabelonen også efter ovenstående arbejdsgang. I dette tilfælde opretter jeg dette på en ny tom side ved at tilføje blokke (som vist nedenfor i listevisning):
I baggrunden til omslaget brugte jeg det samme billede, der blev brugt i det enkelte indlægs header-omslag.
Fordi vi gerne vil vise en kort forfatterbiografi på forfatterblokken, bør der også tilføjes en biografisk erklæring til brugerprofilsiden, ellers vil der blive vist et tomt felt i front-end.
Følgende er opmærkningskoden for header-author-cover, at vi vil bruge mønster i næste trin:
Published by:
For at skjule markeringen til en header-author-cover mønster, skal vi tilføje den påkrævede mønsterfil-headermarkering som beskrevet tidligere. Ved at redigere header-author-cover.php mønster, kan vi oprette lignende overskrifter til tags, taksonomi og andre brugerdefinerede skabeloner.
header-category-cover.php mønster til min category.html skabelon er tilgængelig på GitHub.
Oprettelse af skabeloner med hoveddækselblokke
WordPress 6.0 og den seneste Gutenberg 13.7 udvidet skabelonskabende funktioner i blokeditoren, hvilket gør det muligt for mange WordPress-brugere, uden dybt kendskab til kodning, at oprette deres tilpassede skabeloner.
For mere detaljeret information og use cases, her er en grundig tilpasningsnotat af Justin Tadlock.
Bloker redaktør gør det muligt at oprette forskellige typer skabeloner, herunder omslagsskabeloner. Lad os kort gennemgå hvordan man kombinerer dækblok , post fremhævet billedblok med ny skabelon brugergrænseflade gør det nemt at oprette forskellige typer tilpassede omslagsskabeloner, selv med ingen eller lave kodningsevner.
Oprettelse af skabeloner er blevet meget nemmere med Gutenberg 13.7. Sådan opretter du blokskabeloner med koder , i site editor er beskrevet i Tema håndbog og i min tidligere artikel.
Forfatterskabelon med omslagsblok
Top (overskriftssektion) markering af author.html skabelonen er vist nedenfor (linje 6):
...
...
...
... Her er skærmbilleder af forsideoverskrifter til author.html , category.html skabeloner:
Hele kode for begge skabeloner er tilgængelig på GitHub.
Enkeltstolpe med dækblok
For at vise forsideblok i vores enkelt indlæg, er vi nødt til at ringe til header-cover-single pattern under overskriftssektionen (linje 3):
....
....
....Her er et skærmbillede, der viser front-end-visningen af det enkelte indlæg med sidehoveddækslet:
Hele single-cover.html skabelon er tilgængelig på GitHub.
Du kan finde yderligere trin-for-trin gennemgang tutorials om oprettelse af en hero header post sektion , ved hjælp af post-udvalgte billedbaggrunds-omslagsblokke on WP Tavern , Fuld webstedsredigering internet side.
Der har du det!
Nyttige ressourcer
Udvalgt billedomslagsblok
Blogindlæg
Også selvom bloktemaerne generelt er får masser af pushback fra WordPress-fællesskabsmedlemmer, efter min mening, de er fremtiden for WordPress, også. Med bloktemaer kan amatørtemaforfattere, uden de dybe kodningsfærdigheder og beherskelse af PHP og JavaScript-sprog, nu skabe temaer med komplekse layouts med en helteforsidesektion som beskrevet i denne artikel kombineret med mønstre , stilvariationer.
Som en tidlig Gutenberg-bruger kunne jeg ikke være mere begejstret for de nye temaværktøjer som oprette bloktema plugin og andre, der tillader temaforfattere at opnå følgende direkte fra blokeditorens brugergrænseflade uden at skrive nogen kode:
- (I) skabe
- (ii) overskrive temafiler og eksportere
- (iii) generere blankt eller et underordnet tema, og
- (iv) ændre og gemme stilvariationer af det aktuelle tema
Derudover tillader de seneste iterationer af Gutenberg-pluginet aktivering flydende typografi , layout justeringer og andre stilistiske kontroller kun ved hjælp af theme.json fil uden JavaScript og en række CSS-regler.
Tak fordi du læser og deler dine kommentarer og tanker nedenfor!
